<template>
  <ui-page-layout title="产品介绍">
    <ui-scroll-view>
      <ui-banner :showPagination="true"
                 flag="产品详情"
                 bannerClass="w-full h-750rem">

      </ui-banner>
      <div class="px-24rem bg-white">
        <div class="leading-50rem text-size-36rem pt-24rem">
        {{product.name}}
        </div>
        <div class="leading-42rem text-[#686868] text-size-30rem mt-24rem">
          {{product.summary}}
        </div>
        <div class="mt-40rem">
          <span class="text-size-30rem text-[#686868]">{{$t("售价")}}：</span>
          <span class="text-primary text-size-48rem font-300">¥{{product.price.toFixed(2)}}</span>
        </div>
        <div class="mt-50rem text-size-36rem text-[#282828]">
          {{$t('购买说明')}}
        </div>
        <div class="mt-24rem font-300 text-size-30rem leading-42rem rounded-3rem bg-[#F7F7F7] pt-22rem pl-26rem pb-34rem pr-39rem">
          {{product.buyDesc}}
        </div>
        <div class="mt-50rem text-size-36rem text-[#282828]" >{{$t('产品详情')}}</div>
        
        <div v-html="product.detail" class="mt-24rem"> </div>
      </div>

      <div class="h-88rem pt-24rem pb-24rem"></div>

    </ui-scroll-view>
    <div v-if="product.online === '1'" style="position: fixed;bottom: 0;z-index: 9999;width: 100%" class="bg-[#ffffff] pt-24rem pb-24rem">
      <div @click="handleBuy" class=" w-600rem h-88rem flex justify-center items-center text-white bg-primary rounded-full mx-auto">
        {{$t('立即购买')}}
      </div>
    </div>
    <div v-if="product.online === '2'" style="position: fixed;bottom: 0;z-index: 9999;width: 100%" class="bg-[#ffffff] pt-24rem pb-24rem">
      <div class=" w-600rem h-88rem flex justify-center items-center text-white bg-[#cccccc] rounded-full mx-auto">
        {{$t('已下线')}}
      </div>
    </div>
  </ui-page-layout>

</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-confirm')
      }
    },
    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>
