<template>
    <ui-page-layout title="确认订单">
        <div class="p-24rem">

            <div class="bg-white pb-84rem rounded-10rem">

                <van-field label-width="300rem" label-class="text-size-36rem text-[#282828] flex items-center" :label="$t('购买人信息')">

                    <template v-slot:input>
                        <div></div>
                    </template>
                </van-field>
                <van-field :label="$t('收货人')" v-model="form.linkman" :placeholder="$t('请输入收货人姓名')"></van-field>
                <van-field :label="$t('收货电话')" v-model="form.phone" :placeholder="$t('请输入收货人电话')"></van-field>
                <van-field type="textarea" v-model="form.address" :label="$t('收货地址')" :placeholder="$t('请输入收货人地址')"></van-field>

                <van-field label-width="300rem" label-class="text-size-36rem  text-[#282828] flex items-center" :label="$t('商品信息')">
                    <template v-slot:input>
                        <div></div>
                    </template>
                </van-field>
                <div class="h-150rem flex mb-68rem px-4.26667vw pt-24rem">
                    <img :src="form.coverUrl" class="w-150rem h-150rem object-cover" />
                    <div class="ml-20rem flex flex-col justify-between">
                        <div class="text-size-30rem">
                            {{form.name}}
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-size-30rem text-primary font-light">¥{{form.price.toFixed(2)}}</div>
                            <div class="text-size-30rem text-[#686868] font-light ml-24rem">
                                <div class="flex h-40rem input-number ">
                                    <div @click="form.num >= 2 ? form.num--:''" class="w-40rem bg-[#F7F7F7] flex justify-center items-center">-</div>
                                    <div class="w-80rem">
                                        <van-field v-model="form.num" center class="!p-0  !h-40rem"></van-field>
                                    </div>
                                    <div @click="form.num++" class="w-40rem bg-[#F7F7F7] flex justify-center items-center">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div
            class="absolute w-full bottom-0 h-98rem border-t-1rem border-solid border-[#D8D8D8] flex justify-around items-center">
            <div>
                <span class="text-size-30rem text-[#686868] ">{{$t('共')}} {{form.num}} {{$t('件')}} </span>
                <span class="text-size-30rem text-[#282828] ">{{$t('合计')}}：</span>
                <span class="text-size-48rem text-primary">¥{{(form.price * form.num).toFixed(2)}}</span>

            </div>
            <div @click="show = true"
                class="rounded-full flex items-center justify-center w-237rem h-70rem bg-primary text-white text-size-30rem">
                {{$t('提交订单')}}
            </div>
        </div>

        <van-action-sheet v-model="show">
            <div class="h-859rem w-full bg-[#F7F7F7] flex flex-col items-center relative">
                <img @click="show = false" src="/imgs/h5-action-close.png"
                    class="w-31rem absolute right-23rem top-33rem" />
                <div class="text-size-30rem text-primary absolute top-91rem ">
                    {{form.name}}
                </div>
                <div class="text-size-100rem text-primary absolute top-158rem ">
                    <span class="text-size-60rem">￥</span>
                    {{(form.price * form.num).toFixed(2)}}
                </div>
                <div class="h-326rem"></div>
                <div
                    class="text-[#FF0000] w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">
                    信用卡支付
                </div>
<!--                <div-->
<!--                    class="w-654rem h-100rem bg-white rounded-30rem text-size-30rem font-300 flex justify-center items-center mb-24rem">-->
<!--                    支付方式2-->
<!--                </div>-->
                <div
                        @click="handleSubmit"
                    class=" font-300 w-600rem h-88rem bg-primary rounded-full text-white text-size-30 flex justify-center items-center absolute bottom-88rem">
                    {{$t('确认交易')}}
                </div>

            </div>
        </van-action-sheet>

    </ui-page-layout>
</template>

<script>
    export default {

        data(){
            return {
                show:false,
                form:{
                    linkman:'',
                    phone:'',
                    address:'',
                    price:0,
                    num:1,
                }
            }
        },
        methods:{
            async handleSubmit(){
                let resp = await this.$http.post(this.$api.mzUser.createProductOrder,this.$qs.stringify(this.form))
                if(resp.data.status === 200){
                    await this.$dialog.confirm( {
                        message:this.$t('请在弹出的窗口完成付款操作?'),
                        title:this.$t('提示'),
                        confirmButtonText: this.$t('已完成付款'),
                        cancelButtonText: this.$t('取消'),
                    });
                    resp = await this.$http.post(this.$api.mzUser.confirmProductOrder,this.$qs.stringify({orderCode:resp.data.data.productOrder.code}))

                    if(resp.data.status === 200){
                        this.$toast("购买成功");
                        this.$router.replace('/user/order?type=product')
                    }

                }else{
                    this.$toast(resp.data.desc);
                }
            }
        },
        created() {
            this.form = Object.assign(this.form,this.$store.state.cart[0]);
        }

    };
</script>

<style >
.input-number .van-field__body input {
    text-align: center;
    font-size: 20rem;
}
</style>