<!--SN码规则新增弹窗内置组件2-->
<template>
  <div class="box">
    <div v-show="checked" class="frontCode code">
      <input-vue title="前项编码" :red-star="true">
        <el-select
          v-model="itemInfo.digitPre"
          filterable
          placeholder="请选择"
          style="width: 100px"
          size="small"
          @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">
      <input-vue v-model="itemInfo.digitItem" title="编码项" width="100px" size="small" :red-star="true" @submit="changeCodeinfo" />
    </div>
    <div class="CodeDesc code">
      <input-vue v-model="itemInfo.digitItemIllustration" title="编码说明" width="100px" size="small" :red-star="true" @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,
      default: false
    }, // 是否选中前置编码项
    codeInfo: {
      type: Object,
      required: true
    }, // 编码项
    codeList: {
      type: Array,
      default: () => []
    } // 前项编码列表
  },
  data() {
    return {
      itemInfo: {
        digitItem: '',
        digitPre: '',
        digitItemIllustration: ''
      }
    }
  },
  watch: {
    codeInfo: {
      handler(vls) {
        this.itemInfo = { ...vls }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    // 移动
    move(str) {
      if (str === 'up') {
        this.changeCodeinfo()
        this.$emit('upmove', str)
      } else {
        this.changeCodeinfo()
        this.$emit('downmove', str)
      }
    },

    remove() {
      this.$emit('remove')
    },
    changeCodeinfo() {
      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>