<template>
  <div class="app-container goods" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
        <el-button style="float: right; margin:0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿
        </el-button>
        <el-button style="float: right; " size="mini" type="primary" @click="submitForm(1)">提 交 上 架
        </el-button>
      </div>
      <el-tabs type="border-card">
        <el-tab-pane label="商品信息">
          <Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
        </el-tab-pane>
        <el-tab-pane label="商品图片">
          <Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
        </el-tab-pane>
        <el-tab-pane label="商品规格">
          <Guide :guidedata='guidedate' @guideclicks='guideclick'/>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
          <Goodsparameter :parameterdata='parameterdata' @parameterclicks='parameterclick'/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import {getGoods,GetFreight} from '@/api/module/goods'
  import descartes from "@/utils/dikaerjs.js";
  import Guide from './components/guide'
  import Goodsinfomation from './components/goodsinfomation'
  import Goodsimg from './components/goodsimg'
  import Goodsparameter from './components/goodsparameter'
  import {addGoods} from '@/api/module/goods'
  export default {
    name: 'goods',
    data() {
      return {
        infomationdata: {},
        parameterdata: {},
        goodsOnsale: 0,
        loading: false,
        applyStatus: '',
        title: "添加新商品",
        imgdate: [],
        guidedate: {},
        parameterdate: {},
        params: {
          applyStatus: 0
        },
        expressTemplateIdList: [], //'原来绑定的运费模板已经被删除',
        expressTemplateList: [],
      }
    },
    components: {
      Guide,
      Goodsinfomation,
      Goodsimg,
      Goodsparameter
    },
    created() {
      this.getFreight();//运费模板数据，回显匹配专用
      this.getParams();
    },
    methods: {
      // 运费模板
      getFreight() {
        GetFreight(this.queryParams).then(response => {
          this.expressTemplateList = response.data;
          this.expressTemplateIdList = this.expressTemplateList.filter(function(item) {
            return item.Id;
          })
        });
      },
      getParams() {
        let goodsId = this.$route.query.goodsId;
        if (goodsId > 0) {
          this.title = "编辑商品信息";
          this.genGoodsInfo(goodsId);
        }
      },
      // 获取商品详情
      genGoodsInfo(goodsId) {
        this.loading = true;
        const goods_id = goodsId;
        getGoods(goods_id).then(response => {
          //console.log(89,response);
          if(response.data.code === 1 && response.data.data) {
            this.goodsOnsale = response.data.data.isOnsale;
            // 对发货时效单独处理
            if(response.data.data.Delayompensate == 0) {
              response.data.data.Delayompensate = '';
            }
            //response.data.data.freightId 返回的值类型有  0（string/number）|| ‘全国包邮通用模板’（string）|| 310(number)
            let resourceType = '1'; // 为了单元框正常显示，先给一个默认值，// 字符串 ‘0’,代表  数据为单独运费
            let serviceagsTagsVal = [];
            if(response.data.data.ServiceagsTags) {
              serviceagsTagsVal = JSON.parse(response.data.data.ServiceagsTags);
            }
            this.infomationdata = {
              goodsId: response.data.data.goodsId,
              goodsName: response.data.data.goodsName,
              categoryId: response.data.data.categoryId,
              scPrice: response.data.data.scPrice / 100,
              price: response.data.data.price / 100,
              jsPrice: response.data.data.jsPrice / 100,
              goodsNowStock: response.data.data.goodsNowStock,
              producingArea: response.data.data.producingArea,
              weight: response.data.data.weight,
              unit: response.data.data.unit,
              goodsBrand: response.data.data.goodsBrand,
              wlPrice: response.data.data.wlPrice,
              pywlPrice: response.data.data.pywlPrice,
              resource: resourceType,
              Delayompensate: response.data.data.Delayompensate,
              aftersaleTime: response.data.data.aftersaleTime,
              mark: response.data.data.mark,
              serviceagsTags: serviceagsTagsVal,
              description: response.data.data.description,
              freightId: response.data.data.freightId,
              outGoodsId: response.data.data.outGoodsId,
            };
            this.guidedate = response.data.data.goodsSpecs;
            this.guidedate["goodsSpec"] = response.data.data.goodsSpec;
            this.parameterdata = response.data.data.Params;
            this.imgdate = {
              "ruleFormdialogImageUrl": response.data.data.image,
              "ruleFormdialogImageUrlplus": response.data.data.defaultImage
            };
          }else if(response.data.code === 0) {
            if(response.data.msg) {
              this.$message({type:'error',message: response.data.msg});
            }else {
              this.$message({type:'error',message: '数据出错啦'});
            }
          }
          this.loading = false;
        });
      },
      info() {
        addgoods(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      //商品信息
      infomationclick(type) {
        Object.assign(this.params, type);
      },
      //商品图片
      imgclick(type) {
        let img = [];
        type.ruleFormdialogImageUrl.forEach((res, index) => {
          img.push(res.url)
        })
        this.params["imgs"] = img;
        this.params["defaultImg"] = ''
        if(type.ruleFormdialogImageUrlplus.length > 0) {
          this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
        }
      },
      //规格
      guideclick(type, specsGroup) {
        this.params["specs"] = type;
        this.params["specsGroup"] = specsGroup;
      },
      //参数
      parameterclick(type) {
        this.params["goodsPram"] = type;
      },

      /** 确定按钮 */
      submitForm(status) {
        this.params.applyStatus = 0;
        this.params.isOnsale = this.goodsOnsale;

        if(status === 1) {
          this.params.applyStatus = 1;
        }

        if(this.params.resource == 0) {
          this.params.freightId = 0;
        }else if(this.params.resource == 1) {
          this.params.wlPrice = 0;
          this.params.pywlPrice = 0;
          // 运费模板字段单独处理,兼容老数据
          if(this.params.freightId === '全国包邮通用模板' || this.params.freightId == 0) {
            this.params.freightId = 310;
          }
        }

        console.log("gogogogog",this.params);
        //return ;

        // 商品信息  表单字段校验
        let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
        // 商品图片  校验
        let isGoodSImgMsg = 'defaultImg' in this.params;

        if(!isGoodInfMsg) {
          if(!('goodsName' in this.params)) {
            this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整！'});
            return;
          }

          if('goodsName' in this.params) {
            if(this.params.goodsName === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
              return;
            }

            if(this.params.categoryId === 0) {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写！'});
              return;
            }

            if(this.params.scPrice === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写！'});
              return;
            }

            if(this.params.price === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写！'});
              return;
            }

            if(this.params.jsPrice === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写！'});
              return;
            }

            if(this.params.goodsNowStock === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写！'});
              return;
            }

            if(this.params.unit === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写！'});
              return;
            }

            if(this.params.goodsBrand === '') {
              this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写！'});
              return;
            }
          }
        }

        if(!isGoodSImgMsg) {
          this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片！'});
          return;
        }else {
          if('defaultImg' in this.params) {
            if(this.params.defaultImg === '') {
              this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传！'});
              return;
            }
            if(this.params.imgs.length === 0) {
              this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传！'});
              return;
            }
          }
        }
        this.loading = true;
        addGoods(this.params).then(response => {
          if (response.code === 1) {
            this.$message({
              message: response.msg,
              type: 'success'
            });
            this.$emit('closeDialog',false);
            if (this.goodsOnsale) {
              var redUrl = '/system/goods/onsale';
            } else {
              var redUrl = '/system/goods/offsale';
            }
            this.$router.push({
              path: redUrl
            });
          } else if(response.code === 0) {
            if(response.msg) {
              this.$message.error(response.msg);
            }else {
              this.$message.error("操作失败！");
            }

          }
          this.loading = false;
        });

      },
      //------  通用方法  -----
      verifiesForm(type,fieldName,obj) {
        // 先判断类型，字符串类型type === text,  下拉形式字段 select
        if(type === 'text') {
          // 没有这个属性，肯定没有填写，抛出提示
          if(!(fieldName in obj)) {
            return 1;
          }
        }

        if(type === 'select') {

        }

        // 如果有这个属性，那么进一步判断，这个必填值是否填写
        // if(fieldName in obj && !obj[fieldName]) {
        //   return 2
        // }

      }
    }
  }
</script>
<style scoped>
  .el-tabs {
    height: calc(100% - 60px);
  }

  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ullist {
    border: 1px solid #e7eaec;
    padding: 10px;
    margin-bottom: 10px;
  }

  .el-input-group {
    width: calc(100% - 60px);
  }

  .addbtn {
    background-color: #5bc0de !important;
    color: #fff !important;
    border-radius: 0 4px 4px 0;

  }

  .app-container {
    height: 100%;
  }

  .box-card {
    height: 100%;
  }

  .box-card /deep/ .el-card__body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .el-tabs {
    height: calc(100% - 35px);
  }

  .el-tabs /deep/ .el-tabs__content {
    height: calc(100% - 39px);
    overflow-y: scroll;
  }

  .eldelbtn {
    height: 30px;
    padding: 5px 20px !important;
    margin-left: -3px;
  }

  .childlist {
    margin-top: 10px;
  }

  .el-button--medium {
    padding: 10px 12px;
  }

  .dfbtn {
    position: relative;
  }

  .goods .el-tabs__content {
    height: 100%;
    overflow-y: scroll;
  }
</style>
