<template>
  <div class="app-container">
    <el-card style="margin-bottom: 20px">
      <el-row>
        <span>机床编号:</span>
        <el-select v-model="machineNumberValue" filterable clearable placeholder="机床编号" size="small">
          <el-option
            v-for="item in machineNumber"
            :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.name }}</div>
          </el-option>
        </el-select>
        <el-button type="success" size="small" icon="el-icon-search" style="margin-left:10px" @click="searchDetail()">查询</el-button>
      </el-row>
    </el-card>
    <el-card style="background-color: #DCDCDC">
      <div v-for="(item, index) in dataAll" :key="index" style="margin-bottom: 30px">
        <el-table
          :data="item.table1"
          border
          style="width: 100%;margin-top: 15px">
          <el-table-column
            label="序号"
            width="80"
            align="center">
            <template slot-scope="scope">
              {{ scope.row.序号 }}
            </template>
          </el-table-column>
          <el-table-column
            label="组号"
            width="240"
            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 :data="item.table2" size="mini" border style="width: 100%">
          <el-table-column label="序号" width="90" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.序号" size="mini" style="width:60px" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="工序名称" width="230" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工序名称" size="mini" style="width:200px" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="工艺内容及装配具体要求" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工艺内容及装配具体要求" :rows="1" size="mini" type="textarea" readonly/>
            </template>
          </el-table-column>
          <el-table-column label="质检" align="center" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.质检" size="mini" readonly align="center"/>
            </template>
          </el-table-column>
          <el-table-column label="工时/时" align="center">
            <el-table-column label="工艺工时" align="center" width="80">
              <template slot-scope="scope">
                <el-input v-model="scope.row.工艺工时" size="mini" readonly align="center"/>
              </template>
            </el-table-column>
            <el-table-column label="实际工时" align="center" width="80">
              <template slot-scope="scope">
                <el-input v-model="scope.row.实际工时" size="mini" align="center" @change="update(scope.row)"/>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="完成情况/装配工" align="center" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.装配员" size="mini" readonly align="center" @click.native="param=0;selectPerson(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="检验情况/检验员" align="center" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.检验员" size="mini" readonly align="center" @click.native="param=1;selectPerson(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.备注" size="mini" align="center" @change="update(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" title="人员信息" center>
      <div style="height: 500px;">
        <div style="float: left;margin-top: 10px;margin-left: 20px;overflow-y: scroll;height: 400px;width: 30%">
          <el-tree
            :data="data2"
            :props="defaultProps"
            node-key="id"
            style="width: 150px;float: left"
            height="400"
            accordion
            @node-click="handleNodeClick"/>
        </div>
        <el-table :data="List1" highlight-current-row height="400" style="width: 60%;float: left;margin-left: 30px" @row-click="handleCurrentChange2">
          <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-button style="margin-left: 120px;margin-top: 20px" @click="dialogFormVisible = false">取消</el-button>
        <el-button :disabled="staffNum===''" type="primary" style="margin-top: 20px" @click="getName">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { initProject, searchDetail, searchProcess, update, getTree, fn, getTable8 } from '@/api/Assembly/AssemblyInformationInput'

export default {
  data() {
    return {
      machineNumberValue: '',
      machineNumber: [],
      floatNum: '',
      workingHours: '',
      Completion: '',
      Inspection: '',
      Remarks: '',
      name: '',
      staffNum: '',
      dialogFormVisible: false,
      data2: [],
      List1: [],
      loading: false,
      result: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dataAll: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initProject().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineNumber.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            name: response.data[i].项目名称
          })
        }
      })
      getTree().then(response => { // 获取人员信息树
        const data = response.data
        this.data2 = fn(data, 0)
      })
    },
    async searchDetail() { // 主表查询
      this.dataAll = []
      if (this.machineNumberValue !== '') {
        const response = await searchDetail(this.machineNumberValue)
        const data = response.data
        for (let i = 0; i < data.length; i++) {
          const response2 = await searchProcess(data[i].组件工艺流水号)
          this.dataAll.push({
            table1: [data[i]],
            table2: response2.data
          })
        }
      } else {
        this.$message.warning('请先选择机床编号')
      }
    },
    selectPerson(row) { // 点击查询按钮
      this.floatNum = row.装配工序流水号
      this.workingHours = row.实际工时
      this.Completion = row.完成情况
      this.Inspection = row.检验情况
      this.Remarks = row.备注
      this.dialogFormVisible = true
    },
    handleCurrentChange2(row) { // 获取当前行人员信息
      this.staffNum = row.人员编号
    },
    getName() { // 提交人员
      if (this.param === 0) {
        update(this.floatNum, this.workingHours, this.staffNum, this.Inspection, this.Remarks).then(response => {
          this.searchDetail()
          console.log(response.data, '工艺要求修改成功', 505)
        })
      } else if (this.param === 1) {
        update(this.floatNum, this.workingHours, this.Completion, this.staffNum, this.Remarks).then(response => {
          this.searchDetail()
          console.log(response.data, '工艺要求修改成功', 505)
        })
      }
      this.dialogFormVisible = false
    },
    handleNodeClick(data) { // 树节点点击
      getTable8(data.id).then(response => {
        this.List1 = response.data
      })
    },
    update(row) {
      console.log(row)
      update(row.装配工序流水号, row.实际工时, row.完成情况, row.检验情况, row.备注).then(response => {
        console.log(response.data, '工艺要求修改成功', 505)
      })
    }
  }
}
</script>

<style scoped>
  span{
    margin: 10px 0px 10px 10px;
  }
</style>
