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

    <el-card style="margin-bottom: 20px">
      <span>机床分类:</span>
      <el-select v-model="machineTypeValue" placeholder="机床分类" size="small" style="width:150px" @change="SearchMachine">
        <el-option
          v-for="item in machineType"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>机床编号:</span>
      <el-select v-model="machineNumberValue1" placeholder="机床编号" size="small" style="width:150px" @change="searchGroup()">
        <el-option
          v-for="item in machineNumber2"
          :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 type="primary" size="small" icon="el-icon-tickets" @click="handleAdd">增加</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteTable">删除</el-button>
    </el-card>
    <el-card style="background-color: #DCDCDC">
      <div v-for="(item, key) in dataAll" :key="key" 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-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="primary"
                @click="handleEdit(scope.row, 'form2')">编辑</el-button>
              <el-button
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click="deleteGroup(scope.row)">删除</el-button>
            </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" @change="update(scope.row)"/>
            </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"
                @dblclick.native="tableSearch(scope.row)"
                @change="update(scope.row)"/>
            </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"
                @change="update(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-column label="工艺工时" align="center" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工艺工时" size="mini" align="center" @change="update2(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-arrow-up"
                type="primary"
                @click="upOne(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-arrow-down"
                type="primary"
                @click="downOne(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-circle-plus-outline"
                type="primary"
                @click="insertOne(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click="deleteOne(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible2" title="工序名称、工序要求选择" center width="400px">
      <el-form ref="form1" :model="form1" label-position="left" label-width="125px" class="demo-ruleForm">
        <el-form-item label="工序名称分类">
          <el-select v-model="processNameClassValue" placeholder="分类" size="small" @change="cChange()">
            <el-option
              v-for="item in processNameClass"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-select v-model="processNameValue" placeholder="名称" size="small" @change="nChange()">
            <el-option
              v-for="item in processName"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="工序要求">
          <el-input v-model="processRequestValue" placeholder="要求" size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="confirmSelect()">确定选择</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogFormVisible4" center width="400px">
      <el-form ref="form2" :model="form2" :rules="rules" label-position="left" label-width="125px" class="demo-ruleForm">
        <el-form-item label="序号" prop="序号">
          <el-input v-model="form2.序号" placeholder="序号" size="small"/>
        </el-form-item>
        <el-form-item label="组件" prop="组件">
          <el-select v-model="form2.组件" multiple placeholder="组件" size="small">
            <el-option
              v-for="item in GroupNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="装配任务" prop="装配任务">
          <el-input v-model="form2.装配任务" placeholder="装配任务" type="textarea" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4=false">取消</el-button>
        <el-button v-show="title==='增加组件工艺'" type="primary" @click="submitAdd()">确定</el-button>
        <el-button v-show="title==='编辑组件工艺'" type="primary" @click="submitEdit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { SearchMachine, searchDetail, searchProcess, update, submitAdd, submitEdit, insertOne, update2, upOne, downOne, deleteOne,
  deleteGroup, initmachineType, initprocessNameClass, initProcessName, update1, searchGroup } from '@/api/Assembly/TypicalAssemblyMaintenance'
import '@/icon/iconfont.css'
export default {
  data() {
    return {
      title: '',
      radio: 0,
      checked: false,
      number: '',
      machineNumberValue1: '',
      machineNumber2: [],
      machineTypeValue: '',
      machineType: [],
      AssemblyTask: '',
      Group: '',
      GroupNumberValue: [],
      GroupNumberValue1: '',
      GroupNumber: [],
      GroupNum: '',
      GroupProcessNumber: '',
      SerialNumber: '',
      SerialNumberGroup: [],
      isShow2: false,
      processNameClassValue: '',
      processNameClass: [],
      processNameValue: '',
      Process: '',
      processName: [],
      Procedure: '',
      ProcedureNameGroup: [],
      processRequestValue: '',
      ProcessContentGroup: [],
      QualityTesting: [],
      ProcessSequence: [],
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      loading: false,
      form1: {},
      form2: {
        序号: '',
        组件: [],
        装配任务: ''
      },
      rules: {
        序号: [{ required: true, message: '请输入序号', trigger: 'blur' }],
        组件: [{ required: true, message: '请选择组件', trigger: 'change' }],
        装配任务: [{ required: true, message: '请输入装配任务', trigger: 'blur' }]
      },
      num1: '',
      result: 0,
      dialogFormVisible2: false,
      dialogFormVisible4: false,
      dataAll: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      initprocessNameClass().then(response => { // 初始化工序分类
        for (let i = 0; i < response.data.length; i++) {
          this.processNameClass.push({
            label: response.data[i].工序分类名称,
            value: response.data[i].工序分类流水号
          })
        }
      })
      initmachineType().then(response => { // 初始化机床分类
        for (let i = 0; i < response.data.length; i++) {
          this.machineType.push({
            label: response.data[i].机床分类名称,
            value: response.data[i].机床分类流水号
          })
        }
      })
    },
    SearchMachine() {
      this.machineNumberValue1 = ''
      this.machineNumber2 = []
      SearchMachine(this.machineTypeValue).then(response => { // 典型机床查询
        for (let i = 0; i < response.data.length; i++) {
          this.machineNumber2.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号
          })
        }
      })
    },
    searchGroup() {
      this.GroupNumber = []
      this.GroupNumberValue = []
      searchGroup(this.machineNumberValue1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.GroupNumber.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    async searchDetail() { // 主表查询
      this.dataAll = []
      if (this.machineNumberValue1 !== '') {
        const response = await searchDetail(this.machineNumberValue1)
        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('请先选择机床编号')
      }
    },
    update(row) {
      update(row.装配工序流水号, row.序号, row.工序名称, row.工艺内容及装配具体要求, row.质检).then(response => {
        console.log(response.data, '工艺要求修改成功', 505)
      })
    },
    update2(row) {
      update2(row.装配工序流水号, row.工艺工时).then(response => {
        console.log(response.data, '工艺要求修改成功', 505)
      })
    },
    handleAdd() {
      if (this.machineNumberValue1 !== '') {
        this.addForm('form2', [this.dialogFormVisible4 = true, this.title = '增加组件工艺', this.Group = '', this.GroupNumberValue1 = ''])
      } else {
        this.$message.warning('请先选择机床编号')
      }
    },
    handleEdit(row, formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
      this.GroupProcessNumber = row.组件工艺流水号
      this.GroupNumberValue1 = ''
      this.title = '编辑组件工艺'
      this.dialogFormVisible4 = true
      this.form2.序号 = row.序号
      this.form2.装配任务 = row.装配任务
      this.Group = ''
      console.log(row, 1111)
      this.form2.组件 = (row.组件流水号.split(',')).map(Number)
      console.log(this.form2.组件)
    },
    submitAdd() {
      this.GroupNumberValue1 = this.form2.组件[0]
      for (let h = 1; h < this.form2.组件.length; h++) {
        this.GroupNumberValue1 += ',' + this.form2.组件[h]
      }
      for (let i = 0; i < this.form2.组件.length; i++) {
        for (let j = 0; j < this.GroupNumber.length; j++) {
          if (this.form2.组件[i] === this.GroupNumber[j].value) {
            this.form2.组件[i] = this.GroupNumber[j].label
          }
        }
        this.Group += this.form2.组件[i] + '组 '
      }
      this.addTable(submitAdd, [this.machineNumberValue1, this.form2.序号, this.Group, this.form2.装配任务, this.GroupNumberValue1], 'form2', function() { this.dialogFormVisible4 = false; this.searchDetail() })
    },
    submitEdit() {
      this.GroupNumberValue1 = this.form2.组件[0]
      for (let h = 1; h < this.form2.组件.length; h++) {
        this.GroupNumberValue1 += ',' + this.form2.组件[h]
      }
      for (let i = 0; i < this.form2.组件.length; i++) {
        for (let j = 0; j < this.GroupNumber.length; j++) {
          if (this.form2.组件[i] === this.GroupNumber[j].value) {
            this.form2.组件[i] = this.GroupNumber[j].label
          }
        }
        this.Group += this.form2.组件[i] + '组 '
      }
      this.editTable(submitEdit, [this.GroupProcessNumber, this.form2.序号, this.Group, this.form2.装配任务, this.GroupNumberValue1], 'form2', function() { this.searchDetail(); this.dialogFormVisible4 = false })
    },
    deleteGroup(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(row.组件工艺流水号).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchDetail()
          } else { this.$message.error('删除失败') }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    insertOne(row) {
      insertOne(row.组件工艺流水号).then(response => {})
      this.searchDetail()
    },
    deleteTable() {
      this.$confirm('此操作将永久删除该工艺, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.result = 0
        for (var i = 0; i < this.dataAll.length; i++) {
          deleteGroup(this.dataAll[i].table1[0].组件工艺流水号).then(response => {
            this.result += parseInt(response.data[0].result)
            if (this.result === this.dataAll.length) {
              this.$message.success('删除成功')
              this.searchDetail()
            }
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    upOne(row) {
      upOne(row.装配工序流水号, row.组件工艺流水号, row.工序顺序).then(response => {})
      this.searchDetail()
    },
    downOne(row) {
      downOne(row.装配工序流水号, row.组件工艺流水号, row.工序顺序).then(response => {})
      this.searchDetail()
    },
    deleteOne(row) {
      deleteOne(row.装配工序流水号).then(response => {})
      this.searchDetail()
    },
    cChange() {
      this.processName = []
      initProcessName(this.processNameClassValue).then(response => { // 初始化工序分类
        this.tableData = response.data
        for (let i = 0; i < response.data.length; i++) {
          this.processName.push({
            label: response.data[i].工序名称,
            value: response.data[i].工序名称流水号
          })
        }
      })
    },
    nChange() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.processNameValue === this.tableData[i].工序名称流水号) {
          this.Process = this.tableData[i].工序名称
          this.processRequestValue = this.tableData[i].工艺内容及装配具体要求
        }
      }
    },
    tableSearch(row) {
      this.dialogFormVisible2 = true
      this.processNameClassValue = ''
      this.processNameValue = ''
      this.processRequestValue = ''
      this.Procedure = row.装配工序流水号
      this.number = row.序号
    },
    confirmSelect() {
      update1(this.Procedure, this.number, this.Process, this.processRequestValue).then(response => {
        if (response.data[0].result === '1') {
          this.dialogFormVisible2 = false
          this.$message.success('选择成功')
          this.searchDetail()
        } else {
          this.$message.success('选择失败')
        }
      })
    }
  }
}
</script>

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