<template>
  <div class="app-container">
    <el-card>
      <span>项目名称</span>
      <el-select v-model="projectValue" placeholder="请选择项目名称" filterable size="small">
        <el-option
          v-for="item in project"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>

      <span>机床图号</span>
      <el-select v-model="machineValue" placeholder="请选择机床图号" filterable size="small">
        <el-option
          v-for="item in machine"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>

      <span>组号</span>
      <el-select v-model="groupValue" placeholder="请选择组号" filterable size="small">
        <el-option
          v-for="item in group"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>

      <el-button icon="el-icon-search" type="success" size="small" @click="getTableData">查询</el-button>
    </el-card>
    <el-card v-if="groupName && groupName.indexOf('MX') > -1">
      <el-table
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
        style="width: 100%;max-height: 520px"
        height="520">
        <el-table-column
          label="机床图号"
          align="center"
          min-width="150px">
          <template slot-scope="scope">{{ scope.row.机床图号 }}</template>
        </el-table-column>
        <el-table-column
          label="零件图号"
          align="center"
          min-width="200px">
          <template slot-scope="scope">{{ scope.row.零件图号 }}</template>
        </el-table-column>
        <el-table-column
          label="零件名称"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.零件名称 }}</template>
        </el-table-column>
        <el-table-column
          label="组号"
          align="center"
          min-width="100px">
          <template slot-scope="scope">{{ scope.row.组号 }}</template>
        </el-table-column>
        <el-table-column
          label="需求数量"
          align="center">
          <template slot-scope="scope">{{ scope.row.零件数量 }}</template>
        </el-table-column>
        <el-table-column
          label="材料"
          align="center">
          <template slot-scope="scope">{{ scope.row.材料 }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
          align="center">
          <template slot-scope="scope">{{ scope.row.零件备注 }}</template>
        </el-table-column>
        <el-table-column
          label="零件类型"
          align="center">
          <template slot-scope="scope">{{ scope.row.零件类型名称 }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              disabled
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChanges"
          @current-change="handleCurrentChanges"/>
      </div>
    </el-card>
    <el-card v-else>
      <el-table
        v-loading="loadingWB"
        :data="tableDataWB"
        style="width: 100%;min-height: 600px;"
        height="600"
        highlight-current-row
        border>
        <el-table-column align="center" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料规格">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料型号">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件数量">
          <template slot-scope="scope">
            {{ scope.row.零件数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件类型">
          <template slot-scope="scope">
            {{ scope.row.零件类型 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="供货商">
          <template slot-scope="scope">
            {{ scope.row.供货商 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" width="100">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="标记" width="100">
          <template slot-scope="scope">
            {{ scope.row.标记 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              disabled
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px">
        <el-pagination
          :current-page="pageCurrentWB"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSizeWB"
          :total="totalWB"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChangeWB"
          @current-change="handleCurrentChangeWB"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import { projectSelect, machineSelect, groupSelect, basicPartsData, deleteBasicParts, purchasePartsData, deletePurchaseData } from '@/api/TechnologyCenter/QueryParts'
export default {
  name: 'Index',
  data() {
    return {
      projectValue: '',
      project: [],
      machineValue: '',
      machine: [],
      groupValue: '',
      group: [],
      loading: false,
      loadingWB: false,
      total: 0,
      tableData: [],
      tableDataWB: [],
      pageCurrent: 1,
      pageSize: 10,
      pageCurrentWB: 1,
      pageSizeWB: 10,
      totalWB: 0
    }
  },
  computed: {
    groupName() {
      for (let i = 0; i < this.group.length; i++) {
        if (this.group[i].value === this.groupValue) {
          return this.group[i].label
        }
      }
    }
  },
  watch: {
    project(val) {
      if (val.length > 0) {
        this.projectValue = val[1].value
      }
    },
    projectValue(val) {
      this.machineValue = ''
      this.machine = []
      this.groupValue = ''
      this.group = []
      if (val) {
        this.getMachineSelect(val)
      }
    },
    machine(val) {
      if (val.length > 0) {
        this.machineValue = val[0].value
      }
    },
    machineValue(val) {
      this.groupValue = ''
      this.group = []
      if (val) {
        this.getGroupSelect(val)
      }
    },
    group(val) {
      if (val.length > 0) {
        this.groupValue = val[0].value
      }
    },
    groupValue(val) {
      if (val) {
        this.getTableData()
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
    },
    getMachineSelect(val) {
      this.getSelect(machineSelect, ['机床图号', '机床流水号'], 'machine', val)
    },
    getGroupSelect(val) {
      this.getSelect(groupSelect, ['组号', '组件流水号'], 'group', val)
    },
    getTableData() {
      if (this.groupName.indexOf('MX') > -1) {
        const project_check = this.projectValue ? 1 : 0
        const machine_check = this.machineValue ? 1 : 0
        const group_check = this.groupValue ? 1 : 0
        this.loading = true
        basicPartsData(project_check, this.projectValue, machine_check, this.machineValue, group_check, this.groupValue, this.pageSize, this.pageCurrent).then(response => {
          this.loading = false
          const res = response.data
          this.tableData = res.rows
          this.total = res.total
        })
      } else {
        const type = this.groupName.indexOf('WG') > -1 ? 2 : 1
        this.loadingWB = true
        purchasePartsData(this.groupValue, type, this.pageCurrentWB, this.pageSizeWB).then(response => {
          this.loadingWB = false
          const data = response.data
          this.totalWB = data.total
          this.tableDataWB = data.rows.map(item => {
            console.log(item)
            item.零件类型 = item.零件类型 === '2' ? '外购件' : '标准件'
            return item
          })
        })
      }
    },
    handleDelete(row) {
      if (row.基本件流水号) {
        this.deleteRow(deleteBasicParts, row.基本件流水号, function() {
          this.getTableData()
        })
      } else {
        this.deleteRow(deletePurchaseData, row.标准件和外购件流水号, function() {
          this.getTableData()
        })
      }
    },
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.getTableData()
    },
    handleSizeChangeWB(val) {
      this.pageCurrentWB = 1
      this.pageSizeWB = val
      this.getTableData()
    },
    handleCurrentChangeWB(val) {
      this.pageCurrentWB = val
      this.getTableData()
    }
  }
}
</script>

<style scoped>
span{
  margin: 20px;
}
</style>
