<style>
.addIntegralMall {
  padding-top: 25px;
}
.addIntegralMall .resource-lititle {
  display: block;
  border-left: 4px solid #e95252;
  padding-left: 10px;
  margin-bottom: 20px;
}
.addIntegralMall .resource-lititle.resource-lititle2 {
  margin-top: 25px;
}
.addIntegralMall .re-img {
  width: 140px;
  height: 93px;
  border-radius: 10px;
  float: left;
  margin: 0 30px 30px 0;
  position: relative;
}
.addIntegralMall .re-img2 {
  width: 100%;
  height: auto;
}
.addIntegralMall .re-img:first-child {
  margin-left: 0;
}

.addIntegralMall .resource-imglist {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.addIntegralMall .resource-imglist img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.addIntegralMall .add-img {
  margin-top: 20px;
}

.addIntegralMall .reimg-add {
  width: 140px;
  height: 93px;
  background: rgba(236, 236, 236, 1);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  z-index: 999;
}

.addIntegralMall .ad-one {
  display: none;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  top: 0;
}

.addIntegralMall .bigAdd {
  font-size: 50px;
  color: #d1d1d1;
  position: relative;
  left: 45px;
  top: 10px;
}
.addIntegralMall .imgzhe {
  display: none;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  text-align: center;
  line-height: 93px;
  top: 0;
}

.addIntegralMall .reimg-add:hover .ad-one {
  display: block;
}

.addIntegralMall .re-img:hover .imgzhe {
  display: block;
}

.addIntegralMall .ad-one div {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  text-align: center;
  background: gray;
  color: #fff;
}

.addIntegralMall .ad-one div:hover {
  background-color: #fff;
  color: #e95252;
}

.addIntegralMall .re-upload {
  position: absolute;
  top: 30px;
  left: 54px;
  z-index: 999;
}

.addIntegralMall .re-find {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 999;
}

.addIntegralMall .search-imgicon {
  padding-right: 20px;
  margin-left: -40px;
}

.addIntegralMall .resAddImg {
  width: 520px;
  padding-right: 45px;
}

.addIntegralMall .addimgContent {
  height: 290px;
  overflow: auto;
  margin: 30px 0 30px 25px;
  width: 545px;
}

.addIntegralMall .addimgDiv {
  width: 160px;
  height: 155px;
  float: left;
  margin: 0 20px 15px 0;
  overflow: hidden;
}

.addIntegralMall .addimgContent div:first-child {
  margin-left: 0;
}

.addimgContent div:nth-child(3n) {
  margin-right: 0;
}

.addIntegralMall .itemImgdiv {
  width: 160px;
  height: 106px;
  position: relative;
}

.addIntegralMall .itemImgdiv img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.addIntegralMall .re-delte {
  width: 32px;
  height: 32px;
  background: gray;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

.addIntegralMall .re-delte:hover {
  color: #e95252;
  background: #fff;
}
.addIntegralMall .tips {
  padding-left: 130px;
  font-size: 12px;
  position: relative;
  bottom: 20px;
  color: #777777;
}
.addIntegralMall .tips.tips2 {
  bottom: 0;
  padding-left: 0;
  padding-top: 10px;
}
.addIntegralMall .bottom_sub {
  padding-top: 25px;
}
.addIntegralMall .ql-editor{
  min-height: 200px;
}
.heightauto.el-select .el-input{
  height: auto !important;
}
</style>
<template>
  <el-row class="addIntegralMall">
    <el-col :span="9">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="130px">
        <span class="resource-lititle">{{$t('salesModule.BaseInfo')}}</span>
        <el-form-item :label="$t('MarketingActi.commName')" prop="Name">
          <el-input v-model="addMsg.Name" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('MarketingActi.commType')" prop="SellType">
          <el-select filterable v-model="addMsg.SellType">
            <el-option
              v-for="item in CommodityTypeList"
              :label="item.Name" :value="item.Id" :key="item.Id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ground.shangpinfl')" >
          <el-select filterable v-model="addMsg.ParentCategoryId" @change="getGoodsTypeManager(2)">
            <el-option
              v-for="item in GoodsTypeList"
              :label="item.Name" :value="item.Id" :key="item.Id"
            ></el-option>
          </el-select>
          <el-select filterable v-model="addMsg.CategoryId">
            <el-option
              v-for="item in GoodsTypeList2"
              :label="item.Name" :value="item.Id" :key="item.Id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ground.cbenjia')" prop="CostPrice">
          <el-input v-model="addMsg.CostPrice" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('ground.xiaoshoujia')" prop="SellPrice">
          <el-input v-model="addMsg.SellPrice" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('ground.lingduifyje')" prop="LeaderRebate">
          <el-input v-model="addMsg.LeaderRebate" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('ground.gongsifyje')" prop="CompanyRebate">
          <el-input v-model="addMsg.CompanyRebate" class="w217"/>
        </el-form-item>
         <el-form-item :label="$t('ground.tonghangfyje')" prop="ClientRebate">
          <el-input v-model="addMsg.ClientRebate" class="w217"/>
        </el-form-item>
        <el-form-item :label="$t('ground.weitufyje')" prop="WeiTuRebate">
          <el-input v-model="addMsg.WeiTuRebate" class="w217"/>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="9">
      <span class="resource-lititle">{{$t('ground.shangpintp')}}</span>
      <div class="resource-list">
        <div class="resource-imglist clearfix">
          <div class="re-img" v-for="(item,index) in DiningImageArray" :key="index">
            <img v-if="!item" src="../../assets/img/bg_c3@3x.png">
            <img :src="item" :onerror="defaultImg">
            <div class="imgzhe">
              <div class="re-delte">
                <i @click.stop="showImg(item)" class="iconfont icon-img_cz"></i>
              </div>
              <div class="re-delte" @click="delImg(index)">
                <i class="iconfont icon-xingzhuang"></i>
              </div>

              <div
                class="re-delte"
                @click.stop="ExchangeImg(index,0)"
                v-if="index!=0&&item"
              >
                <i class="iconfont icon-zuoyi"></i>
              </div>
              <div
                class="re-delte"
                @click.stop="ExchangeImg(index,1)"
                v-if="index!=DiningImageArray.length-1&&item"
              >
                <i class="iconfont icon-youyi"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="add-img" v-if="DiningImageArray.length<5">
          <div class="reimg-add">
            <i class="iconfont icon-img_haha bigAdd"></i>
            <div class="ad-one">
              <div class="re-upload">
                <el-upload
                  :http-request="UploadImage"
                  :multiple="true"
                  accept="image/jpeg, image/gif, image/png, image/bmp"
                  :show-file-list="false"
                  action
                >
                  <i class="iconfont icon-img_bdsc"></i>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <p class="tips tips2">{{$t('ground.zuiduoscwz')}}</p>
        <span class="resource-lititle resource-lititle2">{{$t('ground.shangpinms')}}</span>
        <el-input type="textarea" :rows="2" v-model="addMsg.Description" class="w217"/>
        <span class="resource-lititle resource-lititle2">{{$t('ground.shangpinsm')}}</span>
        <el-select v-model="addMsg.ExplainList" multiple :placeholder="$t('pub.pleaseSel')" class="heightauto">
          <el-option
            v-for="item in CommodityExplainList"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id">
          </el-option>
        </el-select>
        <span class="resource-lititle resource-lititle2">{{$t('ground.shangpinxq')}}</span>
        <my-edit v-on:edit-value="addMsg.Content = arguments[0]" v-bind:editValue="addMsg.Content"
          v-bind:toolbarShow="toolbar" v-bind:placeholder="$t('pub.pleaseSel')"></my-edit>
          
      </div>
      <div class="bottom_sub">
        <button
          class="hollowFixedBtn"
          @click="goIntegralMall('BuyingList')"
        >{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-col>
    <viewer :images="images" :options="imageOptions" @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </el-row>
</template>
<script>
import { setInterval, setTimeout } from "timers";
import MyEdit from "../EditTemplate.vue";
export default {
  data() {
    return {
      toolbar: {
        clean: true, 
        font: false, //字体
        narrative: false, //叙述,
        image:true,
        bold: true, //加粗
        underline: true, //下划线
        header1: true, //H1
        header2: true, //H2
        fontColor: true, //字体颜色
        fontBackgroundColor: true, //背景颜色
      },
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ list: "ordered" }, { list: "bullet" }]
          ]
        }
      },
      addMsg: {
        Id: 0,
        Name: "",
        CoverImg: "",
        CategoryId: "",
        CostPrice: "",
        SellPrice: 0,
        SellType: "",
        ExplainList: "",
        FlowImgList: "",
        Description: "",
        Content: "",
        LeaderRebate: 1,
        CompanyRebate: 0,
        ClientRebate: 0,
        WeiTuRebate: 0,
        ParentCategoryId: ""
      },
      MenberList: [],
      GoodsTypeList: [],
      CommodityTypeList: [],
      rules: {
        Name: [{ required: true, message: this.$t('ground.qingsrspmc'), trigger: "blur" }],
        CostPrice: [{ required: true, message: this.$t('ground.qingsrjg'), trigger: "blur" }],
        marketPrice: [
          { required: true, message: this.$t('ground.qingsrscjg'), trigger: "blur" }
        ],
        state: [
          { required: true, message: this.$t('ground.qingxzsplx'), trigger: "change" }
        ],
      },
      //上传的文件数组
      DiningImageArray: [],
      imageOptions: {
        navbar: false,
        title: false
      },
      images: [],
      defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
      GoodsSeriesList: [],
      CommodityExplainList: [],
      GoodsTypeList2: [],
      CategoryId: ''
    };
  },
  components: {
    "my-edit": MyEdit
  },
  methods: {
    getDetails(id){
      this.apipost("Shop_post_GetCommodityInfo", {CommodityId: id}, r=>{
        if (r.data.resultCode === 1) {
          this.addMsg = r.data.data
          this.addMsg.SellType = this.addMsg.SellType + ''
          this.addMsg.ParentCategoryId = this.addMsg.ParentCategoryId + ''
          this.DiningImageArray = this.addMsg.FlowImgList
          this.getGoodsTypeManager(2)
          this.$forceUpdate()
        }
      }, null)
    },
    getGoodsSeries() {
      this.loading = true;
      this.apiJavaPost(
        "/api/IntegralManager/getGoodsSeries",
        {},
        res => {
          this.loading = false;
          if (res.data.resultCode === 1) {
            this.GoodsSeriesList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    goIntegralMall: function(path) {
      this.$router.push({ name: path });
    },
    //图片左移右移
    ExchangeImg(index, IsMove) {
      var imgItem = this.DiningImageArray[index];
      //左移
      if (IsMove == 0) {
        var upItem = this.DiningImageArray[index - 1];
        this.$set(this.DiningImageArray, index - 1, imgItem);
        this.$set(this.DiningImageArray, index, upItem);
      } else {
        //右移动
        var downItem = this.DiningImageArray[index + 1];
        this.$set(this.DiningImageArray, index + 1, imgItem);
        this.$set(this.DiningImageArray, index, downItem);
      }
    },
    //上传图片
    UploadImage(file) {
      let newArr = [];
      newArr.push(file.file);
      let fileName = file.file.name;
      var path = "/Upload/Temporary/";
      this.UploadSelfFileT(path, newArr, x => {
        //统一图片处理
        if (this.DiningImageArray.length === 5) {
          return this.$message.error(this.$t('ground.zuiduoscwz'))
        }
        var obj = {}
        var str = x.data.FilePath;
        var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
        this.DiningImageArray.push(imgUrl);
      });
    },
    //删除图片
    delImg(index, type) {
      //更新图片
      if (type) {
      } else {
        var item = this.DiningImageArray[index];
        this.DiningImageArray.splice(index, 1);
      }
    },
    inited(viewer) {
      this.$viewer = viewer;
    },
    showImg: function(src) {
      let srcArr = src.split("?");
      src = srcArr[0];
      let isExsit = false;
      this.images.forEach(x => {
        if (x === src) isExsit = true;
      });
      if (!isExsit) {
        this.images.push(src);
      } else {
        this.$viewer.view(this.images.indexOf(src));
      }
      this.$viewer.show();
    },
    getMenberList: function() {
      let msg = {
        state: 1,
        name: ""
      };
      this.apiJavaPost(
        "/api/member/getmemberrate",
        msg,
        res => {
          if (res.data.resultCode === 1) {
            this.MenberList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addIntegralMall();
        } else {
          return false;
        }
      });
    },
    addIntegralMall: function() {
      if (this.addMsg.CategoryId == '') return  this.$message.error(this.$t('ground.qingxzspfl'))
      this.addMsg.FlowImgList = this.DiningImageArray
      this.apipost("Shop_post_SetCommodityInfo", this.addMsg,
        res => { 
          if (res.data.resultCode === 1) {
            this.$message.success(res.data.message);
            setTimeout(() => {
              this.goIntegralMall("BuyingList");
            }, 1000);
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    getGoodsTypeManager(t) {
      this.apipost("Shop_post_GetCommodityCategoryList",{Name: "", ParentId: t ? this.addMsg.ParentCategoryId : 0},res => {
          if (res.data.resultCode === 1) {
            if(t) {
              this.GoodsTypeList2 = res.data.data;
              return
            }
            this.GoodsTypeList = res.data.data; 
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    getCommodityTypeList() {
      this.apipost(
        "Shop_post_GetCommodityTypeList",
        {},
        res => {
          if (res.data.resultCode === 1) {
            this.CommodityTypeList = res.data.data; 
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    getCommodityExplainList() {
      this.apipost(
        "Shop_post_GetCommodityExplainList",
        {},
        res => {
          if (res.data.resultCode === 1) {
            let CommodityExplainList = [];
            for(let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].Id = parseInt(res.data.data[i].Id)
              CommodityExplainList.push(res.data.data[i])
            }
            this.CommodityExplainList = CommodityExplainList
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
  },
  mounted() {
    let id = this.$route.query.proId
    this.getDetails(id)  
    this.getCommodityTypeList();
    this.getGoodsTypeManager();
    this.getCommodityExplainList();
  }
};
</script>
