<!--典型工艺维护-->
<template>
  <div class="app-container">
    <el-card>
      <span>零件分类:</span>
      <el-select v-model="partsCategoriesValue" size="small" filterable clearable placeholder="零件分类" @change="getPartsName">
        <el-option
          v-for="item in partsCategories"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>零件名称:</span>
      <el-select v-model="partsNameValue" size="small" filterable clearable placeholder="零件名称" @change="getTableData" >
        <el-option
          v-for="item in partsName"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <span>典型工艺号:</span>
      <el-input v-model="typicalNumValue" auto-complete="off" style="width: 100px" size="small" readonly/>
      <el-button size="small" type="success" icon="el-icon-search" style="margin-left: 10px" @click="total=0;pageCurrent=1;pageSize=20;getTableData()">查询</el-button>
      <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="addTableData">增加</el-button>
      <el-button size="small" type="warning" icon="el-icon-menu" style="margin-left: 10px" @click="editConfirm">保存</el-button>
    </el-card>

    <el-card>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%;max-height: 550px;" size="mini" height="550px">
        <el-table-column prop="num" label="序号" width="50" align="center" type="index">
          <template slot-scope="scope">
            {{ scope.row.工艺序号 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="工艺名称" width="230" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.工艺名称"
              size="mini"
              style="width:200px"
              placeholder="工艺名称"
              @dblclick.native="tableSearch(scope.$index)"/>
          </template>
        </el-table-column>
        <el-table-column prop="hard" label="难度等级" width="110" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.工艺难度等级" size="mini" placeholder="请选择" @change="difficultyLevel(scope.row)">
              <el-option v-for="item in hard" :key="item.value" :label="item.label" :value="item.value">
                <span style="color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="request" label="工艺要求" align="center" min-width="350">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.工艺要求"
              :rows="1"
              size="mini"
              placeholder="工艺要求"
              type="textarea"
              @dblclick.native="tableSearch(scope.$index)"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="单件" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.单件定额工时" size="mini" style="width:90px" placeholder="单件定额"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="准结" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.准结定额工时" size="mini" style="width:90px" placeholder="准结定额"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                icon="el-icon-arrow-up"
                type="primary"
                @click="upMove(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-arrow-down"
                type="primary"
                @click="downMove(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-circle-plus-outline"
                type="primary"
                @click="insertRow(scope.row)"/>
              <el-button
                size="mini"
                icon="el-icon-delete"
                type="danger"
                @click="delRow(scope.row)"/>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="工艺名称、工艺要求选择" center width="400px">
      <el-form ref="form" :model="form" label-position="left" label-width="125px" class="demo-ruleForm">
        <el-form-item label="工艺名称分类">
          <el-select v-model="form.processNameClassValue" placeholder="分类" size="small" @change="classificationChange()">
            <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="form.processNameValue" placeholder="名称" size="small" @change="nameChange()">
            <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-select v-model="form.processRequestValue" placeholder="要求" size="small">
            <el-option
              v-for="item in processRequest"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="confirmSelect()">确定选择</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPartsCategories, getPartsName, getTableData, upMove, downMove, deleRow, editConfirm, processNameSelect, processRequestSelect, processNameClick, insertRow, difficultyLevel, isAddOrEdit, addProcess } from '@/api/ManufacturingCenter/TypicalProcessMaintenance'
export default {
  data() {
    return {
      pageCurrent: 1,
      pageSize: 20,
      total: 0,
      partsCategories: [],
      partsCategoriesCheck: null,
      partsCategoriesValue: '',
      partsName: [],
      partsNameCheck: null,
      partsNameValue: '',
      typicalNumValue: '',
      tableData: [],
      loading: false,
      hard: [{ value: 'A' }, { value: 'B' }, { value: 'C' }],
      dialogFormVisible: false,
      form: {
        processNameClassValue: '',
        processNameValue: '',
        processRequestValue: ''
      },
      processNameClass: [],
      processName: [],
      processRequest: [],
      index: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(getPartsCategories, ['典型工艺名称分类', '典型工艺名称分类流水号'], 'partsCategories')
    },
    getPartsName() {
      this.typicalNumValue = ''
      this.partsName = []
      this.partsNameValue = ''
      getPartsName(this.partsCategoriesValue).then(res => {
        const data = res.data
        data.length > 0 ? this.partsNameValue = data[0].典型工艺流水号 : this.partsNameValue = ''
        this.typicalNumValue = data.length > 0 ? data[0].典型工艺号 : ''
        data.map(item => {
          this.partsName.push({
            label: item.典型工艺名称,
            value: item.典型工艺流水号
          })
        })
      })
    },
    getTableData() {
      this.partsCategoriesValue ? this.partsCategoriesCheck = 1 : this.partsCategoriesCheck = 0
      this.partsNameValue ? this.partsNameCheck = 1 : this.partsNameCheck = 0
      if (this.partsCategoriesCheck === 0 && this.partsNameCheck === 0) {
        this.$message.error('请选择查询条件')
      } else {
        this.loading = true
        getTableData(this.pageCurrent, this.pageSize, this.partsCategoriesCheck, this.partsCategoriesValue, this.partsNameCheck, this.partsNameValue).then(res => {
          this.loading = false
          this.tableData = res.data.rows
          this.total = res.data.total
        })
      }
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getTableData()
    },
    upMove(row) {
      upMove(row.典型工艺流水号, row.典型工艺工序流水号).then(res => {
        if (res.data[0].result === '1') {
          this.getTableData()
        }
      })
    },
    downMove(row) {
      downMove(row.典型工艺流水号, row.典型工艺工序流水号).then(res => {
        if (res.data[0].result === '1') {
          this.getTableData()
        }
      })
    },
    insertRow(row) {
      insertRow(row.典型工艺流水号, row.典型工艺工序流水号).then(res => {
        if (res.data[0].result === '1') {
          this.getTableData()
        }
      })
    },
    delRow(row) {
      deleRow(row.典型工艺流水号, row.典型工艺工序流水号).then(res => {
        if (res.data[0].result === '1') {
          this.getTableData()
        }
      })
    },
    editConfirm() {
      let index = 0
      this.tableData.map(row => {
        editConfirm(row.典型工艺流水号, row.典型工艺工序流水号, row.工艺序号, row.工艺编号, row.工艺要求, row.单件定额工时, row.准结定额工时, row.备注).then(res => {
          if (res.data[0].result === '1') {
            index++
          } else {
            this.$message.error('零件工艺保存失败')
          }
          if (index === this.tableData.length) {
            this.$message.success('保存修改成功')
            this.getTableData()
          }
        })
      })
    },
    tableSearch(index) {
      this.index = index
      this.dialogFormVisible = true
      this.processNameClass = []
      this.processName = []
      this.form.processNameClassValue = ''
      this.form.processNameValue = ''
      this.form.processRequestValue = ''
      this.getSelect(processNameClick, ['工艺分类名称', '工艺分类流水号'], 'processNameClass')
    },
    classificationChange() {
      this.processName = []
      this.processRequest = []
      this.form.processNameValue = ''
      this.form.processRequestValue = ''
      this.getSelect(processNameSelect, ['工艺名称', '工艺编号'], 'processName', this.form.processNameClassValue)
    },
    nameChange() {
      this.form.processRequestValue = ''
      this.processRequest = []
      this.getSelect(processRequestSelect, ['工艺要求'], 'processRequest', this.form.processNameValue)
    },
    confirmSelect() {
      this.dialogFormVisible = false
      for (let i = 0, len = this.processName.length; i < len; i++) {
        if (this.processName[i].value === this.form.processNameValue) {
          this.tableData[this.index].工艺名称 = this.processName[i].label
          break
        }
      }
      this.tableData[this.index].工艺编号 = this.form.processNameValue
      this.tableData[this.index].工艺要求 = this.form.processRequestValue
    },
    difficultyLevel(row) {
      difficultyLevel(row.工艺难度等级, row.典型工艺工序流水号)
    },
    async addTableData() {
      if (this.partsNameValue) {
        const result = await isAddOrEdit(this.partsNameValue)
        if (result.data.length === 0) {
          for (let i = 1; i < 21; i++) {
            await addProcess(this.partsNameValue, i, 0)
          }
          this.getTableData()
        } else {
          this.$message.warning(`改工艺已存在!请修改工艺`)
        }
      } else {
        this.$message.warning('请选择零件名称')
      }
    }
  }
}
</script>

<style scoped>
span{
  margin: 20px;
}
  .el-card{
    margin-bottom: 15px;
  }
</style>
