<template>
  <div class="ele-body">
    <BOMSearch @search="reload" :statusOpt="statusOpt" />
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      class="dict-table"
      tool-class="ele-toolbar-actions"
    >
      <template v-slot:toolbar>
        <div class="toolbar_box">
          <div class="toolbar_box_right"
            ><span>基本数量</span>
            <el-input
              placeholder="请输入"
              v-model.number="attributeData.baseCount"
            >
            </el-input>
            <DictSelection dictName="计量单位" v-model="attributeData.unit"
          /></div>
        </div>
      </template>

      <template v-slot:dosage="{ row }">
        <el-input
          v-model="row.dosage"
          placeholder="请输入"
          size="mini"
          style="width: 68px"
        >
        </el-input>
      </template>

      <template v-slot:versions="{ row }"> V{{ row.versions }}.0 </template>

      <template v-slot:produceType="{ row }">
        <el-select
          v-model="row.produceType"
          filterable
          multiple
          collapse-tags
          class="ele-block"
          size="mini"
        >
          <el-option
            v-for="item in dictList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </template>

      <template v-slot:materielDesignation="{ row }">
        <el-input
          v-model="row.materielDesignation"
          placeholder="请输入物料代号"
          size="mini"
          style="width: 120px"
        >
        </el-input>
      </template>

      <template v-slot:supplierId="{ row }">
        <el-select
          v-model="row.supplierId"
          size="mini"
          clearable
          class="ele-block"
          filterable
          placeholder="请选择供应商"
        >
          <el-option
            v-for="(item, index) in gysList"
            :key="item.id + index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </template>

      <template v-slot:factories="{ row }">
        <el-input
          v-model="row.factories"
          placeholder="请输入生产厂家"
          size="mini"
          style="width: 120px"
        >
        </el-input>
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
  import BOMSearch from './BOM-search.vue';
  import {
    getBomPageCategoryId,
    contactList,
    deleteBomTreeList,
    updateBatchBOM
  } from '@/api/material/BOM';
  import { getByCode } from '@/api/system/dictionary-data';

  export default {
    name: 'SystemDictionary',
    components: { BOMSearch },

    data() {
      return {
        // 表格列配置
        columns: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            width: 240,
            formatter: (row) => {
              return row.code + '/' + this.codes;
            }
          },
          /*  {
            prop: 'deviceCode',
            label: '部件编码',
            width: 120
          }, */
          {
            prop: 'name',
            label: '名称',
            width: 150
          },

          {
            prop: 'level',
            label: '层级'
          },

          {
            prop: 'brandNum',
            label: '牌号'
          },

          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'dosage',
            slot: 'dosage',
            label: '用量',
            width: 100
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true
          },

          {
            prop: 'produceType',
            slot: 'produceType',
            label: '生产类型',
            width: 160
          },

          {
            prop: 'materielDesignation',
            slot: 'materielDesignation',
            label: '物料代号',
            width: 150
          },

          {
            prop: 'supplierId',
            slot: 'supplierId',
            label: '供应商',
            width: 150
          },

          {
            prop: 'factories',
            slot: 'factories',
            label: '生产厂家',
            width: 180
          },

          {
            prop: 'versions',
            slot: 'versions',
            label: '版本'
          },

          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },

          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            width: 160
          }
        ],
        statusOpt: {
          '': '全部',
          0: '草稿',
          1: '已发布'
        },

        gysList: [],

        newTreeId: null,

        dictList: []
      };
    },

    created() {
      this.getDictList('productionType');

      this.getContactList();
    },
    mounted() {},
    props: {
      attributeData: {
        type: Object,
        default: {}
      },

      treeId: {
        type: String,
        default: ''
      },

      isTemp: {
        type: Number,
        default: 0
      },
      codes: {
        type: String,
        default: ''
      }
    },

    watch: {
      treeId: {
        handler(val) {
          this.newTreeId = val;
        },
        deep: true,
        immediate: true
      },

      attributeData: {
        handler(val) {
          this.$nextTick(() => {
            this.reload();
          });
        },
        deep: true,
        immediate: true
      }
    },

    methods: {
      /* 表格数据源 */
      datasource({ where, page, limit }) {
        return getBomPageCategoryId({
          ...where,
          pageNum: page,
          size: limit,
          id: this.attributeData.id,
          bomType: this.attributeData.bomType
        });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      getContactList() {
        let param = {
          pageNum: 1,
          type: 2,
          size: -1,
          status: 1
        };
        contactList(param).then((res) => {
          this.gysList = res.list;
          console.log(this.gysList, '供应商列表');
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;
    ::v-deep .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        .dict-table {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }

  .toolbar_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .toolbar_box_right {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      > span {
        width: 150px;
      }
      > div {
        margin-left: 10px;
      }
    }
  }
</style>
