<template>
  <div class="goods-info">
    <el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px" class="demo-goodsInfoForm" size="small">
      <el-form-item label="商品分类:" prop="categoryStr">
        <el-input style="width:420px;" v-model.trim="goodsInfoForm.categoryStr" :disabled="true"></el-input>
        <el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目</el-link>
        <span class="tip-span">该商品所在类目须支持七天无理由退货</span>
      </el-form-item>

      <el-form-item label='商品标题:' prop="goods_name">
        <el-input v-model.trim="goodsInfoForm.goods_name" placeholder="请输入商品标题" style="width:420px;"></el-input>
        <span class="tip-span ml20">商品名称限制在50字以内,不要填写与商品无关的词</span>
      </el-form-item>
      <!-- <el-form-item label='商品关键词:' prop="goods_des">
        <el-input v-model.trim="goodsInfoForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input>
        <span class="tip-span ml20">关键词之间用 <strong>英文逗号</strong> 分开,最多可以添加5个</span>
      </el-form-item> -->
      <!-- <el-form-item label="商品产地:" prop="producing_area">
        <el-select v-model.trim="goodsInfoForm.producing_area" placeholder="请选择商品产地" style="width: 420px;">
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="商品发货地:" prop="deliver_area">
        <el-select v-model.trim="goodsInfoForm.deliver_area" placeholder="请选择商品发货地" style="width: 420px;">
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label='商品单位:' prop="unit">
        <el-input v-model.trim="goodsInfoForm.unit" placeholder="请输入商品单位" style="width:420px;"></el-input>
      </el-form-item> -->
      <el-form-item label="所属品牌:" prop="brand_id">
        <el-select v-model.trim="goodsInfoForm.brand_id" placeholder="请选择商品品牌" style="width: 420px;">
          <el-option
            v-for="item in brandOptions"
            :key="item.id"
            :label="item.brand_cn"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link>
      </el-form-item>
      <!-- <el-form-item label='市场参考价链接:' prop="web_url">
        <el-input v-model.trim="goodsInfoForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label='商品编码:' prop="out_goods_id">
        <el-input v-model.trim="goodsInfoForm.out_goods_id" placeholder="请输入商品编码(非必须)" style="width:420px;"></el-input>
      </el-form-item> -->

      <el-form-item label="商品图片:" prop="imgs">
        <span class="tip-span" style="display: block;line-height: 34px;">
          <i style="margin: 10px;">{{ goodsImgFileList.length }} / 7</i>
          商品图片最多上传7张,默认第一张为主图
          <span style="margin-left: 20px;">单张图片需限制在2M以内,可上传png、jpg格式,尺寸要求为800 * 800</span>
        </span>
        <draggable  :list="goodsImgFileList" group="article" class="dragArea">
          <div v-for="(element,index) in goodsImgFileList" :key="index" class="list-complete-item" style="float:left;margin:0 10px;">
             <div style="width:98px;height:98px;position: relative;" class="" @mouseover="showDelBtn(index)" @mouseleave="hiddenDelBtn">
              <img v-if="element" :src="element.url" width="98" height="98" />
              <span class="iconcur" v-show="index==currentDelBtn"  style="width:100%;height:100%;line-height: 98px;text-align: center; position:absolute;top:0;left:0;background-color: rgba(0,0,0,0.5);
              transition: opacity .3s;">
                  <i class="el-icon-zoom-in iconcur" style="font-size:20px;color:#fff;" @click="lookimg(element)"></i>
                  <i class="el-icon-delete iconcur" style="font-size:20px;color:#fff;" @click="deleImg(element,index)"></i>
              </span>
             </div>
            <p v-if="index==0" style="margin:0;padding:0;text-align:center;background:#ccc;color:#fff;">主图</p>
          </div>
        </draggable>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      <!-- {{goodsImgFileList}} -->
        <el-upload
          class="upload-img"
          list-type="picture-card"
          action="#"
          :limit="7"
          :on-exceed="limitImg5"
          :before-upload="beforeUpGoodsImg"
          :http-request="uploadGoodsImg"
          :show-file-list="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="goodsImgFileList"
        ><i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="goodsImgVisible">
          <img width="100%" :src="goodsImgUrlDialog" alt="">
        </el-dialog>
      </el-form-item>


      <el-form-item label='商品视频:' >
        <span class="tip-span" style="display: block;line-height: 34px;">
          最多上传一个视频(pm4格式),视频时长不超过30秒,
          <span style="margin-left: 20px;">视频大小不超过100M,默认视频在图片前面</span>
        </span>
            <video 
            v-if="vediosrc"
              style="width:300px;height:150px;float:left;margin:0 20px 0 0;"
              v-bind:src="vediosrc"
              class="avatar video-avatar"
              controls="controls">
                您的浏览器不支持视频播放
              </video>
         
            <el-upload
          class="upload-img"
          action="#"
          :limit="1"
          list-type="picture-card"
          :before-upload="beforeUpGoodsvedio"
          :http-request="uploadGoodsvedio"
          :show-file-list="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="goodsvedioFileList"
        ><i class="el-icon-plus" />
        <!-- v-if="videoform.showvideopath !='' && !videoflag" -->
        </el-upload>
      </el-form-item>
    </el-form>

    <!-- 修改 商品分类目录 -->
<!--    <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>-->
    <el-dialog
      v-loading="loadingSSQ"
      class="add-workorder-dialog"
      title="修改商品分类"
      :visible.sync="editGoodsTypeDialog"
      :before-close="cancelType"
      destroy-on-close
      width="60%"
      center
    >
      <el-cascader-panel v-show="editGoodsTypeDialog" v-model.trim="SSQGoodsList" :props='goodsprops' :options="fuckoptions" @active-item-change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelType" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveType" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { NewGetCategory, GetFreight, UploadImg, getByCategoryData,uploadVideo } from '@/api/module/goods'
  import { getBrandsInf } from '@/api/module/brand/brand'
  import { getAreaList } from '@/api/module/retreat/address'
  import draggable from 'vuedraggable'
  export default {
    name: 'goods',
    props: {
      goodsinfodata: {
        type: Object,
        required: true
      }
    },
    components: {
      draggable
    },
    computed: {//这一部分直接拿过来用的
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
    data() {
      let categoryIdCheck = (rule, value, callback) => {
        if (this.goodsImgFileList.length < 1) {
          callback(new Error("请上传商品图片"));
        } else {
          callback();
        }
      };
      let goodsDecCheck = (rule, value, callback) => {
        if(!value) {
          callback(new Error("商品关键词,不能为空"));
        } else {
          if( value.indexOf(',') > -1 ) {
            callback(new Error("商品关键词,不能有中文状态下的逗号,请再次检查"));
          }
          // 如果包含了,英文逗号,说明有多个,就校验个数
          if( value.indexOf(',') > -1 ) {
            let arrLength = value.split(',').length;
            console.log(value.split(','));
            if(arrLength > 5) {
              callback(new Error("商品关键词,不能超过5个"));
            }else {
              callback();
            }
          }else {
            callback();
          }
        }
      }
      return {
        dialogVisible:false,
        dialogImageUrl:'',
        videoflag: false,
        //是否显示进度条
        videouploadpercent: "",
        //进度条的进度,
        isshowuploadvideo: false,
        //显示上传按钮
        videoform: {
            showvideopath: ''
        },
        goodsvedioFileList:[],
        vediosrc:'',
        loadingapp: false,
        drag: false,
        currentDelBtn: -1,
        areaOptions: [], // 地址 省
        brandOptions: [], // 商品品牌
        goodsInfoForm: {
          goods_id: 0,
          categoryStr: '',     // 商品分类 地址拼接
          categoryList: [],    // 商品分类 id集合的数组
          goods_des: '',       // 关键词
          goods_name: '',      // 商品标题
          category_id: '',
          producing_area: '',   // 产地
          deliver_area: '',     // 发货地
          unit: '',             // 单位
          goods_brand: '',      // 品牌
          brand_id: '',          // 品牌id
          web_url: '',          // 外部链接
          out_goods_id: '',     // 商品编码
          imgs: [],              // 商品图片
          video:''
        },
        goodsInfoRules: {
          categoryStr: [{required: true, message: '商品分类不能为空', trigger: 'blur'}],
          goods_name: [
            {required: true, message: '请输入商品名称', trigger: 'blur'},
            {min: 3, max: 50, message: '商品标题限制在3字符以上,50个字符以下', trigger: 'blur'}
          ],
          // goods_des: [{required: true, validator: goodsDecCheck, trigger: 'blur'}],
          // producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}],
          deliver_area: [{required: true, message: '请选择商品发货地', trigger: 'change'}],
          unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
          goods_brand: [{required: true, message: '请选择商品品牌', trigger: 'change'}],
          imgs: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}]
        },
        goodsImgFileList: [], // 商品图片地址 集合list
        goodsImgVisible: false, // 图片能否预览
        goodsImgUrlDialog: '',
        /* 修改 商品分类 */
        loadingSSQ: false,
        editGoodsTypeDialog: false,
        SSQGoodsList: [], // 经营类目
        goodsprops: {
          expandTrigger: 'click',
          // lazy: true,
          // lazyLoad: this.lazyLoad,
          value: "id",
          label: 'label',
          // leaf: 'leaf',
          children: 'children',
          // checkStrictly: true
        },
        fuckoptions: [],
        catefee: 0,
      } // return end
    },
    watch: {
      // selectCity(arr){
      //   //处理回显问题
      //   setTimeout(()=>{
      //     this.$refs.ssqGoodsCascader.presentText = arr[0] +"/" + arr[1];// 首次手动复制
      //   },1000)
      // }
    },
    created() {
      // 获取 商品品牌
      this.getBrands();
      // 获取类目
      this.getSSQArea();
    },
    mounted() {
      if(this.goodsinfodata.goods_id) {
        this.goodsInfoForm = this.goodsinfodata;
        if( this.goodsInfoForm.imgs.length > 0 ) {
          this.goodsInfoForm.imgs.forEach( (item )=> {
            let objImg = { 'url': '' }
            objImg.url = item;
            this.goodsImgFileList.push(objImg);
          })
        }
      }else {
        this.goodsInfoForm.categoryStr = this.goodsinfodata.categoryStr;
        this.goodsInfoForm.categoryList = this.goodsinfodata.categoryList;
      }

      // 初始化 服务费率
      this.getByCategoryFee(this.goodsInfoForm.categoryList)
    },
    methods: {
      // 上传 商品图片 之前
      beforeUpGoodsvedio(file) {
        let isImgSize = (file.size / 1024 / 1024 ) > 2000;

        if(file.type !== "video/mp4") {
          this.$message({
            message: '上传图片格式只支持 jpg / png 格式',
            type: "warning"
          });
          return false;
        }

        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过5000MB',
            type: "warning"
          });
          return false;
        }
      },
      // 上传 商品视频
      uploadGoodsvedio(param) {
        const formData = new FormData()
      formData.append('file', param.file)
          uploadVideo(formData).then( res=> {
            let urlObj = {'url': ''};
            if(res.data) {
              urlObj.url = res.data.url;
              this.goodsvedioFileList.push(urlObj);
              this.vediosrc = res.data.url
              this.goodsInfoForm.video = res.data.url
              this.$message({type:'success',message:'图片上传成功'});
            }
          });
      
      },
 
      onEnd(){
        debugger
        console.log( this.goodsImgFileList)
        this.drag = false
      },
      //显示删除图片的图标
showDelBtn(index) {
      console.log(index)
      this.currentDelBtn = index
    },
//隐藏删除图片的图标
    hiddenDelBtn() {
      this.currentDelBtn = -1
    },
    // 删除图片
    deleImg(data, index) {
      this.goodsImgFileList.splice(index, 1)
    },
    lookimg(data){
      this.dialogVisible = true
      this.dialogImageUrl = data.url
    },
      // 数据初始化
      initInfo() {
        this.$refs.goodsInfoForm.resetFields();
        this.goodsImgFileList = [];
      },
     
      // 获取 商品品牌
      getBrands() {
        // 增加入参
        let data = {
          status: 1
        }
        getBrandsInf(data).then( res => {
          if(res.code == 1 ) {
            this.brandOptions = res.data.data ? res.data.data : [];
          }else {
            this.brandOptions = [];
          }
        });
      },
      /* 修改 商品分类 类目 */
      editType() {
        this.SSQGoodsList = [];
        this.editGoodsTypeDialog = true;
        this.SSQGoodsList = this.goodsInfoForm.categoryList
      },

      getSSQArea(node, resolve) {
        let limboNode = {id: 0};
        NewGetCategory(limboNode).then(res => {
          this.fuckoptions = res.data;
        });
      },
      // 类目修改
      SSQGoodsChange(value) {
        this.SSQGoodsList = value;
      },
      // 确认 修改 商品分类
      saveType() {
        if(this.SSQGoodsList && this.SSQGoodsList.length === 3) {
          let ssqLabelList = this.$refs['ssqGoodsCascader'].getCheckedNodes()[0].pathLabels;
          this.goodsInfoForm.categoryList = this.SSQGoodsList;
          this.goodsInfoForm.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2];
          this.editGoodsTypeDialog = false;
          this.$message({type:'success',message:'修改成功'});
          // 修改类目后更新 服务费率
          this.getByCategoryFee(this.goodsInfoForm.categoryList)
        }else {
          this.$message({type: 'warning',message: '请选择完整三级类目'});
        }
      },
      // 取消 修改 商品分类
      cancelType() {
        this.editGoodsTypeDialog = false;
        this.SSQGoodsList = [];
      },


      // 上传 商品图片,限制 5 张
      limitImg5() {
        this.$message({ message: '最多上传5张图片', type: 'warning' })
      },
      // 上传 商品图片 之前
      beforeUpGoodsImg (file) {
        let isImgSize = (file.size / 1024 / 1024 ) > 2;

        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持 jpg / png 格式',
            type: "warning"
          });
          return false;
        }

        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过2MB',
            type: "warning"
          });
          return false;
        }

        // // 图片宽高尺寸限制 800*800
        return new Promise(function(resolve, reject){
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function(){
            // 图片是否是正方形 宽高比为 1
            file.width = img.width;
            file.height = img.height;
            let valid = (img.width === 800) && (img.height === 800);
            valid ? resolve() : reject();
          }
          img.src = _URL.createObjectURL(file);
        }).then(()=>{
          return file;
        }, ()=>{
          this.$message({
            message:'商品图片尺寸必须为800 * 800像素,请重新选择!',
            type: 'warning'
          });
          return Promise.reject();
        });

      },
      // 上传 商品图片
      uploadGoodsImg(param) {
        //console.log(327,param);
        this.getBase64(param.file).then( res => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img};
          UploadImg(data).then( res=> {
            let urlObj = {'url': ''};
            if(res.data) {
              urlObj.url = res.data.image_url;
              this.goodsImgFileList.push(urlObj);
              this.goodsInfoForm.imgs = []; // 1009 hxz 初始化img
              this.goodsImgFileList.forEach(item=> {
                this.goodsInfoForm.imgs.push(item.url)
              })
              this.$message({type:'success',message:'图片上传成功'});
              // 只清除一次,不浪费哦
              if(this.goodsImgFileList.length === 1) {
                this.$refs.goodsInfoForm.clearValidate('imgs');
              }
            }
          });
        });
      },
      // 商品信息 子组件 form表单校验, 在父组件中被调用
      validateGoodsInfoForm () {
        let flag = null
        this.$refs['goodsInfoForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      },
      // 商品图片 预览
      handlePictureCardPreview(file) {
        this.goodsImgUrlDialog = file.url;
        this.goodsImgVisible = true;
      },
      // 删除 商品图片
      handleRemove(file) {
        for (let i = 0; i < this.goodsImgFileList.length; i++) {
          if (file.uid === this.goodsImgFileList[i].uid) {
            this.goodsImgFileList.splice(i, 1)
            this.goodsInfoForm.imgs.splice(i, 1);
          }
        }
        if(this.goodsImgFileList.length === 0) {
          this.$refs.goodsInfoForm.validateField('imgs')
        }else {
          this.$refs.goodsInfoForm.clearValidate('imgs');
        }
      },

      // 维护品牌
      toBrand() {
        this.$router.push({path: '/system/shop/brand'});
      },

      /** 根据类目 获取服务费率
       * 传一级类目
       * */
      getByCategoryFee(cateList) {
        let data = {
          category_id: ''
        }
        this.cateFee = 0;

        if (Array.isArray(cateList) && cateList.length > 0) {
          data.category_id = cateList[0];
        }
        // console.log(8888,data);
        getByCategoryData(data).then(res=> {
          if ( res.code == 1 ) {
            this.cateFee = res.data.service_fee_ratio?res.data.service_fee_ratio:''
            this.$store.commit('SET_CATEFEE',this.cateFee);
          }
        });
      },

      // 图片转换为 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 scoped>
  ul {
    padding: 0;
  }
  .goods-info {
    padding: 20px;
    /*margin-top: 18px;*/
  }
  .type-text-span {
    display: inline-block;
    width: 420px;
    /*margin: 0 20px 0;*/
  }
.edit-type-span {
  display: inline-block;
  cursor: pointer;
  margin: 0 20px;
}
/* 一般提示性文字 */
.tip-span {
  color: #909399;
  font-size: 12px;
}
  /deep/.el-form-item {
    margin-bottom: 20px;
  }
.list-complete-item{
  display: inline-block;
}
.imgSty{
  margin:0 10px;
}
.iconcur{
  cursor: pointer;
}
  /*/deep/.el-cascader-menu {*/
  /*  height:600px;*/
  /*}*/
</style>