<template>
  <!--
    	作者：luoyiming
    	时间：2019-10-26
    	描述：商品管理-商品编辑-规格/库存-多规格-类别
    -->
  <div class="spec-many-type">
    <!--规格属性-->
    <div class="spec-wrap">
      <div class="mb16 min-spc" :key="attr.group_name" v-for="(attr, index) in form.model.spec_many.spec_attr">
        <div class="spec-hd">
          <div class="input-box">{{ attr.group_name }}</div>
          <a href="javascript:void(0);" @click="onDeleteGroup(index)"><i class="el-icon-delete"></i></a>
        </div>
        <div class="spec-bd">
          <div class="item" v-for="(items, i) in attr.spec_items" :key="items.spec_value">
            <el-tag closable @close="onDeleteValue(index, i)">{{ items.spec_value }}</el-tag>
          </div>
          <div class="item"><el-input size="small" v-model="attr.tempValue" style="width: 160px;"></el-input></div>
          <div class="item"><el-button size="small" @click="onSubmitAddValue(attr)" :loading="attr.loading">添加</el-button></div>
        </div>
      </div>
      <!--添加规格-->
      <div v-if="!form.isSpecLocked">
        <el-button size="small" class="el-icon-circle-plus" v-show="showAddGroupBtn" @click="onToggleAddGroupForm">添加规格</el-button>
      </div>
      <!--规格列表-->
      <div class="add-spec mb16" v-show="!showAddGroupBtn">
        <div class="from-box">
          <div class="item">
            <span class="key">规格名：</span>
            <el-input size="small" v-model="addGroupFrom.specName" placeholder="请输入规格名称"></el-input>
          </div>
          <div class="item">
            <span class="key">规格值：</span>
            <el-input size="small" v-model="addGroupFrom.specValue" placeholder="请输入规格值"></el-input>
          </div>
          <el-button type="primary" size="small" :loading="groupLoading" @click="onSubmitAddGroup" plain>确定</el-button>
          <el-button size="small" @click="onToggleAddGroupForm">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PorductApi from '@/api/product.js';
export default {
  data() {
    return {
      /*显示添加规格组按钮*/
      showAddGroupBtn: true,
      /*显示添加规格组表单*/
      showAddGroupForm: false,
      /*新增规格组值*/
      addGroupFrom: {
        specName: '',
        specValue: ''
      },
      groupLoading: false
    };
  },
  inject: ['form'],
  created() {
    /*获取列表*/
    if (this.form.model.spec_many && this.form.model.spec_many.spec_list.length > 0) {
      this.buildSkulist();
    }
  },
  methods: {

    /*显示/隐藏添加规则组 */
    onToggleAddGroupForm: function() {
      this.showAddGroupBtn = !this.showAddGroupBtn;
      this.showAddGroupForm = !this.showAddGroupForm;
    },

    /*表单提交：新增规格组 */
    onSubmitAddGroup: function() {
      let self = this;
      if (self.addGroupFrom.specName === '' || self.addGroupFrom.specValue === '') {
        self.$message('请填写规则名或规则值');
        return false;
      }
      // 添加到数据库
      self.groupLoading = true;
      let Params = {
        spec_name: self.addGroupFrom.specName,
        spec_value: self.addGroupFrom.specValue
      };
      PorductApi.addSpec(Params, true)
        .then(res => {
          self.groupLoading = false;
          // 记录规格数据
          self.form.model.spec_many.spec_attr.push({
            group_id: res.data['spec_id'],
            group_name: self.addGroupFrom.specName,
            spec_items: [
              {
                item_id: res.data['spec_value_id'],
                spec_value: self.addGroupFrom.specValue
              }
            ],
            tempValue: '',
            loading: false
          });
          // 清空输入内容
          self.addGroupFrom.specName = '';
          self.addGroupFrom.specValue = '';
          // 隐藏添加规则组
          self.onToggleAddGroupForm();
          // 构建规格组合列表
          self.buildSkulist();
        })
        .catch(error => {
          self.groupLoading = false;
        });
    },

    /*新增规格值*/
    onSubmitAddValue: function(specAttr) {
      let self = this;
      if (!specAttr.hasOwnProperty('tempValue') || specAttr.tempValue === '') {
        self.$message('规格值不能为空');
        return false;
      }
      // 添加到数据库
      specAttr.loading = true;
      let Params = {
        spec_id: specAttr.group_id,
        spec_value: specAttr.tempValue
      };
      PorductApi.addSpecValue(Params, true)
        .then(data => {
          specAttr.loading = false;
          // 记录规格数据
          specAttr.spec_items.push({
            item_id: data.data['spec_value_id'],
            spec_value: specAttr.tempValue
          });
          // 清空输入内容
          specAttr.tempValue = '';
          // 构建规格组合列表
          self.buildSkulist();
        })
        .catch(error => {
          specAttr.loading = false;
        });
    },

    /*构建规格组合列表*/
    buildSkulist: function() {

      let self = this;
      let spec_attr = self.form.model.spec_many.spec_attr;
      let specArr = [];
      for (let i = 0; i < spec_attr.length; i++) {
        specArr.push(spec_attr[i].spec_items);
      }

      let specListTemp = self.calcDescartes(specArr);

      let specList = [];
      for (let i = 0; i < specListTemp.length; i++) {
        let rows = [];
        let specSkuIdAttr = [];
        if (!Array.isArray(specListTemp[i])) {
          rows.push(specListTemp[i]);
        } else {
          rows = specListTemp[i];
        }
        for (let j = 0; j < rows.length; j++) {
          specSkuIdAttr.push(rows[j].item_id);
        }
        specList.push({
          product_sku_id: 0,
          spec_sku_id: specSkuIdAttr.join('_'),
          rows: rows,
          spec_form: {}
        });
      }

      // 合并旧sku数据
      if (self.form.model.spec_many.spec_list.length > 0 && specList.length > 0) {
        for (let i = 0; i < specList.length; i++) {
          let overlap = self.form.model.spec_many.spec_list.filter(function(val) {
            return val.spec_sku_id === specList[i].spec_sku_id;
          });
          if (overlap.length > 0) {
            specList[i].spec_form = overlap[0].spec_form;
            specList[i].product_sku_id=overlap[0].product_sku_id;
          }
        }
      }

      self.form.model.spec_many.spec_list = specList;
    },

    /*规格组合*/
    calcDescartes: function(array) {
      if (array.length < 2) return array[0] || [];
      return [].reduce.call(array, function(col, set) {
        let res = [];
        col.forEach(function(c) {
          set.forEach(function(s) {
            let t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          });
        });
        return res;
      });
    },

    /*删除规格组事件*/
    onDeleteGroup: function(index) {
      var self = this;
      self
        .$confirm('删除后不可恢复，确认删除该记录吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          // 删除指定规则组
          self.form.model.spec_many.spec_attr.splice(index, 1);
          // 构建规格组合列表
          self.buildSkulist();
        });
    },

    /*删除规格值值事件*/
    onDeleteValue: function(index, itemIndex) {
      let self = this;

      if(self.form.isSpecLocked){
        self.$message({
          message: '本商品正在搞活动，不能删除规格！',
          type: 'warning'
        });
        return;
      }

      self
        .$confirm('删除后不可恢复，确认删除该记录吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          // 删除指定规则组
          self.form.model.spec_many.spec_attr[index].spec_items.splice(itemIndex, 1);
          // 构建规格组合列表
          self.buildSkulist();
        });
    }
  }
};
</script>

<style scoped="scoped">
.spec-many-type {
  margin-left: 180px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #e5ecf4;
  background: #f6f9fc;
}
.spec-wrap .spec-hd {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  font-weight: bold;
}
.spec-wrap .spec-hd .el-icon-delete-solid {
  font-size: 16px;
  color: #999999;
}
.spec-wrap .min-spc {
  border: 1px solid #dfecf8;
}
.spec-wrap .spec-bd {
  padding: 5px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid #dfecf8;
  background: #ffffff;
}
.spec-wrap .spec-bd .el-tag {
  color: #333333;
}
.spec-wrap .spec-bd .item {
  position: relative;
  padding: 5px;
}
.spec-wrap .spec-bd .item input {
  padding-right: 30px;
}
.spec-wrap .spec-hd a,
.spec-wrap .spec-hd .svg-icon,
.spec-wrap .spec-bd .item .svg-icon {
  display: block;
  width: 16px;
  height: 16px;
}
.spec-wrap .spec-bd .item a {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-spec .from-box {
  display: flex;
  justify-content: flex-start;
}
.add-spec .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 200px;
  margin-right: 20px;
}
.add-spec .item .key {
  display: block;
  white-space: nowrap;
}
</style>
