<template>

  <div class="top-detail">
        <div class="img-box">
          <img :src="selectedData.mainImg">
        </div>
        <div class="brand-info">
          <p class="brand-name">{{data.brandName}} {{selectedData.model?'['+ selectedData.model+']':''}}
              <img v-if="data.conner.etaoProductTypeIcon" style="width:40px;" :src="data.conner.etaoProductTypeIcon" alt="">
              <img v-else style="width:40px;" :src="data.conner.etaoProductVipIcon" alt="">
          </p>
          <p class="price-box">
            <span class="ghj">
              供货价：
              <strong>￥{{selectedData.supplyPrice}}</strong>
            </span>
            <!-- <span>批发价：￥{{selectedData.purchasePrice}}</span>
            <span>优惠价：￥{{selectedData.salePrice}}</span>
            <span>零售价：￥{{selectedData.productPrice}}</span> -->
          </p>
          <div class="specs-wrap" v-for="(item,index) in specJsonData" :key="index">
            <span class="specs-text">{{item.name}}:</span>
            <ul class="specs-list">
              <li v-for="(item0,index0) in item.specParams" :key="index0" @click="onChangeSku0(item0.id,index)"
              :class="item0.isShow==1?'specs-item active':'specs-item'">{{item0.name}}</li>
            </ul>
          </div>

          <!-- <p class="stock">
            库存：
            <span class="count">{{selectedData.stock}}件</span>
          </p> -->
        </div>
      </div>

</template>
<script>
export default {
  props:{
    data:{
      type:Object,
      default:null
    }
  },
    data(){
    return {
      selectedData:'',
      specJsonData:'',
      defaultArr: [],
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
    }
  },
  mounted(){
    let skuId=this.$route.query.skuId;
    this.selectedDataFun(skuId);

  },
  methods:{

    onChangeSku0(id,pidx){
      // console.log('id--',id,pidx);
      let shopItemInfo = this.shopItemInfo;
      this.defaultArr[pidx] =id;

      let cs = shopItemInfo[this.defaultArr]['skuSpecs'];
      this.isShowFun(cs,0);
      this.$set(this,'selectedData',shopItemInfo[this.defaultArr])
    },
    //1.不再请求后台
    onChangeSku(skuId){

      this.$emit('onChangeSku',skuId);
      this.selectedDataFun(skuId);
    },
    // 获取已选中的商品信息
      selectedDataFun(skuId){

      this.specJsonData =this.data.specJson;
      let skuSpecs = [];
      let shopItemInfo ={};
      if(this.data.skuJson && this.data.skuJson.length>0){

        this.data.skuJson.map((res,index)=>{
          //初始化--获取默认选中规格
          if(res.skuId == skuId){
            this.selectedData = res;
            res.isShow =1;
            skuSpecs = res.skuSpecs;
          }else{
            res.isShow =0
          }
          //拿规格id当key---
            let vidStr = '';
            let vidArr = [];
            for (let st in res.skuSpecs) {
              vidArr.push(res.skuSpecs[st].id);
              vidStr = vidArr.join();
            }
            res.vidArray = vidStr;

            this.shopItemInfo[res.vidArray] = res;

        })
        this.isShowFun(skuSpecs,1);

      }
      // console.log('shopItemInfo',this.shopItemInfo);
      // console.log('默认选中--',this.defaultArr);
      // console.log('选中的商品--',this.selectedData,this.specJsonData);

    },
    isShowFun(skuSpecs,type){
      //选中的规格
        for(let o =0;o<this.specJsonData.length; o++){

          for(let j = 0; j<skuSpecs.length;j++){

              if(this.specJsonData[o]['id'] == skuSpecs[j]['groupId']){
                this.specJsonData[o]['specParams'].map(res=>{
                    if(res.id == skuSpecs[j]['id']){
                      res.isShow = 1;
                      if(type===1){
                          this.defaultArr.push(skuSpecs[j]['id'])
                      }

                    }else{
                      res.isShow =0;
                    }
                })
              }
          }
        }
        return this.specJsonData;
    }
    // specJsonData
  }
}
</script>
<style lang="scss" scoped>

  // min-width: 1200px;
  .top-detail {
    // min-width: 1200px;
    border: 1px solid#f2f2f2;
    padding: 30px;

    padding-left: 0;
    display: flex;
    .img-box,
    .brand-info {
      // display: inline-block;
      // vertical-align: top;
    }
    .img-box {
      width: 345px;
      min-height: 250px;
      position: relative;
      margin-right: 20px;
      margin-left: 20px;
      img {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .brand-info {
      flex: 1;
      .brand-name {
        font-size: 20px;
        margin-bottom: 20px;
      }
      .price-box {
        background: #f2f2f2;
        padding: 20px;
        // width: 1000px;
        span {
          display: inline-block;
          width: 180px;
          font-size: 15px;
          padding: 10px 0;
        }
        .ghj {
          width: 230px;
        }
        strong {
          font-weight: 700;
          color: #ff6600;
          font-size: 22px;
        }
      }
      .specs-wrap {
        margin-top: 20px;
        display: flex;
        font-size: 15px;
        .specs-text {
          min-width: 40px;
          padding-right: 10px;
        }
        .specs-list {
          flex: 1;
          .specs-item {
            cursor: pointer;
            padding: 12px;
            border: 1px solid #f2f2f2;
            display: inline-block;
            margin-bottom: 10px;
            margin-right: 10px;
            // float: left;
          }
          .active {
            border: 1px solid #ff6600;
            color: #ff6600;
          }
        }
      }
      .stock {
        margin-top: 20px;
        .count {
          color: #ff6600;
          font-weight: bold;
          font-size: 20px;
          margin-left: 6px;
        }
      }
    }
  }

</style>
