<template>
  <div class="app-container">
    <el-card>
      <span>项目名称</span>
      <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>
      <span>机床名称</span>
      <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>
      <!--      <span>分组</span>-->
      <!--      <el-select v-model="partValue" clearable filterable size="small" style="margin-right:10px;width: 80px" placeholder="分组">-->
      <!--        <el-option-->
      <!--          v-for="item in part"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"/>-->
      <!--      </el-select>-->
      <!--      <span>规格及型号</span>-->
      <!--      <el-input v-model="specificationValue" clearable size="small" style="margin-right:10px;width: 150px" placeholder="规格型号"/>-->
      <!--<span>加工总工时（小时）:</span>-->
      <!--<el-input v-model="totalProcessingHours" clearable size="small" style="margin-right:10px;width: 100px"/>-->
      <!--<span>计划总工时（小时）:</span>-->
      <!--<el-input v-model="totalPlannedHours" clearable size="small" style="margin-right:10px;width: 100px"/>-->
      <el-button size="small" type="primary" icon="el-icon-search" style="margin: 0 0 0 10px" plain @click="searchTable()">查询</el-button>
      <el-button size="small" type="primary" 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="150">
          <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="90">
          <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" width="120">
          <template slot-scope="scope">
            {{ scope.row.计划准备工时 }}
          </template>
        </el-table-column>
        <el-table-column label="计划定额(分)" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.单件计划工时 }}
          </template>
        </el-table-column>
        <el-table-column label="计划工时(分)" align="center" prop="计划工时" width="100">
          <template slot-scope="scope">
            {{ scope.row.计划工时 }}
          </template>
        </el-table-column>
        <el-table-column label="计划加工日期" align="center" width="100">
          <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" width="120">
          <template slot-scope="scope">
            {{ scope.row.加工准备工时 }}
          </template>
        </el-table-column>
        <el-table-column label="加工工时(分)" align="center" prop="加工工时" width="100">
          <template slot-scope="scope">
            {{ scope.row.加工工时 }}
          </template>
        </el-table-column>
        <el-table-column label="加工日期" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.加工日期 }}
          </template>
        </el-table-column>
        <el-table-column label="图号及规格" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.图号及规格 }}
          </template>
        </el-table-column>
        <el-table-column label="制品名称" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.制品名称 }}
          </template>
        </el-table-column>
      </el-table>
    </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: [] // 详情表
    }
  },
  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).then(response => {
          if (response.data.length !== 0) {
            for (let i = 0; i < response.data.length; i++) {
              this.tableData.push({
                跟单号: response.data[i].跟单号,
                序号: response.data[i].工序顺序,
                工序名: response.data[i].工艺名称,
                计划数量: response.data[i].批次数量,
                计划准备工时: response.data[i].准结定额工时,
                单件计划工时: response.data[i].单件定额工时,
                计划工时: Number(response.data[i].批次数量) * (Number(response.data[i].单件定额工时) + Number(response.data[i].准结定额工时)),
                计划加工日期: response.data[i].计划日期.split(' ')[0],
                加工数量: response.data[i].批次数量,
                加工准备工时: response.data[i].修补准结工时,
                加工工时: response.data[i].设备工时,
                加工日期: response.data[i].操作时间,
                图号及规格: response.data[i].机床图号,
                制品名称: response.data[i].零件名称
              })
            }
            this.loading = false
          }
        })
      } else {
        this.$message.warning('请选择要查询的机床')
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('请查询出要导出的数据')
        return
      }
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['跟单号', '工序', '工序名', '计划件数', '计划准结(分)', '计划定额(分)', '计划工时(分)', '计划加工日期', '加工件数', '录入准结(分)', '加工工时(分)', '加工日期', '图号及规格', '制品名称']
        const filterVal = ['跟单号', '序号', '工序名', '计划数量', '计划准备工时', '单件计划工时', '计划工时', '计划加工日期', '加工数量', '加工准备工时', '加工工时', '加工日期', '图号及规格', '制品名称']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '机床工时表',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
