<!--SN码规则新增弹窗内置组件1-->
<template>
  <div class="codeItem ">
    <div class="inputContent">
      <div class="inputBox">
        <red-star />
        <input-vue v-model.number="itemInfo.snDigit" title="位数" size="small" width="80px" />
      </div>
    </div>
    <div class="inputContent">
      <div class="inputBox">
        <input-vue v-model="itemInfo.snDigitName" title="名称" size="small" :red-star="true" />
      </div>
    </div>
    <div class="Content_content">
      <div class="left_title" />
      <div class="right_content">
        <div class="title">
          <div class="inputBox">
            <input-vue title="编码规则" width="150px" :red-star="true">
              <el-checkbox v-model="itemInfo.checked" :disabled="!relationShow">
                是否关联前一项
              </el-checkbox>
            </input-vue>
          </div>
          <div class="title_item" style="margin-left: 20px">
            <input-vue title="关联项名称" box-width="200px" width="100px">
              <el-select
                v-model="relevance"
                value-key="value"
                filterable
                placeholder="请选择"
                style="width: 150px; margin-left: 10px"
                size="small"
                :disabled="!relationShow||!itemInfo.checked"
              >
                <el-option
                  v-for="(item,index) in NameList"
                  :key="index"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </input-vue>
          </div>

          <div class="title_item">
            <i class="el-icon-circle-plus icon" @click="addAry" />
          </div>
        </div>
        <div class="right_content_conetent">
          <div v-for="(item,index) in itemInfo.itemList" :key="index">
            <code-item v-model=" itemInfo.itemList[index]" :checked="itemInfo.checked" :code-list="relevance?relevance.itemList:[]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import InputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue'
import codeItem from './codeItem.vue'
export default {
  components: { codeItem, InputVue, RedStar },
  props: {
    preList: {
      type: Array,
      default: () => {
        return []
      } // 前项下拉选择列表
    },
    index: {
      type: Number,
      required: true
    },
    codeItem: {
      type: Object,
      required: true
    }, // 当前编码对象
    relationShow: {
      type: Boolean,
      default: false
    }// 是否可点击关联项
  },
  data() {
    return {
      checked: false,
      itemInfo: {},
      relevance: null,
      codeItemInfo: ''// 编码详情
    }
  },
  computed: {
    NameList() { // 只取当前项之前的
      return this.preList.slice(0, this.index)
    }
  },
  watch: {
    codeItem: {
      handler(val) {
        this.itemInfo = val
      },
      deep: true
    },
    itemInfo: {
      handler(val) {
        this.$emit('changeRuleList', { data: val, index: this.index })
      },
      deep: true
    }
  },
  mounted() {
    this.itemInfo = this.codeItem
  },
  methods: {
    // 移除编码项
    remove(index) {
      this.itemInfo.itemList.splice(index, 1)
    },
    // 上移编码项
    upmove(index) {
      if (index === 0) return
      const temp = this.itemInfo.itemList[index - 1]
      this.itemInfo.itemList[index - 1] = this.itemInfo.itemList[index]
      this.itemInfo.itemList[index] = temp
      console.log(this.itemInfo.itemList[index])
    },
    // 下移编码项
    downmove(index) {
      if (index === this.itemInfo.itemList.length - 1) return
      const temp = this.itemInfo.itemList[index + 1]
      this.itemInfo.itemList[index + 1] = this.itemInfo.itemList[index]
      this.itemInfo.itemList[index] = temp
    },
    // 添加编码项
    addAry() {
      this.itemInfo.itemList.push({
        digitItem: '',
        digitPre: '',
        digitItemIllustration: '',
        digitPrelllustration:''
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.codeItem {
  display: flex;
  flex: 1;
  .inputContent {

    .inputBox {
      display: flex;
      align-items: center;
    }
  }
  .inputContent+.inputContent{
    margin-left: 20px;
  }
      .Content_content {
        flex: 1;
        display: flex;
        // align-items:center;
        .left_title{
          line-height: 50px;
          padding: 0 10px;
        }
        .right_content{
          flex: 1;
        .title{
           align-items:center;
          display: flex;
          .title_item{
            flex: 1;
            .icon{
              width: 40px;
              height: 40px;
              color: skyblue;
              // margin-left: 10px;
              text-align: center;
              font-size: 20px;
              line-height: 40px;
            }
          }
        }
        .right_content_conetent{
          display: flex;
          flex-direction: column;
    /* justify-content: right; */
           align-items: end;
        }
        }
      }
    }
</style>