<template>
  <div class>
    <div class="edtail-params">
      <p class="title">商品详情</p>
      <ul class="params-list">
        <li
          class="params-item"
          v-for="(item ,index) in data.labelJson"
          :key="index"
        >{{item.name}}：
        <span v-for="(item1,index1) in item.labelParams" 
        :key="index1">{{item1.name}} 
        {{item.labelParams.length>1?',':''}}</span></li>

      </ul>
    </div>
    <div class="detail-img">
      <ul class="img-list" >
        <li class="img-item" v-for="(item,index) in dimagePath" :key="index">
          <el-image class="img" lazy :src="item" style="pointer-events:none"></el-image>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data(){
    return {
      dimagePath:[],
      productInfo:null
    }
  },
  mounted(){
    this.toTurn()
  },
  methods:{
    toTurn(){
      this.productInfo = {

      }
      this.dimagePath = this.data.imgsJson.detailImgs?this.data.imgsJson.detailImgs.split(","):''
    }
  },

};
</script>
<style lang="scss" scoped>
.edtail-params {
  margin-top: 30px;
  border: 1px solid #f2f2f2;
  .title {
    background: #fafafa;
    padding: 20px;
  }
  .params-list {
    margin: 25px;
    color: #333;
    .params-item {
      width: 31%;
      
      font-size: 0;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 10px;
      font-size: 14px;
      margin-right: 2%;
      line-height: 24px;
    }
  }
}
.detail-img {
  border: 1px solid #f2f2f2;
  margin-top: 30px;
  width: 990px;
  box-sizing: border-box;
  max-height: 1000px;
  overflow-y: auto;
  // margin: 0 auto;
  margin-left: 10px;
  .img-list {
    margin: 25px 0;
  }
  .img-item {
    // margin: 25px;
    // text-align: center;
    .img {
      min-height: 100px;
      width: 85%;
      display: block;
      margin: 0 auto;
    }
  }
}
</style>