<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <span>项目名称:</span>
        <el-select
          v-model="entryNameValue"
          :remote-method="remoteMethod"
          placeholder="项目名称"
          style="margin-right: 10px"
          size="small"
          clearable
          filterable
          remote
          @change="projectChange"
          @focus="projectInit">
          <el-option
            v-for="item in entryName"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>机床图号:</span>
        <el-select v-model="machineNameValue" placeholder="机床号" style="margin-right: 10px" size="small" clearable @change="machineChange">
          <el-option
            v-for="item in machineName"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 15px" @click="total1=0;pageSize1 = 10;pageCurrent1 = 1;searchData1()">查询</el-button>
      </el-row>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table
        v-loading="listLoading2"
        :data="tableData2"
        style="width: 100%;max-height: 400px;"
        size="mini"
        height="300"
        highlight-current-row
        border
        @row-click="searchSpareParts">
        <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>
      <div class="block" style="margin-top: 10px">
        <el-pagination
          :current-page="pageCurrent1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize1"
          :total="total1"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"/>
      </div>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-row>
        <span>组号:</span>
        <el-select v-model="GroupNumValue" placeholder="组号" style="margin-right: 10px" size="small" clearable>
          <el-option
            v-for="item in GroupNum"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>零件图号:</span>
        <el-input v-model="PartDrawingNumber" placeholder="零件图号" size="small" clearable style="width:200px"/>
        <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 15px" @click="total=0;pageSize = 10;pageCurrent = 1;searchData()">查询</el-button>
      </el-row>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        style="width: 100%;max-height: 400px;"
        size="mini"
        height="300"
        highlight-current-row
        border
        @row-click="searchProcedure">
        <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="加工工时">
          <template slot-scope="scope">
            {{ scope.row.加工工时 }}
          </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="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table
        v-loading="listLoading1"
        :data="tableData1"
        style="width: 100%;max-height: 400px;"
        size="mini"
        height="300"
        highlight-current-row
        border>
        <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="150">
          <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="150">
          <template slot-scope="scope">
            {{ scope.row.单件定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="准结定额工时" width="130">
          <template slot-scope="scope">
            {{ scope.row.准结定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺是否完成" width="130">
          <template slot-scope="scope">
            {{ scope.row.工序状态 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工时" width="80">
          <template slot-scope="scope">
            {{ scope.row.工序工时 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { initProject, searchMachine, searchGroupNum, searchTable, searchTable1, searchTable2 } from '@/api/ManufacturingCenter/DiscardedPartsInquiry'
export default {
  data() {
    return {
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      pageCurrent1: 1,
      pageSize1: 10,
      total1: 0,
      list: [],
      check3: '',
      PartDrawingNumber: '',
      remoteLoading: false,
      listLoading: false,
      listLoading1: false,
      listLoading2: false,
      entryName: [],
      check: '',
      entryNameValue: '', // 项目名称
      entryValue: '', // 项目流水号
      machineName: [],
      check1: '',
      machineNameValue: '', // 机床图号
      machineValue: '', // 机床图号
      GroupNum: [],
      check2: '',
      GroupNumValue: '', // 组号
      tableData: [],
      tableData1: [],
      tableData2: []
    }
  },
  created() {
    this.projectInit()
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.list = []
      initProject().then(response => { // 初始化项目名称
        for (let i = 0; i < response.data.length; i++) {
          this.list.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        setTimeout(() => {
          this.entryName = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 1000)
      } else {
        this.entryName = []
      }
    },
    projectInit() { // 初始化项目
      this.entryName = []
      initProject().then(response => { // 初始化项目名称
        for (let i = 0; i < response.data.length; i++) {
          this.entryName.push({
            label: response.data[i].项目名称,
            value: response.data[i].项目流水号
          })
        }
      })
    },
    projectChange() {
      this.machineName = []
      this.machineNameValue = ''
      this.GroupNum = []
      this.GroupNumValue = ''
      searchMachine(this.entryNameValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineName.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    machineChange() {
      this.GroupNum = []
      this.GroupNumValue = ''
      searchGroupNum(this.machineNameValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.GroupNum.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    searchData1() {
      if (this.entryNameValue !== '' && this.entryNameValue !== null) {
        this.listLoading2 = true
        if (this.entryNameValue !== '' && this.entryNameValue !== null) {
          this.check = 1
        } else {
          this.check = 0
        }
        if (this.machineNameValue !== '' && this.machineNameValue !== null) {
          this.check1 = 1
        } else {
          this.check1 = 0
        }
        searchTable2(this.check, this.entryNameValue, this.check1, this.machineNameValue, this.pageCurrent1, this.pageSize1).then(response => {
          console.log(response)
          this.tableData2 = response.data.rows
          this.total1 = response.data.total
          this.listLoading2 = false
        })
      } else {
        this.$message.warning('请选择项目')
      }
    },
    handleSizeChange1(val) {
      this.pageSize1 = val
      this.pageCurrent1 = 1
      this.searchData1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchData1()
    },
    searchSpareParts(row) {
      this.tableData1 = []
      this.machineValue = row.机床流水号
      this.initGroup()
    },
    initGroup() {
      this.GroupNum = []
      this.GroupNumValue = ''
      searchGroupNum(this.machineValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.GroupNum.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
      this.searchData()
    },
    searchData() {
      this.listLoading = true
      this.tableData1 = []
      if (this.GroupNumValue !== '' && this.GroupNumValue !== null) {
        this.check2 = 1
      } else {
        this.check2 = 0
      }
      if (this.PartDrawingNumber !== '' && this.PartDrawingNumber !== null) {
        this.check3 = 1
      } else {
        this.check3 = 0
      }
      searchTable(this.entryNameValue, this.machineValue, this.check2, this.GroupNumValue, this.check3, this.PartDrawingNumber, this.pageCurrent, this.pageSize).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData()
    },
    searchProcedure(row) {
      this.listLoading1 = true
      searchTable1(row.工艺计划流水号).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].工序状态 === 4) {
            response.data[i].工序状态 = '完成'
          } else {
            response.data[i].工序状态 = '未完成'
          }
        }
        this.tableData1 = response.data
        this.listLoading1 = false
      })
    }
  }
}
</script>

<style scoped>

</style>
