<template>
  <div class="app-container">
    <el-card>
      <span>项目名称</span>
      <el-select v-model="projectValue" filterable clearable size="small" style="margin-right:10px;width: 180px" 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="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="searchTable()">查询</el-button>
    </el-card>
    <el-card>
      <el-table :data="tableData" highlight-current-row border style="width: 100%;" size="mini" height="700">
        <el-table-column label="跟单号" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.跟单号 }}
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.序号 }}
          </template>
        </el-table-column>
        <el-table-column label="工序名" align="center" min-width="90">
          <template slot-scope="scope">
            {{ scope.row.工序名 }}
          </template>
        </el-table-column>
        <el-table-column label="计划数量" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.计划数量 }}
          </template>
        </el-table-column>
        <el-table-column label="计划准备工时" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.计划准备工时 }}
          </template>
        </el-table-column>
        <el-table-column label="单件计划工时" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.单件计划工时 }}
          </template>
        </el-table-column>
        <el-table-column label="计划工时（分）" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.计划工时 }}
          </template>
        </el-table-column>
        <el-table-column label="计划加工日期" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.计划加工日期 }}
          </template>
        </el-table-column>
        <el-table-column label="加工数量" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.加工数量 }}
          </template>
        </el-table-column>
        <el-table-column label="加工准备工时" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.加工准备工时 }}
          </template>
        </el-table-column>
        <el-table-column label="加工工时（分）" align="center" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.加工工时 }}
          </template>
        </el-table-column>
        <el-table-column label="加工日期" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.加工日期 }}
          </template>
        </el-table-column>
        <el-table-column label="图号及规格" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.图号及规格 }}
          </template>
        </el-table-column>
        <el-table-column label="制品名称" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.制品名称 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 10px 0;">
        <el-pagination
          :current-page="PageCurrent"
          :page-sizes="[10, 20, 30, 40, 1000]"
          :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: [],
      part: [], // 分組
      partValue: '',
      specificationValue: '', // 规格型号
      totalProcessingHours: '', // 加工总工时
      totalPlannedHours: '', // 计划总工时
      tableData: [], // 详情表
      PageCurrent: 1,
      PageSize: 1000,
      total: 0
    }
  },
  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 = []
      searchatabledata(this.projectValue, this.machineValue, this.PageCurrent, this.PageSize).then(response => {
        if (response.data.rows.length !== 0) {
          for (let i = 0; i < response.data.rows.length; i++) {
            this.tableData.push({
              跟单号: response.data.rows[i].跟单号,
              序号: response.data.rows[i].工序顺序,
              工序名: response.data.rows[i].工艺名称,
              计划数量: response.data.rows[i].批次数量,
              计划准备工时: response.data.rows[i].准结定额工时,
              单件计划工时: response.data.rows[i].单件定额工时,
              计划工时: Number(response.data.rows[i].批次数量) * (Number(response.data.rows[i].单件定额工时) + Number(response.data.rows[i].准结定额工时)),
              计划加工日期: response.data.rows[i].计划日期.split(' ')[0],
              加工数量: response.data.rows[i].批次数量,
              加工准备工时: response.data.rows[i].修补准结工时,
              加工工时: response.data.rows[i].设备工时,
              加工日期: response.data.rows[i].操作时间,
              图号及规格: response.data.rows[i].机床图号,
              制品名称: response.data.rows[i].零件名称
            })
            this.totalProcessingHours += Number(response.data.rows[i].设备工时)
            this.totalPlannedHours += Number(Number(response.data.rows[i].批次数量) * (Number(response.data.rows[i].单件定额工时) + Number(response.data.rows[i].准结定额工时)))
          }
        }
        this.total = response.data.total
      })
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.PageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>

</style>
