<template>
  <div>
    <el-row>
      <el-col style="width: 650px">
        <el-card style="height: 800px">
          <el-row style="margin-top: 5px">
            <el-select v-model="PersonValue" filterable placeholder="操作者" size="small" style="width: 100px">
              <el-option
                v-for="item in Person"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-button size="small" style="float: right;">移除</el-button>
            <el-button size="small" style="float: right;margin-right: 5px">添加</el-button>
          </el-row>
          <el-table v-loading="loading1" :data="tableData1" height="710" highlight-current-row size="mini" style="width: 100%" border>
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"/>
            <el-table-column label="图号及规格" align="center" width="180px">
              <template slot-scope="scope">
                {{ scope.row.图号及规格 }}
              </template>
            </el-table-column>
            <el-table-column label="制品名称" align="center" width="120px">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="80px">
              <template slot-scope="scope">
                {{ scope.row.投产数量 }}
              </template>
            </el-table-column>
            <el-table-column label="计划开始" align="center" width="90px">
              <template slot-scope="scope">
                {{ scope.row.计划开始时间 }}
              </template>
            </el-table-column>
            <el-table-column label="计划完成" align="center" width="90px">
              <template slot-scope="scope">
                {{ scope.row.计划结束时间 }}
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              :current-page="pageCurrent"
              :page-sizes="[50, 100, 200]"
              :page-size="pageSize"
              :total="total"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </el-card>
      </el-col>
      <el-col style="width: 650px">
        <el-card style="height: 800px">
          <el-table v-loading="loading2" :data="tableData2" height="380" highlight-current-row size="mini" style="width: 100%" border stripe>
            <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-table v-loading="loading3" :data="tableData3" height="393" highlight-current-row size="mini" style="width: 100%" border stripe>
            <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>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getPerson, getParts } from '@/api/ManufacturingCenter/ShopScheduling'
export default {
  data() {
    return {
      PersonValue: '',
      Person: [],
      loading1: false,
      loading2: false,
      loading3: false,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      total: 0, // 总条数
      pageSize: 50,
      pageCurrent: 1
    }
  },
  created() {
    this.getPerson()
    this.getParts()
  },
  methods: {
    getPerson() {
      this.PersonValue = ''
      this.Person = []
      getPerson().then(response => {
        response.data.map(v => {
          this.Person.push({
            label: v.姓名,
            value: v.人员编号
          })
        })
        this.PersonValue = this.Person[0].value
      })
    },
    getParts() {
      this.tableData1 = []
      this.loading1 = true
      getParts(this.pageCurrent, this.pageSize).then(response => {
        response.data.rows.map(v => {
          this.tableData1.push({
            工艺计划流水号: v.工艺计划流水号,
            图号及规格: v.图号及规格,
            零件名称: v.零件名称,
            投产数量: v.投产数量
          })
          if (v.计划开始时间) {
            this.tableData1.push({
              计划开始时间: v.计划开始时间.split(' ')[0]
            })
          }
          if (v.计划结束时间) {
            this.tableData1.push({
              计划结束时间: v.计划结束时间.split(' ')[0]
            })
          }
        })
        this.total = response.data.total
        this.loading1 = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getParts()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getParts()
    }
  }
}
</script>

<style scoped>

</style>
