<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <!--<span>项目名称:</span>-->
        <!--<el-select-->
        <!--v-model="entryNameValue"-->
        <!--:remote-method="remoteMethod"-->
        <!--placeholder="项目名称"-->
        <!--style="margin-right: 10px; width: 150px"-->
        <!--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; width: 150px" size="small" filterable clearable @change="machineChange">
          <el-option
            v-for="item in machineName"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" plain style="margin-left: 15px" @click="total1=0;pageSize1 = 10000;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;"
        stripe
        size="mini"
        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;width: 150px" 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:150px"/>-->
    <!--        <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-row>
      <el-col style="width: 60%">
        <el-card style="margin-top: 15px">
          <el-table
            v-loading="listLoading"
            :data="tableData"
            style="width: 100%"
            stripe
            size="mini"
            height="460"
            highlight-current-row
            border
            @row-click="searchProcedure">
            <el-table-column align="center" label="组号" width="50px">
              <template slot-scope="scope">
                {{ scope.row.组号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件图号" min-width="100px">
              <template slot-scope="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称" min-width="70px">
              <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-col>
      <el-col style="width: 40%">
        <el-card style="margin-top: 15px">
          <el-table
            v-loading="listLoading1"
            :data="tableData1"
            style="width: 100%;"
            stripe
            size="mini"
            height="500px"
            highlight-current-row
            border>
            <el-table-column align="center" label="工序" width="50">
              <template slot-scope="scope">
                {{ scope.row.工序顺序 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工艺名称" min-width="70">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工艺要求" width="70">
              <template slot-scope="scope">
                {{ scope.row.工艺要求 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="单件定额" width="70">
              <template slot-scope="scope">
                {{ scope.row.单件定额工时 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="准结定额" width="70">
              <template slot-scope="scope">
                {{ scope.row.准结定额工时 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工序进度" width="70">
              <template slot-scope="scope">
                {{ scope.row.工序状态 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="完成工时" width="70">
              <template slot-scope="scope">
                {{ scope.row.工序工时 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { searchMachine, searchGroupNum, searchTable, searchTable1, searchTable2 } from '@/api/ManufacturingCenter/DiscardedPartsInquiry'
export default {
  data() {
    return {
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      pageCurrent1: 1,
      pageSize1: 1000000,
      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.projectChange()
  },
  methods: {
    projectChange() {
      this.machineName = []
      this.machineNameValue = ''
      this.GroupNum = []
      this.GroupNumValue = ''
      searchMachine().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() {
      this.listLoading2 = true
      if (this.machineNameValue !== '' && this.machineNameValue !== null) {
        this.check1 = 1
      } else {
        this.check1 = 0
      }
      searchTable2(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
      })
    },
    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 => {
        console.log(response.data)
        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>
.el-card{
  margin: 0px!important;
}
</style>
