<template>
  <div class="box">
    <div class="frontCode code" v-if="checked">
      <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-option>
        </el-select>
      </input-vue>
    </div>
    <div class="middleCode code">
      <red-star />
      <input-vue title="编码项" width="100px" v-model="itemInfo.digitItem" @submit="changeCodeinfo" />
    </div>
    <div class="CodeDesc code">
      <red-star />
      <input-vue title="编码说明" width="100px" v-model="itemInfo.digitItemIllustration" @submit="changeCodeinfo">
      </input-vue>
    </div>
    <div class="title_item">
      <i class="el-icon-top icon" @click="move('up')"></i>
      <i class="el-icon-bottom icon" @click="move('down')"></i>
      <i class="el-icon-delete icon" @click="remove"></i>
    </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
      }
    }
  },
  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)
    }
  },
  watch: {
    // itemInfo:{
    //   handler(vls){
    //     console.log(vls,"=========itemInfo===========");
    //     // this.$emit('changeCodeInfo',vls)
    //   },
    //   deep:true
    // },
    codeInfo: {
      handler (vls) {
        this.itemInfo = { ...vls }
      },
      deep: true,
      immediate: true
    }
  }
}

</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>