<template>
  <div class="app-container">

    <el-card style="margin-bottom: 20px">
      <el-radio-group
        v-model="radio"
        size="small"
        style="margin: 10px;"
        @change="Organization()">
        <el-radio :label="0">未编制</el-radio>
        <el-radio :label="1">已编制</el-radio>
      </el-radio-group>
      <span>定额员:</span>
      <el-select v-model="CraftmenValue" placeholder="定额员" size="small" style="width:100px" @change="searchMachine()">
        <el-option
          v-for="item in Craftmen"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <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"/>
      </el-select>
      <el-button type="success" icon="el-icon-search" style="margin-left: 10px;" size="small" @click="searchDetail">查询</el-button>
      <el-button v-show="isShow1" type="primary" size="small" icon="el-icon-cjn-09" @click="saveApprove">保存</el-button>
      <el-button v-show="isShow2" type="danger" icon="el-icon-edit" size="small" @click="returnEdit">装配定额调整</el-button>
    </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" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工艺工时" :disabled="disabled" size="mini" align="center" @change="update(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { initCraftmen, searchMachine, searchDetail, searchProcess, update, saveApprove, returnEdit } from '@/api/Assembly/AssemblyQuotaSetting'
import '@/icon/iconfont.css'
export default {
  data() {
    return {
      radio: 0,
      checked: false,
      disabled: false,
      CraftmenValue: '',
      Craftmen: [],
      machineNumberValue: '',
      machineNumber: [],
      isShow1: true,
      isShow2: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      loading: false,
      result: 0,
      dataAll: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initCraftmen().then(response => { // 初始化工艺员
        this.tableData3 = response.data
        for (let i = 0; i < response.data.length; i++) {
          this.Craftmen.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    searchMachine() { // 根据条件查机床编号
      this.machineNumberValue = ''
      this.machineNumber = []
      searchMachine(this.radio).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.machineNumber.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    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('请先选择机床编号')
      }
    },
    Organization() {
      this.CraftmenValue = ''
      this.machineNumberValue = ''
      this.machineNumber = []
      if (this.radio === 0) {
        this.dataAll = []
        this.isShow1 = true
        this.isShow2 = false
        this.disabled = false
      } else if (this.radio === 1) {
        this.dataAll = []
        this.isShow1 = false
        this.isShow2 = true
        this.disabled = true
      }
    },
    returnEdit() {
      returnEdit(this.machineNumberValue).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('调整成功')
          this.CraftmenValue = ''
          this.machineNumberValue = ''
          this.machineNumber = []
          this.dataAll = []
        } else { this.$message.error('调整失败') }
      })
    },
    update(row) {
      update(row.装配工序流水号, row.工艺工时).then(response => {
        console.log(response.data, '工艺要求修改成功', 505)
      })
    },
    saveApprove() {
      saveApprove(this.machineNumberValue).then(response => {
        if (response.data[0].result === '1') {
          this.$message.success('保存成功')
          this.CraftmenValue = ''
          this.machineNumberValue = ''
          this.machineNumber = []
          this.dataAll = []
        } else { this.$message.error('保存失败') }
      })
    }
  }
}
</script>

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