<template>
  <div class="app-container">
    <el-card>
      <el-select v-model="MachineValue" filterable size="small" style="margin:0px 10px 0px 10px;width: 180px;" placeholder="机床号" @change="getTreeData">
        <el-option
          v-for="item in Machine"
          :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-show="false" 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 :span="8">
        <el-card>
          <el-table :data="tableData1" :row-class-name="tableRowClassName" style="height: 670px" highlight-current-row border>
            <el-table-column align="center" label="工序名" width="110">
              <template slot-scope="scope">
                {{ scope.row.工艺名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作者" width="100">
              <template slot-scope="scope">
                {{ scope.row.员工姓名 === '超级管理员' && scope.row.工序状态 !== 4 ? '' : scope.row.员工姓名 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" show-overflow-tooltip min-width="90">
              <template slot-scope="scope">
                {{ scope.row.投产数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工序状态" show-overflow-tooltip min-width="90">
              <template slot-scope="scope">
                <span v-if="scope.row.工序状态 >= 4">已完成</span>
                <span v-else>未完成</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div :style="{background:MachineColor}" style="color: white;margin-top: 5px">{{ 机床图号 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ 机床名称 }}</div>
          <div style="margin: 10px 0 0 20px;height: 650px;overflow: auto">
            <el-tree
              :data="departmentData"
              :props="defaultProps"
              :indent="50"
              :expand-on-click-node="false"
              :render-content="renderContent"
              node-key="机床流水号"
              class="selectTree"
              @node-click="onClick"/>
          </div>
        </el-card>
        <el-card v-if="false" style="height: 350px">
          <el-table :data="tableData2" height="300" highlight-current-row border @row-click="searchTable1">
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column align="center" label="图号及规格" width="220">
              <template slot-scope="scope">
                {{ scope.row.零件图号 + '\xa0\xa0\xa0\xa0\xa0' + scope.row.规格 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="制品名称" width="200">
              <template slot-scope="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" min-width="90">
              <template slot-scope="scope">
                {{ scope.row.投产总数量 }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMachines, getMachinesStatue, getGroups, selectParts, selectProcedure } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'

export default {
  data() {
    return {
      MachineColor: '',
      MachineValue: '', // 机床号
      Machine: [],
      option: [], // 组号
      tableData1: [],
      tableData2: [],
      Complete: 2,
      Completes: [{
        value: 1,
        label: '完成'
      }, {
        value: 2,
        label: '在制'
      }],
      机床图号: '',
      机床名称: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      departmentData: [] // 树状数据
    }
  },
  created() {
    this.getMachine()
  },
  methods: {
    getMachine() {
      this.MachineValue = ''
      this.Machine = []
      getMachines().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.Machine.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            value2: response.data[i].机床名称
          })
        }
      }).then(() => {
        this.MachineValue = this.Machine[0].value
        getMachinesStatue(this.MachineValue).then(res => {
          if (res.data[0].是否发货 === 0) {
            this.MachineColor = 'rgb(126,172,237)'
          } else {
            this.MachineColor = 'green'
          }
        })
        this.getTreeData()
      })
    },
    // 获取树状数据
    getTreeData() {
      this.tableData1 = []
      this.tableData2 = []
      for (let i = 0; i < this.Machine.length; i++) {
        if (this.MachineValue === this.Machine[i].value) {
          this.机床图号 = this.Machine[i].label
          this.机床名称 = this.Machine[i].value2
        }
      }
      this.option = []
      getGroups(this.MachineValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.option.push({
            isLeaf: false,
            label: response.data[i].组号 + '\xa0\xa0\xa0' + (response.data[i].组件名称 ? response.data[i].组件名称 : ''),
            value: response.data[i].组件流水号,
            组件完成状态: response.data[i].组件完成状态,
            father: true,
            children: []
          })
        }
      }).then(() => {
        this.option.map(firstLevel => {
          // 根据分组查零件
          selectParts(1, firstLevel.value, 0, 0).then(response => {
            firstLevel.children = []
            for (let j = 0; j < response.data.length; j++) {
              firstLevel.children.push({
                label: (response.data[j].零件图号 ? response.data[j].零件图号 : '无零件图号') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].规格 ? response.data[j].规格 : '') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].投产总数量 ? response.data[j].投产总数量 : '') + '..........' + (response.data[j].零件名称 ? response.data[j].零件名称 : '无零件名称') + (response.data[j].零件类型 === 1 ? '' : '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0外购'),
                value: response.data[j].工艺计划流水号,
                考核状态: response.data[j].考核状态,
                采购状态: response.data[j].采购状态,
                零件类型: response.data[j].零件类型,
                father: false
              })
            }
          })
        })
      }).then(() => {
        this.departmentData = this.option
      })
    },
    onClick(num) {
      this.tableData1 = []
      this.tableData2 = []
      if (num.father === false) {
        if (num.零件类型 === 1) {
          selectProcedure(num.value).then(response => {
            this.tableData1 = response.data
          })
        }
      }
      // if (num.father === true) {
      //   selectParts(1, num.value, 0, 0).then(response => {
      //     this.tableData2 = response.data
      //   })
      // } else {
      //   selectParts(0, 0, 1, num.value).then(response => {
      //     this.tableData2 = response.data
      //   })
      // }
    },
    renderContent(h, { node, data, store }) {
      if (node.data.father === false) {
        if (node.data.零件类型 === 1) { // 自制
          if (parseInt(node.data.考核状态) > 6) {
            return (<span class='treeNotesComplate'>{node.label}</span>)
          } else {
            return (<span class='treeNotesUnComplate'>{node.label}</span>)
          }
        } else { // 外购
          if (node.data.采购状态 === '已完成') {
            return (<span class='treeNotesComplate'>{node.label}</span>)
          } else {
            return (<span class='treeNotesUnComplate'>{node.label}</span>)
          }
        }
      } else {
        if (node.data.组件完成状态 === '已完成') {
          return (<span class='treeNotesComplate'>{node.label}</span>)
        } else {
          return (<span class='treeNotesUnComplate'>{node.label}</span>)
        }
      }
    },
    searchTable1(row) {
      this.tableData1 = []
      selectProcedure(row.工艺计划流水号).then(response => {
        this.tableData1 = response.data
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.工序状态 >= 4) {
        return 'cjzuwcqk_complet'
      }
    }
  }
}
</script>

<style>
  .el-table .cjzuwcqk_complet {
    background: #67C23A;
  }
</style>
<style lang="scss">
  .selectTree{
    .el-tree-node__content>.el-tree-node__expand-icon{
      display: inline !important;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: #ccc !important;
    }
  }
  .treeNotesComplate {
    color: black;
    background-color: #67C23A;
  }
  .treeNotesUnComplate {
    color: black;
  }
</style>
