<!--SN码规则新增弹窗-->
<template>
  <el-dialog title="新增SN码配置规则（固定标识）" width="1530px" :visible.sync="isShowAdd" append-to-body @close="close">
    <div class="snCodeRulsDialog ">
      <div class="header">
        <red-star />
        <input-vue v-model.number="addInfo.snQuantity" title="SN码（固定标识）个数" width="300px" />
      </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 class="selectIcon">
            <el-radio v-model="select" :label="index" size="medium ">
              {{ '' }}
            </el-radio>
          </div>
          <code-field
            :rule-list="item"
            :all-info="[...addInfo.ruleList]"
            :index="index"
            @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 DialogHeader from './dialogHeader.vue'
import codeField from '../snCode/codeField.vue'
import { S_add } from '../../../api/product/snCodeRuls'

export default {
  components: {
    DialogHeader,
    InputVue,
    codeField

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

            ]
          }
        ]
      }
    }
  },
  methods: {
    save() {
      let CodeNumber = 0
      this.addInfo.ruleList.forEach(item => {
        CodeNumber += item.snDigit
        console.log(CodeNumber, this.addInfo.ruleList)
      })
      console.log(this.addInfo.snQuantity, typeof (this.addInfo.snQuantity))
      if (typeof (this.addInfo.snQuantity) === 'string') {
        this.$message.error('请输入正确SN码（固定标识）个数')
        return
      } else if (CodeNumber != this.addInfo.snQuantity && this.addInfo.snQuantity != 0) {
        this.$message.error('位数相加不等于SN码个数请调整')
        return
      } else if (this.addInfo.snQuantity == 0) {
        this.$message.error('正确SN码（固定标识）个数不能为零')
        return
      } else {
        // 数据正确后开始对数据进行数据处理
        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 => {
          if (resp != '') {
            this.$message.success('添加成功')
            this.close()
            this.reset()
          }
        })
      }

      // if(CodeNumber == 0 )
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.addInfo = {
        snQuantity: 0,
        ruleList: [
          {
            snDigit: 0,
            snDigitName: ' ',
            snDigitOrder: '',
            checked: false,
            itemList: [
              {
                digitItem: '',
                digitPre: '',
                digitItemIllustration: ''
              }

            ]
          }
        ]
      }
    },
    addCode() {
      this.addInfo.ruleList.push({
        snDigit: 0,
        snDigitName: '',
        checked: false,
        snDigitOrder: '',
        itemList: [
          {
            digitItem: '',
            digitPre: '',
            digitItemIllustration: ''
          }

        ]
      })
    },
    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 {
  width: 1500px;

  .bgred {
    background: red;
    border: red;
  }

  .header {
    display: flex;
    align-items: center;
  }

  .content {
    border: 1px solid #666;
    max-height: 500px;
    overflow: auto;

    .contentItem {
      padding: 10px;
      border-bottom: 1px solid #999;
    }

    .item {
      display: flex;
      align-items: center;
      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>