<template>
  <div class="app-container">
    <el-card>
      <el-date-picker
        v-model="startTime"
        size="small"
        type="daterange"
        align="center"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="～"
        style="width:250px;margin-left: 5px;margin-top: 10px;margin-bottom: 10px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"/>
      <el-button size="small" type="primary" icon="el-icon-search" style="margin-left: 5px" plain @click="pageCurrent=1;pageSize=50;searchTable()">查询</el-button>
      <el-button size="small" type="primary" icon="el-icon-download" plain @click="exportExcel">导出</el-button>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="tableData" size="mini" style="max-height: 720px" height="720px" border @sort-change="sortChange">
        <el-table-column align="center" label="姓名" width="80px" sortable="custom" prop="姓名">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="图号" width="150px">
          <template slot-scope="scope">
            {{ scope.row.零件图号_零件工艺计划 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="跟单号" width="120px">
          <template slot-scope="scope">
            {{ scope.row.跟单号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序" width="50px">
          <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="110px">
          <template slot-scope="scope">
            {{ scope.row.修补准结工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="加工工时(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.设备工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="扫码工时(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.扫码工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="辅助工时(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.辅助工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工时比值" width="100px">
          <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="110px" sortable="custom" prop="操作时间">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" width="200px" show-overflow-tooltip="">
          <template slot-scope="scope">
            {{ scope.row.备注 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划准结(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.准结定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划定额(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.单件定额工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="计划工时(分)" width="110px">
          <template slot-scope="scope">
            {{ scope.row.计划工时 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目名称" width="130px">
          <template slot-scope="scope">
            {{ scope.row.项目名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="机床图号" width="100px">
          <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="70px">
          <template slot-scope="scope">
            {{ scope.row.设计者 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="材料" width="150px">
          <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 { searchTable } from '@/api/ManufacturingCenter/MonthEndHourAccounting'
export default {
  data() {
    return {
      orderName: 0,
      order: 0,
      startTime: '',
      tableData: [],
      loading: false,
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  methods: {
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('请查询出要导出的数据')
        return
      }
      var param = []
      param[0] = ['开始时间', this.startTime[0]]
      param[1] = ['结束时间', this.startTime[1]]
      param[2] = ['排序名称', this.orderName]
      param[3] = ['排序方式', this.order]
      var Data = this.CreateData('2001', '报表_工艺月底工时核算_查询数据', param)
      this.exportExcel_NPOI(Data)
    },
    sortChange(column, prop, order) {
      if (column.prop === '姓名') {
        this.orderName = 1
      } else if (column.prop === '操作时间') { this.orderName = 2 } else {
        this.orderName = 2
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') { this.order = 2 } else {
        this.order = 0
      }
      this.searchTable()
    },
    searchTable() {
      if (this.startTime[0] && this.startTime[1]) {
        this.loading = true
        searchTable(this.startTime[0], this.startTime[1], this.orderName, this.order, this.pageCurrent, this.pageSize).then(response => {
          response.data.rows.map(v => {
            this.$set(v, '工时比值', parseInt(v.计划工时) === 0 ? 0 : (Math.round(parseInt(v.扫码工时) / parseInt(v.计划工时) * 100) / 100.00))
          })
          this.tableData = response.data.rows
          console.log(this.tableData)
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.$message.warning('请选择时间段')
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>
