<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" style="margin-top: 20px">
      <el-col :span="12">
        <el-carousel trigger="click" height="400px">
          <el-carousel-item v-for="img in carouseImages" :key="img">
            <el-image :src="img" style="width: 100%; height: 100%;"></el-image>
          </el-carousel-item>
        </el-carousel>
        <div style="margin-top: 20px;">
          <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="收藏人气"
                >
                  <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 title="品牌信息">
                  <template slot="suffix">
                    {{projectDetail.brandInfo.nam}}
              <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">
          <h1>{{projectDetail.projectInfo.name}}</h1>
          <h3>商品规格:{{abc}}</h3>
          <h2 style="color: red">{{formm.price}}</h2>
        <el-form ref="form" :model="formm" label-width="80px" style="margin-top: 110px">
          <el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
            <el-radio-group v-for="value in ruleAttr.valueList" v-model="formm['rule'+index]" @change="changeSku">
              <el-radio :label="value" border>{{value}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="规格2">
            <el-input-number v-model="formm.num" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @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 :title="attrGroup.groupName" v-for="attrGroup in projectDetail.attributeGroupList" :column="1">
          <el-descriptions-item v-for="attr in attrGroup.attributeList"
                                :label="attr.name">{{attrMap[attr.id]}}</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="其他属性" :column="1">
          <el-descriptions-item v-for="ott in otherAttr" :label="ott.name">{{ott.value}}</el-descriptions-item>
        </el-descriptions>

        <editor v-model="editorValue" :read-only="true" >

        </editor>
      </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: "销量人气",
      formm:{
        num: 1,
        price: 0
      },
      form: [],
      editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
      projectDetail: {},
      abc: "",
      attrMap: {},
      otherAttr: [],
      carouseImages: []
    }
  },
  created() {
    this.initProjectDetailInfo();
  },
  methods: {
    initProjectDetailInfo(){
      getDetailInfo(10).then(response => {
        console.log("Response",response)
        this.projectDetail = response.data;
        for (let i = 0; i < this.projectDetail.productAttributeInfoList.length; i++) {
          this.attrMap[this.projectDetail.productAttributeInfoList[i].attributeId] = this.projectDetail.productAttributeInfoList[i].value
          this.projectDetail.attributeGroupList.forEach(attrGroup => {
            let map = attrGroup.attributeList.map(attrs => attrs.id);
            if (!map.includes(this.projectDetail.productAttributeInfoList[i].attributeId)){
              this.otherAttr.push(this.projectDetail.productAttributeInfoList[i])
            }
          })
        }
        console.log("otherAttr",this.otherAttr)
        this.initSku()
        this.carouseImages = this.projectDetail.projectInfo.carouselImages.split(",")

      })
    },
    changeSku() {
      this.abc=""
      for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
        this.abc+=this.formm["rule"+i]+"-"
      }
      this.abc = this.abc.substring(0, this.abc.length - 1);
      this.projectDetail.projectSkuInfoList.forEach(projectSku => {
        if (projectSku.sku == this.abc){
          this.formm.price = projectSku.price
        }
      })
    },
    initSku(){
      for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
        this.formm["rule"+i] = this.projectDetail.ruleAttrModelList[i].valueList[0]
      }
      this.changeSku()
    },
    onSubmit() {

    }
  }
}
</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;
}
.ql-toolbar{
  display: none;
}
</style>
