<template>
  <div style="position: relative;">
    <!-- 录入二维码列表 -->
    <el-form inline style="position: relative;">
      <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 can-add v-if="itemType === 'product'" v-model="itemId" placeholder="请选择产品"
          @change="onItemChange" />
        <SemiSelect can-add v-else-if="itemType === 'semi'" v-model="itemId" placeholder="请选择半成品"
          @change="onItemChange" />
        <RawMaterialSelect can-add 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>
    </el-form>

    <div class="print-container" v-loading="loading">
      <BarCode :barcodes="drawerBarcodeData" @delete="handleDelete" />
    </div>
  </div>
</template>

<script>
import BarCode from '../stockIo/panels/barcode.vue';
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 {
  name: 'Print',
  components: { BarCode, ProductSelect, SemiSelect, RawMaterialSelect },
  dicts: ['stock_item_type'],
  data() {
    return {
      drawerBarcodeData: [], // 条码数据
      loading: false, // 加载状态
      itemId: undefined, // 物料ID
      itemType: undefined, // 物料类型
    };
  },
  methods: {
    onItemChange(item) {
      // 选中后构造条码数据并插入
      console.log(item);
      const itemType = this.itemType;
      const name = (itemType == 'semi' || itemType == 'product') ? item.productName : item.rawMaterialName;
      const code = (itemType == 'semi' || itemType == 'product') ? item.productCode : item.rawMaterialCode;
      const itemId = (itemType == 'semi' || itemType == 'product') ? item.productId : item.rawMaterialId;
      const o = {
        code: encodeURIComponent(`${itemType}__${itemId || ''}`),
        count: 1,
        textTpl: `${name}[${code}]`
      }
      this.drawerBarcodeData.push(o);
    },
    handleDelete(cfg, idx) {
      console.log(cfg, idx);
      this.drawerBarcodeData.splice(idx, 1);
    }
  }
};
</script>

<style scoped lang="scss">
</style>
