<template>
  <span>
    <el-form-item label="物料类型">
      <el-select v-model="_itemType" placeholder="请选择物料类型" clearable>
        <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="物料信息">
      <ProductSelect v-if="_itemType === 'product'" v-model="_itemId" placeholder="请选择产品" @change="onItemChange" />
      <SemiSelect v-else-if="_itemType === 'semi'" v-model="_itemId" placeholder="请选择半成品" @change="onItemChange" />
      <RawMaterialSelect v-else-if="_itemType === 'raw_material'" v-model="_itemId" placeholder="请选择原材料" @change="onItemChange" />
      <el-input v-else disabled v-model="_itemId" placeholder="请先选择物料类型" :disabled="true" style="width: 100%;" />
    </el-form-item>
  </span>
</template>

<script>
  import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
  import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
  import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';

  export default {
    components: {
      ProductSelect,
      SemiSelect,
      RawMaterialSelect
    },
    dicts: ['stock_item_type'],
    props: {
      itemType: {
        type: String,
        require: true
      },
      itemId: {
        type: String,
        require: true
      }
    },
    // 计算属性劫持双向绑定的数据
    computed: {
      _itemType: {
        get() {
          return this.itemType;
        },
        set(val) {
          this.$emit('update:itemType', val);
        }
      },
      _itemId: {
        get() {
          return this.itemId;
        },
        set(val) {
          this.$emit('update:itemId', val);
        }
      }
    },
    methods: {
      onItemChange(val) {
        this.$emit('change', this._itemType, val);
      }
    }
  }
</script>