<template>
   <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
     </el-breadcrumb>
     <el-row :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
         <el-carousel trigger="click" height="300px">
           <el-carousel-item v-for="item in Products" :key="item">
             <img :src="item" alt="坏了" width="100%" height="100%">
           </el-carousel-item>
         </el-carousel>
         <div style="margin-top: 10px ">
           <el-row :gutter="20">
             <el-col :span="6">
               <div>
                 <el-statistic
                   group-separator=","
                   :precision="2"
                   :value="value2"
                   :title="title"
                 ></el-statistic>
               </div>
             </el-col>
             <el-col :span="6">
               <div>
                 <el-statistic title="男女比">
                   <template slot="formatter">
                     456/2
                   </template>
                 </el-statistic>
               </div>
             </el-col>
             <el-col :span="6">
               <div>
                 <el-statistic
                   group-separator=","
                   :precision="2"
                   decimal-separator="."
                   :value="value1"
                   :title="title"
                 >
                   <template slot="prefix">
                     <i class="el-icon-s-flag" style="color: red"></i>
                   </template>
                   <template slot="suffix">
                     <i class="el-icon-s-flag" style="color: blue"></i>
                   </template>
                 </el-statistic>
               </div>
             </el-col>
             <el-col :span="6">
               <div>
                 <el-statistic :value="like ? 521 : 520" title="Feedback">
                   <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
                   </template>
                 </el-statistic>
               </div>
             </el-col>
           </el-row>
         </div>
       </el-col>
       <el-col :span="12">
         {{receivedShop.projectInfo.name}}
         商品规格 {{checkSkuInfo.sku}}
             <h2 style="color: red">{{ checkSkuInfo.price }}</h2>
           <el-card shadow="hover" style="width: 100%;">
             <div style="width: 100%; display: inline-block; ">
               <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
                 <template slot="suffix">
                   抢购即将开始
                 </template>
               </el-statistic>
             </div>
           </el-card>
         <el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
           <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
<!--             <el-radio-group  v-model="form['rule'+index]" @change="selectRuleSku">-->
<!--               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
<!--             </el-radio-group>-->
             <el-radio v-model="form['rule'+index]" @change="selectRuleSku"
                       v-for="value in ruleAttr.valueList"
                       :label="value" :key="value" :value="value" border>{{value}}</el-radio>
           </el-form-item>
           <el-form-item label="数量">
             <el-input-number v-model="form.num"  :min="1" :max="10" label="描述文字" ></el-input-number>
           </el-form-item>
           <el-form-item>
           <el-button type="primary" >加入购物车</el-button>
           <el-button>立即购买</el-button>
         </el-form-item>
         </el-form>
      总价格{{num}}
       </el-col>
     </el-row>
     <el-row style="margin-top: 50px">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span style="">商品详情</span>

             <el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
               <el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
                 {{attributeMap[attribute.id]}}
               </el-descriptions-item>
             </el-descriptions>


             <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
                              title="其他属性" :column="1" >
               <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
                                     :label="attributeInfo.name">
                 {{attributeMap[attributeInfo.id]}}
               </el-descriptions-item>
             </el-descriptions>

             <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
                              title="其他属性" :column="1" >
               <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
                                     :label="attributeInfo.name">
                 {{attributeMap[attributeInfo.id]}}
               </el-descriptions-item>
             </el-descriptions>


         <editor v-model="editorValue" :read-only="true"></editor>
         </div>
       </el-card>
     </el-row>
   </div>
</template>

<script>
import {getDetailInfo} from "@/api/product/info";

export default {
  name: "productDetail",
  data() {
    return {
      breadcrumbList: [
        "服装",
        "外衣",
        "女士移除"
      ],
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "增长人数",
      form: {
        num: 1,
        price: 0
      },
      shopData: {},
      receivedShop: {
        projectInfo: {
          name: ""
        },
        brandInfo: {
          nam: ""
        },
        attributeInfoList: []
      },
      num: 1,
      editorValue: "阿萨德刚",
      attributeMap: [],
      // 商品轮播图
      Products: [],
      checkSkuInfo: {
        price : 0.00
      },
      price: 0.00,
      attributeGroup: [],
      deadline2 : Date.now() +  1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
    }

  },
  created() {
   const detailId=this.$route.params && this.$route.params.detailId
    this.initProjectDetailInfo(detailId)
    // this.parseShopFromRoute();
    // 设置定时器
    const timerId = setTimeout(() => {
      // 时间到了，调用 hilarity 函数
      this.hilarity();
      clearTimeout(timerId);
    }, this.deadline2 - Date.now());
  },
  watch: {
    'form.num':{
        handler:"updateNum",
       immediate:true
    }
  },
  methods:{
    updateNum() {
    this.num =  this.price * this.form.num
      console.log("qqqqq",this.num)
    },
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到",
        duration: 0,
      });
    },
    initSku(){
        let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
        let skuArr =sku.split("-");
        skuArr.forEach((rule,index) => {
          this.form['rule'+index] = rule
        })
      this.selectRuleSku()

    },
    selectRuleSku(){
      let ruleSize =this.receivedShop.ruleAttrAddModelList.length
      let sku = "";
      for (let index = 0 ; ;index++){
        sku +=this.form['rule'+index]
         if (index+1 === ruleSize){
           break
         }
         sku += "-";
      }
      this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
      console.log("sdf",this.checkSkuInfo)
      console.log("ppp",this.checkSkuInfo.price)
      this.price = this.checkSkuInfo.price
      this.updateNum()
    },
    initProjectDetailInfo(detailId){
      getDetailInfo(detailId).then(response => {
        this.receivedShop = response.data
        console.log("商品",this.receivedShop)
        let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
        this.Products.push(...ccc)
        this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
          let key =productAttributeInfo.attributeId;
          this.attributeMap[key] = productAttributeInfo["value"]
        })

        let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
        console.log("hieng",ruleAttrLength)
        for (let index = 0 ;index < ruleAttrLength ;index++){
          this.form["rule"+index] = null
        }
        console.log("shjo",this.receivedShop.ruleAttrAddModelList)
        this.initSku()
      })
    },
    //商品列表
    // parseShopFromRoute() {
    //   // 尝试解析shop查询参
    //     this.receivedShop = this.$route.query.shop;
    //     // 确保receivedShop和data属性都存在，并且data下有name属性
    //     console.log("hhhh ",this.receivedShop); // 打印店铺名称
    //   // 图片轮播图
    //   let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
    //   this.Products.push(...ccc)
    //   this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
    //      let key =productAttributeInfo.attributeId;
    //      this.attributeMap[key] = productAttributeInfo["value"]
    //   })
    //
    //  let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
    //   console.log("hieng",ruleAttrLength)
    //  for (let index = 0 ;index < ruleAttrLength ;index++){
    //    this.form["rule"+index] = null
    //  }
    //  console.log("shjo",this.receivedShop.ruleAttrAddModelList)
    //  this.initSku()
    // },
  },
  beforeDestroy() {
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

