<template>
  <div class="app-container">
    <el-card>
      <el-select v-model="Machine" filterable clearable size="small" style="margin:0px 10px 0px 10px;width: 180px;" placeholder="机床号" @change="getTreeData">
        <el-option
          v-for="item in Machines"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div style="float: left">{{ item.label }}</div>
          <div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
        </el-option>
      </el-select>
      <el-select v-model="Complete" size="small" clearable placeholder="是否完成" style="margin:0px 10px;width: 120px;">
        <el-option
          v-for="item in Completes"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-card>
    <el-row>
      <el-col style="width: 530px">
        <el-card>
          <el-table
            :data="tableData1"
            loading="loading"
            class="table"
            style="height: 800px"
            highlight-current-row
            empty-text="   "
            border>
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column align="center" label="工艺名" width="90">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="序间质检" width="90">
              <template slot-scope="scope">
                {{ scope.row.序间质检 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="不合格数" width="90">
              <template slot-scope="scope">
                {{ scope.row.不合格数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作者" show-overflow-tooltip width="90">
              <template slot-scope="scope">
                {{ scope.row.操作者 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="完成日期" width="100">
              <template slot-scope="scope">
                {{ scope.row.完成日期 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col style="width:600px">
        <el-row>
          <el-card class="box-card" style="min-height: 400px">
            <div>机床图号：{{ MachineLabel }} 机床名称：{{ MachineName }}</div>
            <div style="min-height: 400px;margin-left: 50px;">
              <el-tree
                :data="departmentData"
                :props="defaultProps"
                :expand-on-click-node="false"
                :indent="30"
                class="gongyizhiding"
                default-expand-all
                @node-click="onClick"/>
            </div>
          </el-card>
        </el-row>
        <el-row>
          <el-card style="height: 400px">
            详情
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMachines, getGroups } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'
import Cookie from 'js-cookie'

export default {
  data() {
    return {
      Machine: '', // 机床号
      Machines: [],
      Group: '', // 组号
      Groups: [],
      number: '', // 零件图号
      tableData1: [],
      Complete: '',
      Completes: [{
        value: 1,
        label: '完成'
      }, {
        value: 2,
        label: '在制'
      }],
      departmentData: [], // 树状数据
      MachineDrawingNumber: [], // 获取树状机床信息
      MachineLabel: '', // 机床图号
      MachineName: '' // 机床名称
    }
  },
  created() {
    this.getMachine()
  },
  methods: {
    getMachine() {
      if (Cookie.get('machineValue') !== undefined) {
        this.Machine = ''
        this.Machines = []
        this.Group = ''
        this.Groups = []
        getMachines().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.Machines.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号,
              value2: response.data[i].机床名称
            })
          }
          if (Cookie.get('group') !== undefined) {
            this.Machine = parseInt(Cookie.get('machineValue'))
            this.getGroup()
            this.getTableData()
            this.Group = parseInt(Cookie.get('group'))
            // this.getTableData()
            Cookie.remove('machineValue')
            Cookie.remove('group')
          } else {
            // this.getTableData()
            Cookie.remove('machineValue')
            Cookie.remove('group')
          }
        })
      } else {
        this.Machine = ''
        this.Machines = []
        this.Group = ''
        this.Groups = []
        getMachines().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.Machines.push({
              label: response.data[i].机床图号,
              value: response.data[i].机床流水号,
              value2: response.data[i].机床名称
            })
          }
        })
      }
    }, // 获取组号
    getGroup() {
      this.Group = ''
      this.Groups = []
      getGroups(this.Machine).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Groups.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
        this.Group = response.data[0].组件流水号
      })
    }, // 获取树状数据
    getTreeData() {
      for (let i = 0; i < this.Machines.length; i++) {
        if (this.Machine === this.Machines[i].value) {
          this.MachineLabel = this.Machines[i].label
          this.MachineName = this.Machines[i].value2
        }
      }
      getGroups(this.Machine).then(response => { // 初始化机床图号分类
        this.options = []
        for (let i = 0; i < response.data.length; i++) {
          this.options.push({
            label: response.data[i].组号 + '..........' + response.data[i].组件名称,
            value: response.data[i].组件流水号,
            father: true,
            children: []
          })
        }
      }).then(() => {
        // this.options.map(firstLevel => {
        //     processNameSelect(firstLevel.value).then(response => { // 根据分类查询机床图号
        //         firstLevel.children = []
        //         for (let j = 0; j < response.data.length; j++) {
        //             firstLevel.children.push({
        //                 label: response.data[j].机床图号,
        //                 value: response.data[j].机床流水号,
        //                 father: false
        //             })
        //         }
        //     })
        // })
      }).then(() => {
        this.departmentData = this.options
      })
    }
  }
}
</script>

<style scoped>

</style>
