<template>
  <div>
    <div class="w-1200px bg-white mt-20px flex justify-center min-h-936px">
      <div class="w-1000px">
        <div class="mb-20px text-size-16px mt-30px">{{ $t("购买人信息") }}</div>

        <ui-devider></ui-devider>
        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货人") }}</div>
          <ui-input v-model="form.linkman" :placeholder="$t('请输入收货人')" class="!w-444px"></ui-input>
        </div>
        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货电话") }}</div>
          <ui-input v-model="form.phone" :placeholder="$t('请输入收货电话')" class="!w-587px"></ui-input>
        </div>

        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货地址") }}</div>
          <ui-input v-model="form.address" :placeholder="$t('请输入收货地址')" class="!w-912px"></ui-input>
        </div>
        <div class="mb-20px text-size-16px mt-50px">{{ $t("商品信息") }}</div>

        <ui-devider class="mb-30px"></ui-devider>
        <div class="px-24px pb-24px bg-[#F7F7F7] relative">
          <div
            class="order-header h-52px flex items-center text-[#686868] text-size-14px"
          >
            <div class="w-100px text-center">{{ $t("产品图") }}</div>
            <div class="w-300px text-center">{{ $t("产品名")}}</div>
            <div class="flex-1 text-center">{{ $t("单价")}}</div>
            <div class="flex-1 text-center">{{ $t("数量")}}</div>
            <div class="flex-1 text-center">{{ $t("小计")}}</div>
          </div>
          <ui-devider class="bg-[#B8B8B8]"></ui-devider>
          <div  class="order-body flex mt-30px items-center relative">
            <img :src="form.coverUrl" class="w-100px h-100px object-contain" />
            <div class="w-300px text-center text-size-16px">{{form.name}}</div>
            <div class="flex-1 text-center font-thin text-size-16px">{{form.price.toFixed(2)}}</div>
            <div class="flex-1 text-center">
              <el-input-number
                v-model="form.num"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </div>
            <div class="flex-1 text-center font-thin text-size-16px">{{(form.price * form.num).toFixed(2)}}</div>
          </div>
        </div>
        <div
          class="mt-20px w-380px h-210px border-1px border-primary border-solid rounded-3px ml-auto pr-32px pt-24px flex flex-col items-end"
        >
          <div class="flex items-end mb-28px">
            <span class="text-size-16px text-primary">{{ $t("实付金额") }}：</span
            ><span class="font-thin text-size-36px text-primary">￥{{(form.price * form.num).toFixed(2)}}</span>
          </div>

          <div v-if="form.linkman && form.phone" class="text-size-16px text-primary mb-10px">
            {{ $t("收货人") }}：{{form.linkman}} {{form.phone}}
          </div>
          <div v-if="form.address" class="text-size-16px text-primary mb-20px">
            {{ $t("收货地址") }}：{{form.address}}
          </div>
          <el-button @click="handleSubmit" class="!text-white !w-200px !h-40px !bg-primary" round>{{this.$t('提交订单')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data(){
      return {
        form:{
          linkman:'',
          phone:'',
          address:'',
        }
      }
  },
  methods:{
    async handleSubmit(){
      let resp = await this.$http.post(this.$api.mzUser.createProductOrder,this.$qs.stringify(this.form))
      if(resp.data.status === 200){


        this.$store.dispatch('SHOW_PAY_BOX',{type:'product',productPayData:resp.data.data.productOrder});
        this.close();
        // await this.$confirm(this.$t('请在弹出的窗口完成付款操作?'), this.$t('提示'), {
        //   confirmButtonText: this.$t('已完成付款'),
        //   cancelButtonText: this.$t('取消'),
        //   type: 'warning'
        // })
        // resp = await this.$http.post(this.$api.mzUser.confirmProductOrder,this.$qs.stringify({orderCode:resp.data.data.productOrder.code}))
        //
        // if(resp.data.status === 200){
        //   this.$message.success("购买成功");
        //   this.$router.push('/user/order?type=product')
        // }

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

};
</script>

<style></style>
