<!--SN码规则新增弹窗内置组件1-->
<template>
  <div class="codeItem ">
    <div class="inputContent">
      <div class="inputBox">
        <red-star />
        <input-vue v-model.number="itemInfo.snDigit" title="位数" width="150px" />
      </div>
    </div>
    <div class="inputContent">
      <div class="inputBox">
        <red-star />
        <input-vue v-model="itemInfo.snDigitName" title="名称" />
      </div>
    </div>
    <div class="Content_content">
      <div class="left_title">
        <red-star />编码规则：
      </div>
      <div class="right_content">
        <div class="title">
          <div class="title_item">
            <input-vue>
              <el-checkbox v-model="itemInfo.checked">
                是否关联前一项
              </el-checkbox>
            </input-vue>
          </div>
          <div class="title_item">
            <input-vue title="关联项名称">
              <el-select
                v-model="relevanceName"
                filterable
                placeholder="请选择"
                style="width: 130px"
                @change="changitemInfo"
              >
                <el-option
                  v-for="(item,index) in NameList"
                  :key="index"
                  :label="item.snDigitName"
                  :value="item.snDigitName"
                />
              </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="checked" :code-list="codelist" @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: ['ruleList', 'allInfo', 'index'],
  data() {
    return {
      checked: false,
      itemInfo: {},
      relevanceName: '',
      codelist: '',
      codeItemInfo: ''// 编码详情
    }
  },
  computed: {
    NameList() {
      // console.log(this.allInfo[0].itemList[0].digitItem,"=========");
      const temp = [...this.allInfo]
      const temp2 = temp.slice(0, this.index)
      //  console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
      return [...temp2]
    // return []
    }
    // codeList(){
    //     const index = this.allInfo.findIndex(item => {

    //       return  item.snDigitName = this.relevanceName
    //       // console.log(item.snDigitName ,  this.relevanceName);
    //     })
    //     // if(index==-1) return []
    //     // const temp  =  this.ruleList[index].itemList
    //     // return [...temp]
    //     return index
    // }
  },
  watch: {

    itemInfo: {
      handler(vls) {
        this.changitemInfo()
        //  iteminfo改变时改变父组件
        // 判断是否带前项编码
        //  if(!vls.checked){

        //  const  temp = vls.itemList.map(item => {
        //    item.itemList = {
        //      digitItem:item.digitItem,
        //      digitItemIllustration:item.digitItemIllustration
        //    }
        //    return item
        //  })
        //    this.$emit('changeRuleList',{data:temp,index:this.index})
        // // console.log(temp, "-===========================",vls);
        // }else{
        this.$emit('changeRuleList', { data: vls, index: this.index })
      // }
      },
      deep: true
    },
    allInfo: {
      handler(vls) {
        this.changitemInfo()
      },
      deep: true
    }
    // checked(){
    //     this.subInfo(this.itemInfo)
    // }
    // ruleList:{
    //   handler(vls){

    //     if(this.itemInfo.digitItem)
    //    this.itemInfo = {...vls}
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
  // model: {
  //   prop: 'snDigitOrder',
  //   event: 'changeSnDigitOrder'
  // },
  mounted() {
    this.itemInfo = { ...this.ruleList } // 单个框数据
    //  allInfo 全部数据
    // this.itemInfo = this.ruleList   // 根据 对象的性质
    // this.$on('submitCode',()=>{console.log(11);})
    // this.codeItemInfo =
  },
  methods: {
    remove(index) {
      this.itemInfo.itemList.splice(index, 1)
    },
    upmove(index) {
      if (index == 0) return
      console.log(this.itemInfo)
      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) {
      console.log(index, this.itemInfo.itemList.length - 1)
      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() {
      console.log(this.itemInfo)
      this.itemInfo.itemList.push({
        digitItem: '',
        digitPre: '',
        digitItemIllustration: ''
      })
    },
    changitemInfo() {
      const temp = this.NameList.findIndex(item => {
        return item.snDigitName == this.relevanceName
      })

      if (temp == -1) return []
      const ary = this.NameList[temp].itemList.map(item => {
        return { digitItem: item.digitItem }
      })
      console.log(ary, '======ary=====')
      this.codelist = ary
    //  this.codelist = temp
    }

  }
}
</script>

<style lang="scss" scoped>
.codeItem {
      display: flex;
      flex: 1;
      .inputContent {
        flex: 1;
        .inputBox {
          display: flex;
          align-items: center;
        }
      }
      .Content_content {
        flex: 3;
        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>