<!--SN码规则新增弹窗内置组件2-->
<template>
  <div class="box">
    <div v-if="checked" class="frontCode code">
      <red-star />
      <input-vue title="前项编码">
        <el-select
          v-model="itemInfo.digitPre"
          filterable
          placeholder="请选择"
          style="width: 100px"
          @change="changeCodeinfo"
        >
          <el-option v-for="item in codeList" :key="item.digitItem" :label="item.digitItem" :value="item.digitItem" />
        </el-select>
      </input-vue>
    </div>
    <div class="middleCode code">
      <red-star />
      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" @submit="changeCodeinfo" />
    </div>
    <div class="CodeDesc code">
      <red-star />
      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" @submit="changeCodeinfo" />
    </div>
    <div class="title_item">
      <i class="el-icon-top icon" @click="move('up')" />
      <i class="el-icon-bottom icon" @click="move('down')" />
      <i class="el-icon-delete icon" @click="remove" />
    </div>
  </div>
</template>

<script>

import InputVue from '../input/inputVue.vue'
import redStar from '../redStar.vue'

export default {
  components: { redStar, InputVue },
  model: {
    prop: 'codeInfo',
    event: 'changeCodeInfo'
  },
  props: {
    checked: {
      type: Boolean
    },
    codeInfo: {},
    codeList: []
  },
  data() {
    return {
      itemInfo: {
        digitItemIllustration: 1
      }
    }
  },
  watch: {
    // itemInfo:{
    //   handler(vls){
    //     console.log(vls,"=========itemInfo===========");
    //     // this.$emit('changeCodeInfo',vls)
    //   },
    //   deep:true
    // },
    codeInfo: {
      handler(vls) {
        this.itemInfo = { ...vls }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {

    // 移动
    move(str) {
    //  console.log('submitCode');
    //  this.$emit('submitCode')
      if (str == 'up') {
        this.changeCodeinfo()
        this.$emit('upmove', str)
      } else {
        this.changeCodeinfo()
        this.$emit('downmove', str)
      }
    },

    remove() {
      this.$emit('remove')
    },
    changeCodeinfo() {
      // console.log(JSON.stringify(this.itemInfo));
      this.$emit('changeCodeInfo', this.itemInfo)
    }
  }
}

</script>

<style lang="scss" scoped>
.title_item {
  .icon {
    width: 40px;
    height: 40px;
    color: skyblue;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
  }
}

.box {
  display: flex;

  .code {
    display: flex;
    align-items: center;
  }
}
</style>