<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: -10px;">
        <el-radio-group v-model="radio" style="margin: 10px;" @change="clearDetail">
          <el-radio :label="0">未编制</el-radio>
          <el-radio :label="1">已编制</el-radio>
        </el-radio-group>
        <span style="margin: 10px">定额员:</span>
        <el-select v-model="personValue" size="small" style="width: 100px" placeholder="定额员">
          <el-option
            v-for="item in person"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>机床编号:</span>
        <el-select
          v-model="machineValue"
          placeholder="机床编号"
          size="small"
          style="width:100px"
          clearable
          @change="searchGroup()">
          <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.name }}</div>
          </el-option>
        </el-select>
        <span>组号:</span>
        <el-select
          v-model="groupNumberValue"
          placeholder="组号"
          size="small"
          style="width:100px"
          clearable
          @change="changeGroup()">
          <el-option
            v-for="item in groupNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span>图号/名称:</span>
        <el-input
          v-model="partNum"
          clearable
          style="width:120px"
          placeholder="请双击选择"
          size="small"
          @change="clear()"
          @dblclick.native="searchParts"/>
        <el-button type="success" size="small" icon="el-icon-search" style="margin: 10px" @click="searchDetail()">查询</el-button>
        <el-button v-show="isShow2" type="danger" icon="el-icon-edit" size="small" @click="returnEdit">工艺调整
        </el-button>
      </div>

      <div>
        <span>种类:</span>
        <el-input v-model="typeValue" placeholder="种类" size="small" readonly style="width:100px"/>
        <span>名称/型号:</span>
        <el-input v-model="partName" placeholder="名称" size="small" readonly style="width:115px"/>
        <span>材质:</span>
        <el-input v-model="materialName" placeholder="材质" size="small" style="width:120px" readonly/>
        <span>规格:</span>
        <el-input v-model="spec" style="width:100px" size="small" placeholder="规格" readonly/>
        <span>投产总数量:</span>
        <el-input v-model="batchNum" placeholder="总数量" readonly size="small" style="width:80px;margin-top:10px;"/>
      </div>
    </el-card>
    <el-card>
      <div>
        <el-table v-loading="listLoading" :data="tableData" border style="width: 100%;" height="550px">
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column prop="name" label="工艺名称" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工艺名称" style="width:150px" placeholder="工艺名称" readonly/>
            </template>
          </el-table-column>
          <el-table-column prop="request" label="工艺要求" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.工艺要求" :rows="1" placeholder="工艺要求" type="textarea" readonly/>
            </template>
          </el-table-column>
          <el-table-column prop="singleton" label="单件" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.单件定额工时" :disabled="disabled" style="width:150px" placeholder="单件" @change="update(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column prop="Settlement" label="准结" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.准结定额工时" :disabled="disabled" style="width:150px" placeholder="准结" @change="update(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <el-button v-if="radio === 0" type="primary" icon="el-icon-cjn-09" size="small" style="float:right;margin: 10px" @click="saveApprove">保存</el-button>

      </div>
    </el-card>
    <el-dialog
      :visible.sync="dialogFormVisible4"
      title="图号"
      center
      style="min-height: 300px">
      <el-table
        :data="tableData8"
        size="mini"
        style="width: 97%;max-height: 300px"
        height="300"
        highlight-current-row
        border
        @row-click="selectParts">
        <el-table-column align="center" label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料规格">
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料型号">
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="1"
          :page-sizes="[10, 20]"
          :page-size="10"
          :pager-count="5"
          :total="total"
          small
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisible5"
      title="图号"
      center
      style="min-height: 300px">
      <el-table
        :data="tableData9"
        size="mini"
        style="width: 97%;max-height: 300px"
        height="300"
        highlight-current-row
        border
        @row-click="selectParts1">
        <el-table-column align="center" label="零件图号">
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称">
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="材料">
          <template slot-scope="scope">
            {{ scope.row.材料 }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="1"
          :page-sizes="[10, 20]"
          :page-size="10"
          :pager-count="5"
          :total="total"
          small
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getPerson, getPartnames1, getProject, getGroup, update, getProcedure, returnEdit, saveApprove } from '@/api/WorkshopProcurement/OutsourcingQuotaSetting'

export default {
  data() {
    return {
      projectNameValue: '',
      projectName: [],
      machineValue: '',
      Machine: [],
      groupNumberValue: '',
      groupNumber: [],
      groupNum: '',
      groupType: '',
      tableData8: [],
      tableData9: [],
      ProcessFlowNumber: '',
      spec: '', // 规格
      total: 0,
      pageCurrent: 1,
      pageSize: 10,
      isShow2: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      listLoading: false,
      personValue: '',
      person: [],
      radio: 0, // 第一组
      partNum: '', // 零件号
      typeValue: '', // 种类
      partName: '', // 零件名称
      batchNum: '', // 投产总数量
      materialName: '', // 材质
      tableData: [],
      isShow: false // 2的可见性
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() { // 初始化未编制零件号
      getPerson().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.person.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
      getProject(0).then(response => { // 初始化机床项目
        for (let i = 0; i < response.data.length; i++) {
          this.Machine.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            name: response.data[i].项目名称
          })
        }
      })
    },
    clear() {
      this.typeValue = ''
      this.partName = ''
      this.partNum = ''
      this.materialName = ''
      this.spec = ''
      this.batchNum = ''
    },
    clearDetail() {
      if (this.radio === 1) {
        this.isShow2 = true
      } else {
        this.isShow2 = false
      }
      this.checked = false
      getProject(this.radio).then(response => { // 初始化机床项目
        for (let i = 0; i < response.data.length; i++) {
          this.Machine.push({
            label: response.data[i].机床图号,
            value: response.data[i].机床流水号,
            name: response.data[i].项目名称
          })
        }
      })
      this.machineValue = ''
      this.Machine = []
      this.groupNumberValue = ''
      this.groupNumber = []
      this.partNum = ''
      this.typeValue = ''
      this.partName = ''
      this.materialName = ''
      this.spec = ''
      this.batchNum = ''
      this.tableData = []
    },
    searchDetail() { // 查主表的信息
      if (this.partNum === '' || this.partNum === null) {
        this.$message.error('请选择零件作为查询对象')
      } else {
        getProcedure(this.ProcessFlowNumber).then(response => {
          this.tableData = []
          for (let i = 0; i < response.data.length; i++) {
            if (response.data[i].工艺编号 === null) {
              response.data[i].工艺编号 = 0
            }
            if (response.data[i].工艺要求 === null) {
              response.data[i].工艺要求 = ''
            }
          }
          this.tableData = response.data
        })
      }
    },
    returnEdit() { // 定额修改
      if (this.partNum === '' || this.partNum === null) {
        this.$message.error('请选择零件')
      } else {
        this.$confirm('此操作会将该零件打回至未编制状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          returnEdit(this.ProcessFlowNumber).then(response => {
            if (response.data[0].result === '1') {
              this.$message.success('打回成功')
              this.ProcessFlowNumber = ''
              this.partNum = ''
              this.tableData = []
            } else {
              this.$message.error('打回失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    },
    searchGroup() {
      this.clear()
      this.groupNumberValue = ''
      this.groupNumber = []
      getGroup(this.radio, this.machineValue).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.groupNumber.push({
            label: response.data[i].组号,
            value: response.data[i].组件流水号
          })
        }
      })
    },
    changeGroup() {
      this.clear()
      for (let i = 0; i < this.groupNumber.length; i++) {
        if (this.groupNumber[i].value === this.groupNumberValue) {
          this.groupNum = this.groupNumber[i].label
        }
      }
      if (this.groupNum.indexOf('MX') !== -1) {
        this.groupType = 0
      } else {
        this.groupType = 1
      }
    },
    selectParts(row) {
      this.ProcessFlowNumber = row.工艺流水号
      if (row.零件类型 === '1') {
        this.typeValue = '标准件'
      } else if (row.零件类型 === '2') {
        this.typeValue = '外购件'
      }
      this.partName = row.物料型号
      this.spec = row.物料规格
      this.batchNum = row.批次数量
      this.partNum = row.物料名称
    },
    selectParts1(row) {
      this.ProcessFlowNumber = row.工艺流水号
      if (row.零件类型 === '3') {
        this.typeValue = '基本件'
      }
      this.partName = row.物料名称
      this.materialName = row.材料
      this.batchNum = row.批次数量
      this.partNum = row.零件图号
    },
    searchParts() { // 根据条件查零件号
      if (this.groupNumberValue !== '') {
        if (this.radio === 0) { // 未编制
          this.disabled = false
          this.isShow2 = false
        } else { // 已编制
          this.isShow = true
          this.isShow2 = true
          this.disabled = true
        }
        this.pageCurrent = 1
        this.pageSize = 10
        getPartnames1(this.radio, this.groupNumberValue, this.groupType, this.pageCurrent, this.pageSize).then(response => {
          if (this.groupType === 0) {
            this.dialogFormVisible5 = true
            this.tableData9 = response.data.rows
            console.log(response.data)
            this.total = response.data.total
          } else {
            this.dialogFormVisible4 = true
            this.tableData8 = response.data.rows
            this.total = response.data.total
          }
        })
      } else {
        this.$message.warning('请先选择组号')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      getPartnames1(this.radio, this.groupNumberValue, this.groupType, this.pageCurrent, this.pageSize).then(response => {
        if (this.groupType === 0) {
          this.dialogFormVisible5 = true
          this.tableData9 = response.data.rows
          this.total = response.data.total
        } else {
          this.dialogFormVisible4 = true
          this.tableData8 = response.data.rows
          this.total = response.data.total
        }
      })
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      getPartnames1(this.radio, this.groupNumberValue, this.groupType, this.pageCurrent, this.pageSize).then(response => {
        if (this.groupType === 0) {
          this.dialogFormVisible5 = true
          this.tableData9 = response.data.rows
          this.total = response.data.total
        } else {
          this.dialogFormVisible4 = true
          this.tableData8 = response.data.rows
          this.total = response.data.total
        }
      })
    },
    update(row) {
      update(row.外购件工序流水号, row.单件定额工时, row.准结定额工时).then(response => {
      })
    },
    submit() {
      this.dialogFormVisible4 = false
      this.dialogFormVisible5 = false
    },
    saveApprove() { // 保存
      saveApprove(this.ProcessFlowNumber, this.personValue).then(response => {
        if (response.data.length === 1) {
          this.partNum = ''
          this.typeValue = ''
          this.partName = ''
          this.batchNum = ''
          this.materialName = ''
          this.spec = ''
          this.tableData = []
          this.$message.success('保存成功')
        } else {
          this.$message.error('保存失败')
        }
      })
    }
  }
}
</script>

<style scoped>
  .doing-row4{
    background: #f0f9eb;
  }
  .el-card{
    margin-bottom: 15px;
  }
</style>
