<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>

      <el-breadcrumb-item>{{ projectDetail.projectInfo.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="block" style="margin-top: 30px">
          <el-carousel trigger="click" height="500px">
            <el-carousel-item v-for="item in carouselImages" :key="item">
              <el-image :src="item" style="width: 100%;height: 100%"/>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div style="margin-top: 30px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div>
                <el-statistic
                  :value="123"
                  :title="title"
                ></el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="商品评价">
                  <template slot="formatter">
                    456
                  </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic
                  group-separator=","
                  :precision="2"
                  decimal-separator="."
                  :value="123"
                  title="收藏人气"
                >

                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="品牌信息">
                  <template slot="formatter">
                    {{projectDetail.brandInfo.name}}
                  </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>

      </el-col>
      <el-col :span="12">
          <h1 style="margin-left: 50px">商品名称</h1>
          <h1 style="margin-left: 400px;margin-top: -45px;color: orangered;">￥{{ checkSkuInfo.price }}</h1>
          <h3 style="color: #99a9bf;margin-left: 75px">{{ checkSkuInfo.sku }}</h3>
          <h3 style="color: #99a9bf;margin-left: 400px;margin-top: -40px">秒杀价格</h3>

        <div style="width: 100%; display: inline-block; background-color: orangered;">
          <el-statistic :value="deadline2" time-indices title="商品秒杀 距离结束还有">
          </el-statistic>
        </div>

        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px">
          <el-form-item v-for="(ruleAttr,index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
            <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" label="数量">
            </el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button type="warning" @click="onSubmit">加入购物车</el-button>
            <el-button>立即购买</el-button>
          </el-form-item>

        </el-form>

      </el-col>
    </el-row>

    <el-row style="margin-top: 30px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品详情</span>
        </div>
        <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
          <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
                                :label="attribute.name">{{attributeMap[attribute.id]}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-if="projectDetail.attributeInfoList.length !== 0" title="其他属性" :column="1">
          <el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
                                :label="attributeInfo.name">{{attributeMap[attributeInfo.id]}}</el-descriptions-item>
        </el-descriptions>

        <editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >

        </editor>
      </el-card>
    </el-row>

  </div>
</template>

<script>

import {getDetailInfo} from '@/api/product/info'
import rule from '@/views/product/rule/index.vue'

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  export default {

    name: 'productDetail',
    //import引入的组件需要注入到对象中才能使用"

    data() {
      //这里存放数据"

      return {
        breadcrumbList:[
          "服装",
          "外衣",
          "女士超柔软拉毛运动开衫",
        ],
        like: true,
        value1: 4154,
        value2: 1314,
        title: "销售人气",
        deadline2: Date.now() + 1000 * 60 * 60 * 8,
        form:{
          num:1
        },
        projectDetail:{
          projectInfo:{
            name:"",
          },
          brandInfo:{
            name:""
          },
          attributeInfoList:[]
        },
        checkSkuInfo:{
          price:0.00
        },
        carouselImages:[],
        attributeMap:{}
      };
    },

    //方法集合",
    methods: {
      initSku(){
        let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
        let skuArr = sku.split("-");
        skuArr.forEach((rule,index)=>{
          this.form['rule'+index] = rule;
        })
        this.selectRuleSku();
      },

      selectRuleSku(){
        let ruleSize = this.projectDetail.ruleAttrModelList.length;
        let  sku="";
        for (let index = 0;;index++){
          sku += this.form['rule'+index];
          if (index+1 == ruleSize){
            break
          }
        }
        this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo =>skuInfo.sku ===sku)
      },
      initProjectDetailInfo(detailId){
        getDetailInfo(detailId).then(response =>{
          this.projectDetail = response.data;
          this.projectDetail.productAttributeInfoList.map(productAttributeInfo =>{
            let key = productAttributeInfo.attributeId;
            this.attributeMap[key] = productAttributeInfo["value"]
          })
          console.log(this.attributeMap)
          let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
          for (let index = 0; index<ruleAttrLength;index++){
            this.form["rule"+index] = null;
          }
          this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
          this.initSku()
        })
      },
      onSubmit(){

      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      const  detailId = this.$route.params && this.$route.params.detailId
      this.initProjectDetailInfo(detailId)
    },

  };
</script>
<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

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

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

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

</style>
