<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-select v-model="machineNameValue" placeholder="机床图号" style="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-date-picker
          v-model="outTime"
          type="daterange"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="~"
          style="width:240px;margin-left: 10px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
        <el-button type="primary" icon="el-icon-search" size="small" plain style="margin-left: 10px" @click="total=0;pageSize = 20;pageCurrent = 1;searchData1()">查询</el-button>
        <el-button v-positive="'loading'" :disabled="false" type="success" icon="el-icon-download" size="small" plain style="margin-left: 10px" @click="exportExcel()">导出</el-button>
      </el-row>
    </el-card>
    <el-card style="margin-top: 15px">
      <el-table v-loading="listLoading" :data="tableData" style="width: 100%" stripe size="small" height="590" highlight-current-row border>
        <el-table-column align="center" label="机床图号" width="80px" show-overflow-tooltip fixed>
          <template slot-scope="scope">
            {{ scope.row.机床图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="组号" width="50px" fixed>
          <template slot-scope="scope">
            {{ scope.row.组号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件图号" width="140px" show-overflow-tooltip fixed>
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称" width="100px" show-overflow-tooltip fixed>
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废数" width="70px">
          <template slot-scope="scope">
            {{ scope.row.报废数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废时间" width="85px">
          <template slot-scope="scope">
            {{ scope.row.报废时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废人" width="80px">
          <template slot-scope="scope">
            {{ scope.row.报废人 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废工序" width="80px">
          <template slot-scope="scope">
            {{ scope.row.工艺名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废原因" width="80px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.报废原因 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作工人" width="80px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.操作工 === '超级管理员' ? '' : scope.row.操作工 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废备注" width="100px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="质检员" width="85px">
          <template slot-scope="scope">
            {{ scope.row.质检人 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="报废工时(分)" width="80px">
          <template slot-scope="scope">
            {{ scope.row.报废工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="补投时间" width="85px">
          <template slot-scope="scope">
            {{ scope.row.补投时间 ? scope.row.补投时间.split(' ')[0] : '' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="补投人" width="80px">
          <template slot-scope="scope">
            {{ scope.row.补投人 }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80px">
          <template slot-scope="scope">
            <el-button type="text" plain size="small" @click="fetchTableData2(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, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" title="离线合同请款" center style="min-height: 300px" width="1000px">
      <el-table :data="tableData2" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(226,223,223,1)" height="630" border style="width: 430px">
        <el-table-column
          width="50px"
          prop="province1"
          label="顺序"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.工序顺序 }}</template>
        </el-table-column>
        <el-table-column
          width="80px"
          prop="province2"
          label="工艺名称"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.工艺名称 }}</template>
        </el-table-column>
        <el-table-column
          prop="province4"
          label="工艺要求"
          align="center"
          width="80px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.工艺要求 }}</template>
        </el-table-column>
        <el-table-column
          width="60px"
          prop="province5"
          label="单件定额"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.单件定额工时 }}</template>
        </el-table-column>
        <el-table-column
          width="60px"
          prop="province6"
          label="准结定额"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.准结定额工时 }}</template>
        </el-table-column>
        <el-table-column
          width="77px"
          prop="province7"
          label="完成状态"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.工序状态 === 4"><div style="width: 12px;height: 12px;border-radius: 50%;background-color: rgb(103, 194, 58);display: inline-block;margin:0px 5px 0 0"/>完成</div>
            <div v-else ><div style="width: 12px;height: 12px;border-radius: 50%;background-color: red;display: inline-block;margin:0px 5px 0 0"/>未完</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { searchMachine, searchTable1, searchTable2, TableDta2Select } from '@/api/ManufacturingCenter/DiscardedPartsInquiry'
export default {
  data() {
    return {
      dialogVisible: false,
      pageCurrent: 1,
      pageSize: 20,
      total: 0,
      list: [],
      check3: '',
      outTime: '',
      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.searchData1()
    },
    searchData1() {
      this.listLoading = true
      if (this.machineNameValue !== '' && this.machineNameValue !== null) {
        this.check1 = 1
      } else {
        this.check1 = 0
      }
      let check7
      this.outTime ? check7 = 1 : (check7 = 0, this.outTime = '')
      searchTable2(this.check1, this.machineNameValue, check7, this.outTime[0], this.outTime[1], this.pageCurrent, this.pageSize).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },
    fetchTableData2(row) {
      TableDta2Select(row.补投流水号).then(response => {
        this.tableData2 = response.data
        this.dialogVisible = true
      })
    },
    exportExcel() {
      if (this.tableData.length !== 0) {
        if (this.machineNameValue !== '' && this.machineNameValue !== null) {
          this.check1 = 1
        } else {
          this.check1 = 0
        }
        let check7
        this.outTime ? check7 = 1 : (check7 = 0, this.outTime = '')
        var param = []
        param[0] = ['机床流水号_check', this.check1]
        param[1] = ['机床流水号', this.machineNameValue]
        param[2] = ['报废日期_check', check7]
        if (check7 === 0) {
          param[3] = ['开始时间', '']
          param[4] = ['结束时间', '']
        } else {
          param[3] = ['开始时间', this.outTime[0]]
          param[4] = ['结束时间', this.outTime[1]]
        }
        var Data = this.CreateData('2001', '报表_报废零件查询', param)
        this.exportExcel_NPOI(Data)
      } else {
        this.$message.warning('暂无数据')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchData1()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchData1()
    },
    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>
