<template>
  <div class="goods-parameter">
    <p class="tip-p">
      <el-link class="edit-type-span el-icon-search" type="primary" :underline="false">查看各类价格说明</el-link>
      <span class="tip-span">所有商品价格均为含税价，必须开具发票</span>
    </p>

    <div v-show="(!orgGoodsPam.pamTableList || orgGoodsPam.pamTableList.length === 0)">
      <el-table
        border
        size="small"
        :data="singleSpecTable"
        style="width: 80%;margin-right:10%;"
      >
        <el-table-column align="center" prop="js_price" label="协议价">
          <template slot-scope="scope">
            <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sl_price" label="结算价">
          <template slot-scope="scope">
<!--            <el-input size="mini" style="width:90%" v-model="scope.row.sl_price" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
            <span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price" label="指导价">
          <template slot-scope="scope">
            <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sc_price" label="市场价">
          <template slot-scope="scope">
            <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stock" label="库存量">
          <template slot-scope="scope">
            <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="weight" label="重量">
          <template slot-scope="scope">
            <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="imgs" label="图片">
          <template slot-scope="scope">
            <!-------------->
            <el-upload
              action="/"
              class="uploadData50"
              list-type="picture-card"
              :limit="5"
              :on-exceed="limit5"
              :file-list="singleSpecImgList"
              :http-request="(file)=> { return upLoadSingleSpecImg(file,scope.row) }"
              :on-remove=" (file) => { return removeSingleSpeImg(file,scope.row)}"
            ></el-upload>
            <!-------------->
          </template>
        </el-table-column>
      </el-table>
    </div>

      <div v-show="orgGoodsPam.pamTableList.length > 0" v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con">
        <p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;">
          <span v-show="orgGoodsPam.pamNameList.length === 1">
            {{ orgGoodsPam.pamNameList[0].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index]}}
          </span>
          <span v-show="orgGoodsPam.pamNameList.length > 1">
            <span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;">
            {{ orgGoodsPam.pamNameList[indexv].specName }} <span>：</span>{{ orgGoodsPam.pamDataList[index][indexv]}}
          </span>
          </span>
        </p>
        <el-table
          border
          size="small"
          :data="item"
          style="width: 80%"
        >
          <el-table-column align="center" prop="js_price" label="协议价">
            <template slot-scope="scope">
              <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sl_price" label="结算价">
            <template slot-scope="scope">
<!--              <el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input>-->
              <span>{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="指导价">
            <template slot-scope="scope">
              <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sc_price" label="市场价">
            <template slot-scope="scope">
              <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="stock" label="库存量">
            <template slot-scope="scope">
              <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="weight" label="重量">
            <template slot-scope="scope">
              <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="thumb" label="图片">
            <template slot-scope="scope">
              <span
                v-show="!scope.row.thumb"
                class="span-img"
                @click="upPreSpeImg(index,scope.row)"
              ></span>
              <span v-show="scope.row.thumb" class="span-img-con">
                <img
                  class="spec-img"
                  :src="scope.row.thumb"
                  alt=""
                  @click="changeSpeImg(index,scope.row)"
                />
                <span class="span-img-del el-icon-delete del-span-block" @click="hxz"></span>
              </span>

              <input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*" @change="changeIMG(index,scope.row)">
            </template>
          </el-table-column>
        </el-table>
      </div>

  </div>
</template>

<script>
  import { UploadImg } from '@/api/module/goods';
export default {
  name: 'goodsparameter',
    props: {
    parameterdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      orgGoodsPam: {},
      preTableTitle: [],
      isHoverSpeImg: false,
      // goodsPam:[
      //   {
      //     speNameList:[ '颜色','尺码' ],
      //     goodsParametersList: [],
      //     goodsPamPreTable: [{
      //       hh1: '',
      //       hh2: '',
      //       hh3: '',
      //       hh4: '',
      //       hh5: '',
      //       hh6: '',
      //       hh7: '',
      //     }],
      //   },
      // ],
      // goodsPamPreTable: [],
      // goodsPamPreObj:
      /** 无规格 数据 */
      singleSpecTable: [
        {
          js_price: '', // 协议价
          sl_price: '', // 结算价
          price: '',    // 指导价
          sc_price: '', // 市场价
          stock: '',    // 库存
          weight: '',   // 重量 g
          imgs: '',     // 图片
        }
      ],
      singleSpecImgList: [],
    } // return end
  },
  watch:{
    'parameterdata': function(val) {
      //debugger
      this.orgGoodsPam = val;
      //console.log(175,this.orgGoodsPam);
    },
  },
  created() {
    //this.orgGoodsPam = this.parameterdata;
  },
  mounted() {
    //console.log("9999",this.goodsPamPreList);
  },
  methods: {
    // ------  无规格，上传图片相关  ------
    limit5() {
      this.$message({type: 'warning',message: '只能上传5张图片'});
    },
    // 上传 无规格组合 的图片
    upLoadSingleSpecImg(param) {
      // this.loading = true;
      //debugger
      this.getBase64(param.file).then((res) => {
        let result = res.split(",");
        this.Base64img = result[1];
        let data = {"img_data": this.Base64img}
        UploadImg(data).then(res => {
          // this.loading = false;
          if (res && res.code == 1) {
            this.singleSpecImgList.push({ url: res.data.image_url });
            this.singleSpecTable[0].imgs = [];
            this.singleSpecImgList.forEach(item=> {
              this.singleSpecTable[0].imgs.push(item.url)
            })

            this.$message({ message:'上传成功',type:'success'});
          }else {
            this.singleSpecImgList = [];
            this.$message({ message:'上传失败，请重新上传',type:'error'});
          }
        })
      });
    },
    // 删除 无规格组合 的图片
    removeSingleSpeImg(file) {
      if(file.status === "success") {
        for(let i = 0; i < this.singleSpecImgList.length; i++) {
          if(file.uid === this.singleSpecImgList[i].uid) {
            this.singleSpecImgList.splice(i,1);
            this.singleSpecTable[0].imgs.splice(i,1);
          }
        }
        this.$message({ type: 'success', message: '删除成功!' });
      }
    },

    /** 规格组合 上传图片 */
    // 上传图片
    upPreSpeImg(index, row) {
      let domRef = "hxz" + index;
      //console.log(domRef,this.$refs[domRef][0]);
      this.$refs[domRef][0].value = '';
      this.$refs[domRef][0].click();
    },

    // 更换 某一个规格的图片
    changeSpeImg(index, row) {
      this.upPreSpeImg(index,row);
    },
    // 真正的上传图片方法，原生input
    changeIMG(index, row) {
      let curRow = row;
      let inputDom = "hxz" + index;
      let file = this.$refs[inputDom][0].files[0];

      if( file.size > 1024 * 1024 * 3 ) {
        this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
        return;
      }

      this.getBase64(file).then((res) => {
        let result = res.split(",");
        this.Base64img = result[1];
        let data = {"img_data": this.Base64img}
        UploadImg(data).then(res => {
          // this.loading = false;
          if (res && res.code == 1) {
            curRow.thumb = res.data.image_url;
            // this.singleSpecImgList.push({'url': res.data.image_url})
            this.$message({ message:'上传成功',type:'success'});
          }else {
            this.$message({ message:'上传失败，请重新上传',type:'error'});
          }
        })
      });


      console.log(3333,file);
    },

    hxz() {

    },
    speImgHover(index,row) {
      this.isHoverSpeImg = true;
    },
    speImgLeave(index, row) {
      this.isHoverSpeImg = false;
    },
    // -- 通用 方法 --
    // 图片转换为 base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },

  } // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>

  .span-img {
    margin: 0;
    padding: 0;
    display : inline-block;
    width:50px;
    height:50px;
    position: relative;
    top:4px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px dashed #c0ccda;
    background-color : #fbfdff;
  }
  .span-img:hover {
    border: 1px dashed #1890ff;
  }

  .spec-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    border: none;
  }
  .span-img-con {
    margin: 0;
    padding: 0;
    display : inline-block;
    width:50px;
    height:50px;
    position: relative;
    top:4px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #c0ccda;
  }
  .span-img-del {
    position: absolute;
    display : inline-block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: #333;
    line-height : 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
  }

  .del-span-block {
    display : none;
  }
  .span-img-del:hover {
    color: #F56C6C;
  }

  .span-img-con:hover > .del-span-block {
    display : block;
  }


p {
  margin: 0;
  padding: 0;
}

.tip-p {
  margin: 0 0 20px 0;
}
.goods-parameter {
  padding: 15px 0;
  margin-top: 18px;
}

.edit-type-span {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}

.single-spe-con {
  margin: 25px 0;
}

/* 一般提示性文字 */
.tip-span {
  color: #909399;
  font-size: 12px;
}

// 上传图片样式
.uploadData50 {
  display: inline-block;

  /deep/ .el-upload--picture-card {
    width: 50px;
    height: 50px;
  }

  /deep/ .el-upload {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }

  /deep/ .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>