<template>
  <div class="w-1200px mt-20px flex justify-between">
    <div v-if="product" class="w-860px h-full bg-white px-30px pt-30px pb-50px">
      <div class="flex mb-30px">
        <img class="w-400px h-400px object-cover mr-20px" src="/imgs/product_item.png" />

        <div>
          <div class="font-thin text-size-20px leading-28px mb-20px">
             {{product.name}}
          </div>
          <div class="font-normal text-[#686868] text-size-14px leading-20px mb-44px">
             {{product.summary}}
          </div>
          <div class="flex items-start mb-42px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px  whitespace-nowrap"
            >
              {{$t('购买说明')}}：
            </div>
            <div class="font-normal text-size-14px leading-20px">
              {{product.buyDesc}}
            </div>
          </div>
          <div class="flex items-center mb-33px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
            >
              {{$t('价格')}}：
            </div>
            <div class="text-primary text-size-36px font-light">￥{{product.price.toFixed(2)}}</div>
          </div>
          <div class="flex items-center mb-33px">
            <div
              class="font-normal text-[#686868] text-size-14px leading-20px w-70px whitespace-nowrap"
            >
              {{$t('数量')}}：
            </div>
            <div>
              <el-input-number min="1" v-model="num" :disabled="product.online === '2'"></el-input-number>
            </div>
            <div class="font-normal text-[#686868] text-size-14px">
              <span class="ml-20px">{{ $t("件") }}</span>
              <span class="ml-20px">{{ $t("有货") }}</span>
            </div>
          </div>
          <div class="flex justify-center">
            <el-button v-if="product.online !== '2'" @click="handleBuy" class="!text-white !w-200px !h-40px !bg-primary" round>{{
              $t("立即购买")
            }}</el-button>
            <el-button v-else @click="handleBuy" class="!w-200px !h-40px" round :disabled="product.online === '2'">{{
              $t("已下线")
              }}</el-button>
          </div>
        </div>
      </div>
      <ui-devider></ui-devider>
      <div class="text-size-24px mt-36px mb-34px">{{$t('产品详情')}}</div>
      <div class="product-intro" v-html="product.detail"></div>
    </div>
    <div class="w-320px">
      <ui-banner
              class="mb-20px"
              flag="产品详情"
              titleClass="swiper-title"
      >

      </ui-banner>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      html: ``,
      product:'',
      num:1
    };
  },
  methods:{
     handleBuy(){
       this.$store.commit('ADD_CART',{product:this.product,price:this.product.price,num:this.num,coverUrl:this.product.coverUrl,name:this.product.name,productCode:this.product.code});
       this.$router.push('order-detail')
     }
  },
  async created() {

    let resp = await  this.$http.post(this.$api.common.productDetail,this.$qs.stringify(this.$route.query));
    if(resp.data.status === 200){
       this.product = resp.data.data.product;
    }

  }
};
</script>

<style lang="scss" scoped></style>
