<template>
  <div>
    <div class="hr"></div>
    <div>
      <div>
        <el-tabs v-model="activeName" @tab-click="jump" class="tabbox">
          <el-tab-pane label="基础信息" name="base"></el-tab-pane>
          <el-tab-pane label="类目属性" name="category"></el-tab-pane>
          <el-tab-pane label="销售信息" name="sale"></el-tab-pane>
          <el-tab-pane label="图文描述" name="picture"></el-tab-pane>
          <el-tab-pane label="其他信息" name="service"></el-tab-pane>
        </el-tabs>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="base">基础信息</div>
          <div class="form_box">
            <div class="base_row" v-for="item in baseList" :key="item.name">
              <div class="base_left">{{item.name}}</div>
              <div class="base_right">{{item.value}}</div>
            </div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="category">类目属性</div>
          <div class="base_row" v-for="item in goodsInfo.labelJson" :key="item.name">
            <div class="base_left">{{item.name}}</div>
            <div class="base_right">
              <span v-for="(i,index) in item.labelParams" :key="index">{{i.name}}<span v-if="index != item.labelParams.length-1">，</span></span>
            </div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="sale">销售信息</div>
          <!-- 有销售信息（模板有关联规格）不操作 -->
          <div class="sku_list" v-if="!singleSku">
            <el-table
              v-if="goodsInfo.specJson"
              :data="goodsInfo.specJson.filter(v => (v.isMove !== 1))"
              class="sku_list_table"
              max-height="600"
              border
            >
              <el-table-column
                v-for="(item,key,index) in sku"
                :key="index"
                prop="sku"
                :label="key"
                align="center"
              >
                <template slot-scope="scope">
                   <p v-if='scope.row["specs"][index]["specParam"]'>{{scope.row["specs"][index]["specParam"]["name"]}}</p>
                </template>
              </el-table-column>

               <el-table-column prop="model" label="sku型号" align="center">
              </el-table-column>

              <el-table-column prop="mainImg" label="sku图" align="center">
                <template slot-scope="scope">
                  <img style="max-width: 100%;max-height:100px;background: url('https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/actImg/wh750.png') 0 0 repeat;" :src="scope.row.mainImg" alt="" @click="showImg(scope.row.mainImg)">
                </template>
              </el-table-column>
              <el-table-column prop="purchasePrice" label="长宽高(mm)" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.specLength}}*</span><span>{{scope.row.specWidth}}*</span><span>{{scope.row.specHeight}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="supplyPrice" label="供货价(¥)" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.supplyPrice}}</span>
                </template>
              </el-table-column>
                <el-table-column prop="purchasePrice" label="采购价(¥)" align="center" v-if="!priceformulaId&&false">
                <template slot-scope="scope">
                  <span>{{scope.row.purchasePrice}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="salePrice" label="优惠价(¥)" align="center" v-if="!priceformulaId&&false">
                <template slot-scope="scope">
                  <span>{{scope.row.salePrice}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="productPrice" label="零售价(¥)" align="center" v-if="!priceformulaId&&false">
                <template slot-scope="scope">
                  <span>{{scope.row.productPrice}}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="stock" label="库存" align="center">
              </el-table-column> -->
              <el-table-column prop="moq" label="起订量" align="center">
              </el-table-column>
              <el-table-column prop="lightSourceCount" label="光源数量" align="center">
                  <template slot-scope="scope">
                  <span>{{scope.row.lightSourceCount}}</span>
                </template>
              </el-table-column>




            </el-table>
          </div>

          <div v-else>
            <!-- 无销售信息（模板无关联规格）； -->
            <!-- <div class="base_row">
              <div class="base_left">平台售价</div>
              <div class="base_right">&yen;{{goodsInfo.specJson[0].supplyPrice}}</div>
            </div>
            <div class="base_row">
              <div class="base_left">建议零售价</div>
              <div class="base_right">&yen;{{goodsInfo.specJson[0].purchasePrice}}</div>
            </div> -->
            <div class="base_row">
              <div class="base_left">起订量</div>
              <div class="base_right">{{goodsInfo.specJson[0].moq}}</div>
            </div>
            <div class="base_row">
              <div class="base_left">预警库存</div>
              <div class="base_right">{{goodsInfo.specJson[0].warnStock}}</div>
            </div>
            <div class="base_row">
              <div class="base_left">商品库存</div>
              <div class="base_right">{{goodsInfo.specJson[0].stock}}</div>
            </div>

          </div>

          <div class="base_row">
            <div class="base_left">交货期</div>
            <div class="base_right">
            <span v-if="goodsInfo.deliveryTime==0">现货</span>
            <span v-if="goodsInfo.deliveryTime==1">15天</span>
            <span v-if="goodsInfo.deliveryTime==2">30天</span>
            <span v-if="goodsInfo.deliveryTime==3">45天</span>
            </div>
          </div>
          <!-- <div class="base_row">
            <div class="base_left">销售区域</div>
            <div class="base_right">{{goodsInfo.salesArea}}</div>
          </div> -->
          <!-- <div class="base_row">
            <div class="base_left">发货地</div>
            <div class="base_right">{{goodsInfo.place}}</div>
          </div> -->
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="picture">图文描述</div>
          <el-form :label-position="labelPosition" label-width="100px" v-if="goodsInfo.imgsJson">
            <el-form-item label="商品主图">
              <div class="main_box" v-for="(item,index) in supMainImgs" :key="index">
                <img class="main_img" :src="item" alt="" @click="showImg(item)">
              </div>

              <el-dialog :visible.sync="dialogVisible">
                <div class="imgBox">
                    <img width="100%" :src="imageUrl" alt="">
                </div>
              </el-dialog>
            </el-form-item>
            <el-form-item label="商品短视频">
              <template v-if="goodsInfo.imgsJson.video">
              <div class="main_box">
                <video width="500" :src="goodsInfo.imgsJson.video" controls="controls"> 您的浏览器不支持 video 标签。 </video>
              </div>
              </template>
            </el-form-item>
            <!-- <el-form-item label="高清无底图">
              <template v-if="goodsInfo.imgsJson.higImg">
                <div class="main_box" v-for="(item,index) in goodsInfo.imgsJson.higImg.split(',')" :key="index">
                  <img class="main_img" :src="item" alt="" @click="showImg(item)">
                </div>
              </template>
            </el-form-item> -->
            <!-- <el-form-item label="商品3D模型">
              <a :href="goodsInfo.imgsJson.model3D" download="商品3D模型" v-if="goodsInfo.imgsJson.model3D">
                <el-button size="small" type="primary">点击下载</el-button>
              </a>
              <span v-else>用户未上传</span>
            </el-form-item> -->
            <el-form-item label="详情描述">
              <div class="detailImg">
                <div class="main_box">
                  <img v-for="(item,index) in detailImgs" :key="index" class="de_imgs" :src="item" alt="">
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="service">其他信息</div>
          <div class="form_box">
            <!-- <div class="base_row" v-if="goodsInfo.pledge==1">
              <div class="base_left">服务承诺</div>
              <div class="base_right">7天无理由退换
                <span class="green intr">查看《E无忧7天无理由退换条款说明》</span>
              </div>
            </div> -->
            <div class="base_row">
              <div class="base_left">上架策略</div>
              <div class="base_right" v-if="goodsInfo.strategy==0">审核后上架</div>
              <div class="base_right" v-if="goodsInfo.strategy==1">审核通过后放入仓库</div>
            </div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="log">商品日志</div>
          <div style="padding: 0 100px;">
            <el-table
              ref="multipleTable"
              :data="logList"
              tooltip-effect="dark"
              style="width: 100%"
              :stripe="true"
            >
              <el-table-column prop="addTime" label="时间" align="center"></el-table-column>
              <el-table-column prop="content" label="操作" align="center"></el-table-column>
               <el-table-column prop="remark" label="审核失败原因" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.remark">
                    <el-link type="danger" @click="rejectShowbox(scope.row)">查看详情</el-link>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="operator" label="操作人" align="left"></el-table-column> -->
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="hr"></div>
    <div class="btns" v-if="goodsInfo.remark">
       <router-link class="btnlink" :to='"/goods/newProduct?spuId="+goodsInfo.spuId'><el-button type="primary">编辑</el-button></router-link>
    </div>
        <!-- 驳回信息展示 -->
      <el-dialog :visible.sync="rejectShow" title="商品审核驳回原因">
        <div class="rejectbox">
          <div class="main_box main_box_2" v-for="(item,index) in rejectInfo.remarkImgs" :key="index">
            <img class="main_img" :src="item" alt="" @click="showImg(item)">
          </div>
          <div class="text">{{rejectInfo.remark}}</div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { _supplierId, _deepClone, _areaId2AreaString,_getStorage } from '@/utils/utils'

export default {
  data() {
    return {
      singleSku:false,
      logList:[],
      scroll: 0,
      supMainImgs:[],
      detailImgs:[],
      sku:{},
      baseList:[],
      goodsInfo:{},
      ////////////////////////////////////
      activeName:"base",
      labelPosition: 'right',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl:'',
      dialogTableVisible:false,
      specs: [],
      rejectInfo:{},
      rejectShow:false,
      priceformulaId:null,
    };
  },
  mounted() {
    this.priceformulaId = _getStorage('priceformulaId')
    this.init();
    this.getLog();
    window.addEventListener('scroll', this.dataScroll,true);
  },
  methods: {
    rejectShowbox(data){
      this.rejectInfo =data
      this.rejectShow =true
    },
    init(){
      // 获取品牌
      let getBrandData = () => {
        return this.$axios
          .get('/products/getBrandList')
          .then(res => {
            let { code, data} = res.data
            if (code == 200) {
              return data
            }
          })
          .catch(r => console.log(r));
      };
      // 获取供应商
      let getSupplierData = () => {
        return this.$axios
          .post('/products/supplierList',{
            header:{
              'Content-Type':'application/x-www-form-urlencoded'
            }
          })
          .then(res => {
            let { code, data } = res.data
            if(code == 200){
              return data
            }
          })
      }
      this.$axios
        .all([getBrandData(),getSupplierData()])
        .then(r => {
          this.getInfo({"brands":r[0],"suppliers":r[1]});
        }).catch(r => {
          console.log(r);
        });
    },
    getBrandName(brands,id){
      for(let i in brands){
        if(brands[i].id === id){
          return brands[i].name
        }
      }
    },
    getSupplier(suppliers,id){
      for(let i in suppliers){
        if(suppliers[i].id === id){
          return suppliers[i].name
        }
      }
    },
    getInfo(JsonData){
      let { spuId } = this.$route.query;
      this.$axios.get("/products/getInfo",{
        params:{spuId:spuId}
      }).then(r => {
        let { code, data } = r.data
        if(code == 200){
          this.goodsInfo = data;
          var baselist=[
            {name:"商品类目",value:data.menuName},
            {name:"供应商",value:this.getSupplier(JsonData.suppliers,data.supplierId)},
            {name:"品牌",value:this.getBrandName(JsonData.brands,data.brandId)},
            {name:"系列型号(SPU)",value:data.model},
            // {name:"产地",value:data.place},
            // {name:"上市时间",value:data.},
            // {name:"商品尺寸",value:data.description.size?data.description.size+" mm":''},
            // {name:"包装重量",value:data.description.weight?data.description.weight+" kg":''},
            // {name:"包装体积",value:data.description.volume?data.description.volume+" m³":''},
            // {name:"商品卖点",value:data.description.sellingPoint},
          ]

          let specPropertiesTable = {};
          // filter(v => (v.isMove !== 1))
          var skuList=data.specJson;
            for (let i in skuList) {
              let spec = skuList[i].specs;

              for (let j in spec) {
                let key = spec[j].name; // 用name作为key，用于生成表头

                if (!specPropertiesTable[key]) {
                  specPropertiesTable[key] = [];
                }
                if(spec[j].specParam){
                  specPropertiesTable[key].push(spec[j].specParam[0]);
                }
              }
            }

            var supMainImgs=data.imgsJson.supMainImgs.split(",");
            var detailImgs=data.imgsJson.detailImgs.split(",");

            this.sku = specPropertiesTable;
            this.baseList=baselist;
            this.supMainImgs=supMainImgs;
            this.detailImgs=detailImgs;
            // this.getArea(JsonData.areas)
            // 地区id转换成字符串
            _areaId2AreaString(this.goodsInfo['salesArea']).then(r => {
              this.goodsInfo['salesArea'] = r
            })
            // _areaId2AreaString(this.goodsInfo['place']).then(r => {
            //   this.goodsInfo['place'] = r
            // })

            // 无关联规格
            if(this.goodsInfo.specJson[0].specs.length == 0){
              this.singleSku = true
            }
            // console.log(this.goodsInfo)
        }
      })
    },
    getLog(){
      let { spuId } = this.$route.query;
      this.$axios.get("/products/operatorLogList",{
          params:{spuId:spuId}
        }).then(r => {
        let { code, data } = r.data;
        if(code == 200){
          this.logList = data;
        }
      })
    },
    dataScroll: function (e) {
      // 标签定位
      this.scroll = e.target.scrollTop;
      this.loadSroll();
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName('do-jump');
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 300) {
          if(i==0){
            this.activeName="base";
          }else if(i==1){
            this.activeName="category"
          }else if(i==2){
            this.activeName="sale"
          }else if(i==3){
            this.activeName="picture"
          }else if(i==4){
            this.activeName="service"
          }
          break;
        }
      }
    },
    jump(e){
      var index=e.index;
      var id=e.name;
      document.getElementById(id).scrollIntoView({block: "center"});
    },
    showImg(url){
      this.dialogVisible=true;
      this.imageUrl=url;
    }
  },
  components: {
  }
};
</script>

<style lang="scss" scoped>
.detailImg{
    max-height: 450px;
    border: 1px solid #eee;
    overflow: auto;
    .de_imgs{
      display: block;
    }
}
.main_box{
  display: inline-block;
  padding: 10px;
  .main_img{
    width: 148px;
    height: 148px;
    cursor: pointer;
    background: url('https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/actImg/wh750.png') 0 0 repeat;
  }
}
.main_box_2{
  padding-left: 0;
  padding-top: 0;
}

.sku_list_table{
  // 上传图片
  /deep/ .el-upload--text {
    width: 52px;
    height: 52px;
    line-height: 52px;
    border: 1px dashed #d9d9d9;
  }
  /deep/ .el-table--medium td {
    padding: 5px 0;
  }
  /deep/.el-upload-list__item img.el-upload-list__item-thumbnail{
    width: 146px;
    object-fit: contain;
    line-height: 148px;
  }
}
.base_row{
  font-size: 14px;
  color: #3B3B3B;
  display: flex;
  .base_left{
    // display: inline-block;
    text-align: right;
    width: 120px;
    padding: 15px 10px;
  }
  .base_right{
    // display: inline-block;
    padding: 15px 10px;
    flex: 1;
  }
}
.common-attr{
  .right {
        flex: 1;
        .bg {
          padding: 15px;
          background: #fafafa;
          border: 1px solid #dcdcdc;
        }
        .item {
          margin-top: 10px;
          .name {
            display: inline-block;
            min-width: 72px;
          }
        }
        .item-box {
          .item-title {
            padding-top: 10px;
            padding-bottom: 10px;
          }
          .checkbox-tpl{
            display: inline-block
          }
          .params-btn{
            margin-right:5px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
              color:#409EFF;
            }
          }
          .el-checkbox{
            margin: 10px 5px 10px 15px;
          }
          .button-new-tag{
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
          }
        }
      }
}
.btns{
    padding: 10px;
    padding-left: 30px;
    margin-bottom: 100px;
    .text{
      line-height: 24px;
      color: #3B3B3B;
    }
    .btnlink{
      display:block;
      text-align: center;
      width: 60px;
      margin: 20px auto 0;
    }
}
.details_img_box{
  border: 1px solid #ddd;
  margin-bottom: 40px;
  .left{
    display: inline-block;
    width: 21%;
    height: 486px;
    overflow: auto;
    background: #F7F7F7;
    padding: 2%;
    vertical-align: middle;
  }
  .right{
    display: inline-block;
    width: 74%;
    height: 486px;
    vertical-align: middle;
    position: relative;
    .show_img{
      max-width: 97%;
      max-height: 97%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .full{
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 100%;
    height: 75px;
  }
  .el-upload-list__item-thumbnail{
    height: 65px;
    padding: 5px;
    vertical-align: middle;
    width: 65px;
  }
  .img_name{
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 152px;
  }
  /deep/ .el-upload--picture-card{
    width: 100%;
      height: 75px;
  }
  .el-icon-plus{
    position: relative;
    top: -30px;
  }
}
.video_pro{
  .el-icon-plus{
    font-size: 28px;
    position: relative;
    top: 70px;
  }
}
.intr{
    padding-left: 35px;
    cursor: pointer;
  }
.title2{
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 15px;
}
.input{
    width: 350px;
}

.red{
  color: #E2523A;
}
.green{
  color: #2491A2;
}
.hr{
      height: 2px;
    background: #f0f0f0;
}
.form_tip{
  font-size: 13px;
  color: #999999
}
.title {
    padding-left: 3px;
    border-left: 3px solid #ff6600;
    color: #3a3a3a;
    font-weight: bold;
    font-size: 20px;
  }
.mune{
  padding: 30px 20px 0;
  .class_title{
    padding: 30px 0 15px;
    .class_btn{
      padding: 0 20px;
    }
    .class_tip{
      color: #999;
      font-size: 13px;
    }
  }
}
.tabbox{
  padding: 0 20px;
  position: sticky;
  top: -10px;
  background: #fff;
  z-index: 9;
}
.infobox{
  padding: 20px;
  .checktip{
    cursor: pointer;
  }
}
/deep/ .el-tabs__header {
  margin: 0;
}
.full_imgs{
  max-width: 100%;
}
</style>
