<template>
  <div class="app-container">
    <el-card>
      <el-select v-model="projectValue" filterable clearable size="small" style="margin-right:10px;width: 150px" placeholder="项目名称" @change="typeChange">
        <el-option
          v-for="item in project"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-select v-model="machineValue" clearable filterable size="small" style="margin-right:10px;width: 150px" placeholder="机床名称">
        <el-option
          v-for="item in machine"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" style="margin: 0 0 0 10px" plain @click="searchTable()">查询</el-button>
      <el-button v-positive="'loading'" :disabled="false" size="small" type="success" icon="el-icon-download" style="margin: 0 0 0 10px" plain @click="exportExcel()">导出</el-button>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="tableData" highlight-current-row show-summary border style="width: 1510px;" size="mini" height="700">
        <el-table-column label="跟单号" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.跟单号 }}
          </template>
        </el-table-column>
        <el-table-column label="图号及规格" align="center" width="140">
          <template slot-scope="scope">
            {{ scope.row.图号及规格 }}
          </template>
        </el-table-column>
        <el-table-column label="制品名称" align="center" width="130">
          <template slot-scope="scope">
            {{ scope.row.制品名称 }}
          </template>
        </el-table-column>
        <el-table-column label="工序" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.row.序号 }}
          </template>
        </el-table-column>
        <el-table-column label="工序名" align="center" width="70">
          <template slot-scope="scope">
            {{ scope.row.工序名 }}
          </template>
        </el-table-column>
        <el-table-column label="投产数" align="center" prop="计划数量" width="70">
          <template slot-scope="scope">
            {{ scope.row.计划数量 }}
          </template>
        </el-table-column>
        <el-table-column label="计划准结(分)" align="center" prop="计划准备工时" width="70">
          <template slot-scope="scope">
            {{ scope.row.计划准备工时 ? scope.row.计划准备工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="单件定额(分)" align="center" width="70">
          <template slot-scope="scope">
            {{ scope.row.单件计划工时 ? scope.row.单件计划工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="计划工时(分)" align="center" prop="计划工时" width="70">
          <template slot-scope="scope">
            {{ scope.row.计划工时 ? scope.row.计划工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="计划完成" align="center" width="85">
          <template slot-scope="scope">
            {{ scope.row.计划加工日期 }}
          </template>
        </el-table-column>
        <el-table-column label="加工件数" align="center" prop="加工数量" width="60">
          <template slot-scope="scope">
            {{ scope.row.加工数量 }}
          </template>
        </el-table-column>
        <el-table-column label="单件加工工时(分)" align="center" prop="加工工时" width="80">
          <template slot-scope="scope">
            {{ scope.row.修补单件工时 ? scope.row.修补单件工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="加工工时(分)" align="center" prop="完成工时" width="80">
          <template slot-scope="scope">
            {{ scope.row.完成工时 ? scope.row.完成工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="完成工时(分)" align="center" prop="完成工时1" width="80">
          <template slot-scope="scope">
            {{ scope.row.完成工时1 ? scope.row.完成工时1 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="准结(分)" align="center" prop="修补工时" width="80">
          <template slot-scope="scope">
            {{ scope.row.修补工时 ? scope.row.修补工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="扫码工时(分)" align="center" prop="扫码工时" width="80">
          <template slot-scope="scope">
            {{ scope.row.扫码工时 ? scope.row.扫码工时 : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="工时比值" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.工时比值 }}
          </template>
        </el-table-column>
        <el-table-column label="加工完成" align="center" width="85">
          <template slot-scope="scope">
            {{ scope.row.加工完成时间 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[50, 100, 200, 300]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import { initProject, initMachine, searchatabledata } from '@/api/ManufacturingCenter/ContractDetailsInquiry'
export default {
  data() {
    return {
      project: [],
      projectValue: '', // 项目名称
      machineValue: '', // 机床名称
      machine: [],
      loading: false,
      part: [], // 分組
      partValue: '',
      specificationValue: '', // 规格型号
      totalProcessingHours: '', // 加工总工时
      totalPlannedHours: '', // 计划总工时
      tableData: [], // 详情表
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(initProject, ['项目名称', '项目流水号'], 'project')
    },
    // 查询按钮
    typeChange() {
      this.machineValue = ''
      this.machine = []
      initMachine(this.projectValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machine.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    // 分页查询
    searchTable() {
      this.tableData = []
      if (this.machineValue) {
        this.loading = true
        searchatabledata(this.projectValue, this.machineValue, this.pageCurrent, this.pageSize).then(response => {
          this.loading = false
          if (response.data.result.length !== 0) {
            for (let i = 0; i < response.data.result.length; i++) {
              this.tableData.push({
                跟单号: response.data.result[i].跟单号,
                序号: response.data.result[i].工序顺序,
                工序名: response.data.result[i].工艺名称,
                计划数量: response.data.result[i].批次数量,
                计划准备工时: response.data.result[i].准结定额工时,
                单件计划工时: response.data.result[i].单件定额工时,
                计划工时: response.data.result[i].计划工时,
                计划加工日期: response.data.result[i].计划日期 ? response.data.result[i].计划日期.split(' ')[0] : '-',
                加工数量: response.data.result[i].完成数量,
                加工准备工时: response.data.result[i].修补准结工时,
                加工工时: response.data.result[i].设备工时,
                扫码工时: response.data.result[i].扫码工时,
                辅助工时: response.data.result[i].辅助工时,
                工时比值: Number(response.data.result[i].计划工时) === 0 ? 0 : Math.round((response.data.result[i].完成工时 + response.data.result[i].修补工时) / Number(response.data.result[i].计划工时) * 100) / 100.00,
                加工日期: response.data.result[i].操作时间,
                图号及规格: response.data.result[i].零件图号_零件工艺计划,
                修补工时: response.data.result[i].修补工时,
                修补单件工时: response.data.result[i].修补单件工时,
                完成工时: response.data.result[i].完成工时,
                完成工时1: response.data.result[i].完成工时1,
                加工完成时间: response.data.result[i].加工完成时间,
                制品名称: response.data.result[i].零件名称
              })
            }
          }
          this.total = parseInt(response.data.output[0].ItemCount)
        })
      } else {
        this.$message.warning('请选择要查询的机床')
      }
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('请查询出要导出的数据')
        return
      }
      var param = []
      param[0] = ['项目流水号', this.projectValue]
      param[1] = ['机床流水号', this.machineValue]
      param[2] = ['PageCurrent', 1]
      param[3] = ['PageSize', 999999]
      param[4] = ['PageCount', '1111', 'int', '1']
      param[5] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('2001', '报表_机床工时统计_查询', param)
      this.exportExcel_NPOI(Data)
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>

</style>
