<template>
  <div class="app-container">
    <el-card style="width: 585px;">
      <el-date-picker
        v-model="startTime"
        value-format="yyyy-MM-dd"
        size="small"
        style="width: 170px;margin:0px 10px"
        type="date"
        placeholder="选择开始日期"/>
      <span class="demonstration">~</span>
      <el-date-picker
        v-model="endTime"
        value-format="yyyy-MM-dd"
        size="small"
        style="width: 170px;margin:0px 10px"
        type="date"
        placeholder="选择结束日期"/>
      <el-button type="success" class="el-icon-search" size="small" @click="searchTable();">查询</el-button>
      <el-tooltip :open-delay="1000" content="导出人员工时统计表" placement="right">
        <el-button type="primary" size="small" icon="el-icon-download" @click="exportTable()">导出</el-button>
      </el-tooltip>
    </el-card>
    <el-card style="width: 585px">
      <el-table v-loading="loading" :data="tableData" size="mini" stripe style="width: 585px" height="650px" border element-loading-text="拼命加载中">
        <el-table-column label="操作者" align="center" width="110px">
          <template slot-scope="scope">
            {{ scope.row.姓名 }}
          </template>
        </el-table-column>
        <el-table-column label="计划工时" align="center">
          <template slot-scope="scope">
            {{ scope.row.理论加工时间段 }}
          </template>
        </el-table-column>
        <el-table-column label="加工工时" align="center">
          <template slot-scope="scope">
            {{ scope.row.实际加工时间段 }}
          </template>
        </el-table-column>
        <el-table-column label="比例" align="center">
          <template slot-scope="scope">
            {{ scope.row.比例 }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div v-show="false">
      <el-card>
        <el-date-picker
          v-model="startTime2"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 170px;margin:0px 10px"
          type="date"
          placeholder="选择开始日期"/>
        <span class="demonstration">~</span>
        <el-date-picker
          v-model="endTime2"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 170px;margin:0px 10px"
          type="date"
          placeholder="选择结束日期"/>
        <el-button type="success" class="el-icon-search" size="small" style="margin:0px 10px" @click="searchTable2();">查询</el-button>
      </el-card>
      <el-card>
        <el-table v-loading="loading2" :data="tableData2" height="380" size="mini" stripe style="width: 100%;" border element-loading-text="拼命加载中">
          <el-table-column label="姓名" align="center" width="110px">
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column label="零件图号" align="center">
            <template slot-scope="scope">
              {{ scope.row.零件图号 }}
            </template>
          </el-table-column>
          <el-table-column label="零件名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.零件名称 }}
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              {{ scope.row.工序顺序 }}
            </template>
          </el-table-column>
          <el-table-column label="工序名" align="center">
            <template slot-scope="scope">
              {{ scope.row.工艺名称 }}
            </template>
          </el-table-column>
          <el-table-column label="准备工时" align="center">
            <template slot-scope="scope">
              {{ scope.row.准结定额工时 }}
            </template>
          </el-table-column>
          <el-table-column label="定额工时" align="center">
            <template slot-scope="scope">
              {{ scope.row.单件定额工时 }}
            </template>
          </el-table-column>
          <el-table-column label="序间质检" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论加工时间段 }}
            </template>
          </el-table-column>
          <el-table-column label="不合格数" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论加工时间段 }}
            </template>
          </el-table-column>
          <el-table-column label="日期" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论加工时间段 }}
            </template>
          </el-table-column>
          <el-table-column label="计划准备" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论加工时间段 }}
            </template>
          </el-table-column>
          <el-table-column label="计划工时" align="center">
            <template slot-scope="scope">
              {{ scope.row.理论加工时间段 }}
            </template>
          </el-table-column>
          <el-table-column label="工时调整说明" align="center">
            <template slot-scope="scope">
              {{ scope.row.实际加工时间段 }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
import { searchtable, searchTable2 } from '@/api/ManufacturingCenter/ManHourStatistics'

export default {
  data() {
    return {
      workerName: '',
      startTime: '',
      endTime: '',
      loading: false,
      tableData: [], // 表格数据
      startTime2: '',
      endTime2: '',
      loading2: false,
      tableData2: [] // 表格数据
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    // 查询表格数据
    searchTable() {
      this.loading = true
      this.tableData = []
      if (this.startTime && this.endTime) {
        this.timeCheck = 1
      } else {
        this.startTime = ''
        this.endTime = ''
        this.timeCheck = 0
      }
      if (this.workerName) {
        this.workerName_ckeck = 1
      } else {
        this.workerName_ckeck = 0
      }
      searchtable(this.workerName_ckeck, this.workerName, this.timeCheck, this.startTime, this.endTime).then(response => {
        response.data.map(v => {
          this.$set(v, '比例', v.理论加工时间段 === 0 ? 0 : Math.round(v.实际加工时间段 / v.理论加工时间段 * 100) / 100.00)
        })
        this.tableData = response.data
        this.loading = false
      })
    },
    // 导出
    exportTable() {
      import('./Export2Excel').then(excel => {
        const filterVal1 = ['姓名', '理论加工时间段', '实际加工时间段', '比例']
        const data1 = this.tableData.map(v => filterVal1.map(j => v[j]))
        const dataGroup = []
        dataGroup.push(data1)
        const headerGroup = [['操作者', '计划工时', '加工工时', '比例']]
        const sheetGroup = ['工时统计表']
        excel.export_json_to_excel({
          headerGroup: headerGroup,
          dataGroup: dataGroup,
          sheetGroup: sheetGroup,
          filename: '工时统计表',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    searchTable2() {
      this.loading2 = true
      this.tableData2 = []
      this.total2 = 0
      if (this.startTime && this.endTime) {
        this.timeCheck = 1
      } else {
        this.startTime = ''
        this.endTime = ''
        this.timeCheck = 0
      }
      if (this.workerName) {
        this.workerName_ckeck = 1
      } else {
        this.workerName_ckeck = 0
      }
      searchTable2(this.workerName_ckeck, this.workerName, this.timeCheck, this.startTime, this.endTime, this.pageCurrent, this.pageSize).then(response => {
        console.log(response.data)
        this.total2 = response.data.length
        this.tableData2 = response.data
        this.loading2 = false
      })
    }
  }
}
</script>

<style scoped>
</style>
