<!--SN码规则新增弹窗-->
<template>
  <el-dialog title="新增SN码配置规则（固定标识）" width="1400px" :visible.sync="isShowAdd" append-to-body @close="close">
    <div class="snCodeRulsDialog ">
      <div class="header">
        <input-vue v-model.number="codeLength" title="SN码（固定标识）个数" width="300px" disabled />
      </div>
      <div class="content">
        <div class="contentHeader contentItem">
          <el-button type="primary" icon="el-icon-circle-plus" @click="addCode">
            自定义固定码
          </el-button>
          <el-button type="primary" icon="el-icon-delete" class="bgred" @click="removeCode">
            删除固定码
          </el-button>
        </div>
        <!-- snCodeCofig -->

        <div v-for="(item,index) in addInfo.ruleList" :key="index" class="item  contentItem">
          <div style="line-height:42px; padding: 0px 10px">
            <el-radio v-model="select" :label="index" size="medium ">
              {{ '' }}
            </el-radio>
          </div>
          <code-field
            :code-item="item"
            :index="index"
            :pre-list="preItemList"
            :relation-show="index>0"
            @changeRuleList="changeRuleList"
          />
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">
          保存
        </el-button>
        <el-button type="info" class="close" @click="close">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import InputVue from '../input/inputVue.vue'
import codeField from '../snCode/codeField.vue'
import { S_add } from '../../../api/product/snCodeRuls'

export default {
  components: {
    InputVue,
    codeField

  },
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      select: -1,
      addInfo: {
        snQuantity: 1,
        ruleList: [
          {
            snDigit: 1,
            snDigitName: '',
            snDigitOrder: '',
            checked: false,
            itemList: [
              {
                digitItem: '',
                digitPre: '',
                digitItemIllustration: ''
              }

            ]
          }
        ]
      } // 表单对象
    }
  },
  computed: {
    preItemList() {
      const list = this.addInfo.ruleList.map((item, index) => {
        return {
          name: item.snDigitName,
          value: index,
          itemList: item.itemList
        }
      })
      return list
    }, // 所有项列表
    codeLength() {
      let length = 0
      for (const item of this.addInfo.ruleList) {
        length += item.snDigit
      }
      return length
    }
  },
  methods: {
    validateForm() {
      // TODO: 校验表单数据
      let flag = true
      let message = ''
      for (let rindex = 0; rindex < this.addInfo.ruleList.length; rindex++) {
        const rule = this.addInfo.ruleList[rindex]
        if (rule.snDigitName === '') {
          message += `第${rindex + 1}项固定码中，名称不得为空！`
          flag = false
          break
        }
        for (const code of rule.itemList) {
          if (code.digitItem === '' || code.digitItemIllustration === '') {
            message += `第${rindex + 1}项固定码中，编码项和编码说明不得为空！`
            flag = false
            break
          }
          if (rule.checked && code.digitPre == '') {
            message += `第${rindex + 1}项固定码中，前项编码不得为空！`
            flag = false
            break
          }
          if (code.digitItem.length !== rule.snDigit) { // 编码长度不符
            message += `第${rindex + 1}项固定码中，编码长度不正确，请检查！`
            flag = false
            break
          }
        }
        if (!flag) {
          break
        }
      }
      if (!flag) {
        this.$message.warning(message)
      }
      return flag
    },
    save() {
      if (this.validateForm()) {
        // 数据正确后开始对数据进行数据处理
        const subData = this.addInfo.ruleList.map((item, index) => {
          let aryTemp = null
          // // 1.处理前编码项
          // if (!item.checked) {
          //   item.itemList = item.itemList.map(littleItem => {
          //     return {
          //       digitItem: littleItem.digitItem,
          //       digitItemIllustration: littleItem.digitItemIllustration
          //     }
          //   })
          // }
          //  去除checked参数
          aryTemp = {
            snDigit: item.snDigit,
            snDigitName: item.snDigitName,
            snDigitOrder: index,
            itemList: item.itemList
          }
          return aryTemp
        })
        //  提交数据
        S_add({ snQuantity: this.addInfo.snQuantity, ruleList: subData }).then(resp => {
          this.$message.success('添加成功')
          this.close()
          this.reset()
        }).catch(_ => {
          console.log(_)
        })
      }
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.addInfo = {
        snQuantity: 1,
        ruleList: [
          {
            snDigit: 1,
            snDigitName: ' ',
            snDigitOrder: '',
            checked: false,
            itemList: [
              {
                digitItem: '',
                digitPre: '',
                digitItemIllustration: ''
              }

            ]
          }
        ]
      }
    },
    addCode() {
      this.addInfo.ruleList.push({
        snDigit: 1, // 位数
        snDigitName: '', // 名称
        checked: false, // 是否关联前项
        snDigitOrder: '', // 顺序
        itemList: [
          {
            digitItem: '', // 编码项
            digitPre: '', // 前项编码
            digitItemIllustration: '' // 编码说明
          }
        ]
      })
      this.addInfo.snQuantity += 1 //
    },
    removeCode() {
      if (this.select === -1) {
        this.$message({
          message: '请选择删除项',
          type: 'error'
        })
        return
      }
      this.addInfo.ruleList.splice(this.select, 1)
      this.select = -1
    },
    //  将子组件传给父组件
    changeRuleList(vls) {
      // console.log(vls,"=======提交的数据=========");
      this.$nextTick(() => {
        this.addInfo.ruleList[vls.index] = vls.data
      })
      // console.log(this.addInfo.ruleList ,"=======修改完成的数据=========");
    }
  }

}
</script>

<style lang="scss" scoped>
.snCodeRulsDialog {
  .bgred {
    background: red;
    border: red;
  }
  .header {
    display: flex;
    align-items: center;
  }
  .content {
    width: 100%;
    border: 1px solid #f0f0f0;
    overflow: auto;
    border-radius: 10px;
    margin-top: 20px ;
    .contentItem {
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    .item {
      display: flex;
      align-items: flex-start;
      padding: 10px;
    }
    .contentHeader {
      text-align: right;
    }
  }
  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>