<template>
  <div class="match-body">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane
        label="匹配产品"
        name="product"
        v-if="defaultNum == '3' || defaultNum == '6'"
      >
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns_product"
          :datasource="productData"
          :needPage="false"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="clickAdd('4', '选择产品')"
              >添加</el-button
            >
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              :title="`确认删除[${row.name}]吗?`"
              @confirm="handleDelete($index, row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane
        label="匹配模具"
        name="mould"
        v-if="defaultNum == '1' || defaultNum == '4'"
      >
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns_mould"
          :datasource="mouldData"
          :needPage="false"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="clickAdd('6', '选择模具')"
              >添加</el-button
            >
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              :title="`确认删除[${row.name}]吗?`"
              @confirm="handleDelete($index, row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="匹配备品备件" name="part" v-if="defaultNum == '1'">
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns_part"
          :datasource="partData"
          :needPage="false"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="clickAdd('7', '选择备品备件')"
              >添加</el-button
            >
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              :title="`确认删除[${row.name}]吗?`"
              @confirm="handleDelete($index, row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="BOM表" name="bom" v-if="defaultNum == '4'">
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns_bom"
          :datasource="bomData"
          :needPage="false"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <div class="bom-top">
              <el-button type="primary" @click="clickAdd('3', '选择物料')"
                >添加</el-button
              >
              <div class="top-input">
                <span>基本数量</span>
                <el-input
                  class="input-box"
                  @input="handleEdit"
                  v-model="itemForm.basicNum"
                  placeholder="请输入"
                ></el-input>
                <span>{{ itemForm.measuringUnit }}</span>
              </div>
            </div>
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              :title="`确认删除[${row.name}]吗?`"
              @confirm="handleDelete($index, row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
          <!-- 操作列 -->
          <template v-slot:num="{ row, $index }">
            <el-input
              type="number"
              v-model="row.num"
              placeholder="请输入"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane
        label="匹配设备"
        name="facility"
        v-if="defaultNum == '6' || defaultNum == '7'"
      >
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :columns="columns_facility"
          :datasource="facilityData"
          :needPage="false"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="clickAdd('1', '选择设备')"
              >添加</el-button
            >
          </template>

          <!-- 操作列 -->
          <template v-slot:action="{ row, $index }">
            <el-popconfirm
              class="ele-action"
              :title="`确认删除[${row.name}]吗?`"
              @confirm="handleDelete($index, row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 选择添加 -->
    <AddDialog
      ref="addDialogRef"
      @submit="selectedEquipment"
      :typeValue="typeValue"
      :dialogTitle="dialogTitle"
      :mapList="mapList"
    />
  </div>
</template>

<script>
  import matchMixins from './match-mixins';
  import AddDialog from './AddDialog.vue';
  export default {
    components: { AddDialog },
    props: {
      defaultNum: String,
      typeList: {
        type: Array,
        default: () => []
      }
    },
    mixins: [matchMixins],
    data () {
      return {
        activeName: 'mould',
        typeValue: '',
        productData: [],
        mouldData: [],
        partData: [],
        bomData: [],
        facilityData: [],
        dialogTitle: '',
        mapList: []
      };
    },
    methods: {
      getMapList () {
        return this.mapList;
      },
      setDefault (val) {
        switch (val) {
          case '3': {
            this.activeName = 'product';
            break;
          }
          case '1': {
            this.activeName = 'mould';
            break;
          }
          case '4': {
            this.activeName = 'mould';
            break;
          }
          case '6': {
            this.activeName = 'product';
            break;
          }
          case '7': {
            this.activeName = 'facility';
            break;
          }
          default:
            break;
        }
      },
      matchList (key, data) {
        switch (key) {
          case '1': {
            this.facilityData = data[key];
            break;
          }
          case '6': {
            this.mouldData = data[key];
            break;
          }
          case '7': {
            this.partData = data[key];
            break;
          }
          case '4': {
            this.productData = data[key];
            break;
          }
          case '3': {
            this.bomData = data[key];
            break;
          }
          default:
            break;
        }
      },
      //点击添加打开弹窗
      clickAdd (val, name) {
        this.$refs.addDialogRef.equipmentdialog = true;
        if (val) {
          this.typeValue = val;
          this.dialogTitle = name;
          this.mapAddList();
        }
      },
      mapAddList () {
        this.mapList = [];
        if (this.defaultNum == '1') {
          this.mapList = this.partData.concat(this.mouldData);
        } else if (this.defaultNum == '6') {
          this.mapList = this.facilityData.concat(this.productData);
        } else if (this.defaultNum == '7') {
          this.mapList = this.facilityData;
        } else if (this.defaultNum == '3') {
          this.mapList = this.productData;
        } else if (this.defaultNum == '4') {
          this.mapList = this.mouldData.concat(this.bomData);
        }
      },
      handleDelete (index, row) {
        switch (this.activeName) {
          case 'product': {
            this.productData.splice(index, 1);
            break;
          }
          case 'mould': {
            this.mouldData.splice(index, 1);
            break;
          }
          case 'part': {
            this.partData.splice(index, 1);
            break;
          }
          case 'bom': {
            this.bomData.splice(index, 1);
            break;
          }
          case 'facility': {
            this.facilityData.splice(index, 1);
            break;
          }
          default:
            break;
        }
        this.mapAddList();
      },
      // 选择的设备
      selectedEquipment (val) {
        switch (this.activeName) {
          case 'product': {
            this.productData = val;
            break;
          }
          case 'mould': {
            this.mouldData = val;
            break;
          }
          case 'part': {
            this.partData = val;
            break;
          }
          case 'bom': {
            this.bomData = val;
            break;
          }
          case 'facility': {
            this.facilityData = val;
            break;
          }
          default:
            break;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .match-body {
    :deep(.el-tabs__header) {
      margin: 0 0 15px;
    }
  }
</style>
