<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: -10px;">
        <el-radio-group v-model="radio" style="margin: 10px;" @change="radioChange">
          <el-radio :label="1">未编制</el-radio>
          <el-radio :label="2">已编制</el-radio>
        </el-radio-group>
        <span style="margin: 10px">定额员:</span>
        <el-select v-model="personValue" size="small" placeholder="定额员" @change="personChange">
          <el-option
            v-for="item in person"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <span style="margin: 10px">零件号:</span>
        <el-select v-model="partNumValue" size="small" filterable placeholder="零件号" style="margin: 10px" @change="typeChange()">
          <el-option
            v-for="item in partNum"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <!--<el-button type="success" size="small" icon="el-icon-search" style="margin: 10px" @click="typeChange()">查询</el-button>-->
        <span v-if="radio === 1" style="color: #53A3F7;font-size: 14px"> 未编制的数量{{ partNum.length }}</span>
        <span v-if="radio === 2" style="color: #53A3F7;font-size: 14px"> {{ shuliang }}</span>
      </div>
      <div>
        <span>种类:</span>
        <el-input v-model="typeValue" size="small" placeholder="种类" readonly style="margin: 10px;width:180px"/>
        <span>零件名称:</span>
        <el-input v-model="partName" size="small" placeholder="零件名称" readonly style="margin: 10px;width:180px"/>
        <span>投产总数量:</span>
        <el-input v-model="batchNum" size="small" placeholder="投产总数量" readonly style="margin: 10px;width:180px"/>
        <span>材质:</span>
        <el-input v-model="material" size="small" placeholder="材质" readonly style="margin: 10px;width:180px"/>
        <el-button v-if="radio === 2" type="primary" icon="el-icon-cjn-09" size="small" @click="ADD">保存</el-button>
        <el-button v-if="radio === 1" type="primary" icon="el-icon-cjn-09" size="small" @click="ADD1">保存</el-button>
      </div>
    </el-card>
    <el-card>
      <div>
        <el-table v-loading="listLoading" :data="tableData" border style="width: 100%;" height="550px" size="small">
          <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="tableData[scope.$index].name" style="width:150px" size="small" placeholder="工艺名称" readonly/>
            </template>
          </el-table-column>
          <el-table-column prop="request" label="工艺要求" align="center">
            <template slot-scope="scope">
              <el-input v-model="tableData[scope.$index].request" :rows="1" size="small" 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="tableData[scope.$index].singleton" :readonly="tableData[scope.$index].name===''" style="width:150px" size="small" placeholder="单件"/>
            </template>
          </el-table-column>
          <el-table-column prop="Settlement" label="准结" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="tableData[scope.$index].Settlement" :readonly="tableData[scope.$index].name===''" style="width:150px" size="small" placeholder="准结"/>
            </template>
          </el-table-column>
          <el-table-column v-if="isShow" prop="budget" label="外协预算" width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="tableData[scope.$index].budget" style="width:150px" placeholder="外协预算" readonly/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPerson, mainTable, getPartnames1, getPartnames2, detailInfo, mainTable1, TableAddLi, TableAddLi1 } from '@/api/ManufacturingCenter/QuotaFormulation'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      listLoading: false,
      shuliang: '',
      q: 0,
      result: 0,
      budget1: [],
      personValue: '',
      person: [],
      radio: 1, // 第一组
      radio1: 1, // 第二组
      partNumValue: '', // 零件号值
      partNum: [], // 零件号
      typeValue: '', // 种类
      CraftsmenValue: '', // 工艺员值
      Craftsmen: [], // 工艺员
      CraftmanValue: '', // 完艺表单工艺员值
      Craftman: [], // 完艺表单工艺员
      partName: '', // 零件名称
      batchNum: '', // 投产总数量
      material: '', // 材质
      // materialClass: [], // 材质类
      typicalClassValue: '', // 典型工艺零件分类值
      typicalClass: [], // 典型工艺零件分类
      partNameValue1: '', // 典型工艺零件名称值
      partName1: [], // 典型工艺零件名称
      partNameValue1check: false, // 典型工艺零件名称check
      processNumValue: '', // 典型工艺号值
      processNum: [], // 典型工艺号
      processNumValuecheck: false, // 典型工艺号check
      remark: '', // 备注
      remark1: '', // 完艺零件名称
      numVal: '', // 输入数值
      tolerance: '', // 公差
      tableData: [],
      tableData3: null, // 工艺定额人员
      tableData4: null, // 完艺表格
      processSelect: [], // 工艺分类流水号
      processNameClass: [], // 工艺名称分类
      processNameClassValue: '',
      processName: [], // 工艺名称
      processNameValue: '',
      processRequest: [], // 工艺要求
      processRequestValue: '',
      processN1: [], // 工艺编号
      str: '', // 拼接字符串用的
      value: '', // 第一个select的
      input1: '', // 种类
      checked: false, // 是否核准
      checked1: false, // 修改
      input: '', // 规格
      isShow: false, // 2的可见性
      date0: ['', ''], // 完艺时间段
      PN: '0000', // 零件号0000
      num: '', // 工艺计划流水号
      num0: '', // 主表工艺计划流水号
      perNum: [],
      tuhao: [],
      tuhaoValue: '',
      check1: '',
      check2: '',
      check3: '',
      check4: '',
      input2: '',
      list: null,
      value7: '',
      restaurants: [],
      state4: '',
      timeout: null
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  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].人员编号
          })
        }
      })
      getPartnames1().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.partNum.push({
            label: response.data[i].零件图号,
            value: response.data[i].工艺计划流水号
          })
        }
      })
    },
    personChange() {
      if (this.radio === 2) {
        this.shuliang = '加载中...'
        this.partNumValue = ''
        this.partNum = []
        this.typeValue = ''
        this.Craftsmen = ''
        this.batchNum = ''
        this.material = ''
        this.partName = ''
        this.tableData = [] // 清主表
        getPartnames2(this.personValue).then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.partNum.push({
              label: response.data[i].零件图号,
              value: response.data[i].工艺计划流水号
            })
          }
          this.shuliang = '已编制的数量' + this.partNum.length
        })
      }
    },
    radioChange() { // radio改变 编制情况 获取不同零件号
      if (this.radio === 2) { // 已编制
        this.isShow = true
        this.partNumValue = ''
        this.partNum = []
        this.typeValue = ''
        this.Craftsmen = ''
        this.partName = ''
        this.batchNum = ''
        this.material = ''
        this.personValue = ''
        this.tableData = [] // 清主表
      } else { // 未编制
        this.shuliang = ''
        this.isShow = false
        this.partNumValue = ''
        this.partNum = []
        this.typeValue = ''
        this.Craftsmen = ''
        this.partName = ''
        this.batchNum = ''
        this.material = ''
        this.personValue = ''
        this.tableData = [] // 清主表
        getPartnames1().then(response => {
          for (let i = 0; i < response.data.length; i++) {
            this.partNum.push({
              label: response.data[i].零件图号,
              value: response.data[i].工艺计划流水号
            })
          }
        })
      }
    },
    typeChange() { // 当零件号改变时，改变种类、工艺员、零件名称、投产总数量、材质,并且显示主表信息
      this.listLoading = true
      this.tableData = []
      this.num0 = ''
      if (this.radio === 1) { // 未编制
        detailInfo(this.partNumValue).then(response => {
          if (response.data.length !== 0) {
            this.typeValue = response.data[0].零件类型名称
            this.partName = response.data[0].零件名称
            this.batchNum = response.data[0].批次数量
            this.num0 = response.data[0].工艺计划流水号
            this.material = response.data[0].材料
          }
        }).then(() => {
          mainTable(this.num0).then(response => {
            if (response.data.length === 0) {
              this.listLoading = false
            } else {
              for (let i = 0; i < response.data.length; i++) {
                this.tableData.push({
                  name: response.data[i].工艺名称,
                  request: response.data[i].工艺要求,
                  num1: response.data[i].工序流水号,
                  Settlement: response.data[i].准结定额工时,
                  singleton: response.data[i].单件定额工时,
                  lingjian: response.data[i].零件图号,
                  numm: response.data[i].工艺计划流水号
                })
              }
              this.listLoading = false
            }
          })
        })
      } else {
        detailInfo(this.partNumValue).then(response => {
          if (response.data.length !== 0) {
            this.typeValue = response.data[0].零件类型名称
            this.partName = response.data[0].零件名称
            this.batchNum = response.data[0].批次数量
            this.num0 = response.data[0].工艺计划流水号
            this.material = response.data[0].材料
          }
        }).then(() => {
          mainTable1(this.partNumValue).then(response => {
            if (response.data.length === 0) {
              this.listLoading = false
            } else {
              for (let i = 0; i < response.data.length; i++) {
                this.tableData.push({
                  name: response.data[i].工艺名称,
                  request: response.data[i].工艺要求,
                  num1: response.data[i].工序流水号,
                  Settlement: response.data[i].准结定额工时,
                  singleton: response.data[i].单件定额工时,
                  budget: response.data[i].外协预算价格1,
                  lingjian: response.data[i].零件图号,
                  numm: response.data[i].工艺计划流水号
                })
              }
              this.listLoading = false
            }
          })
        })
      }
    },
    ADD() {
      this.result = 0
      for (let i = 0; i < this.tableData.length; i++) {
        TableAddLi(this.tableData[i].singleton, this.tableData[i].Settlement, this.tableData[i].lingjian, this.tableData[i].num1, this.tableData[i].numm).then(response => {
          this.result += parseInt(response.data[0].result)
          if (this.result === this.tableData.length) {
            this.$message.success('保存成功')
            this.typeChange()
          } else if (response.data[0].result === '0') {
            this.$message.error('第' + (i + 1) + '行保存失败')
          }
        })
      }
    },
    ADD1() {
      this.result = 0
      if (this.personValue === '') {
        this.$message.error('请选择人员')
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          TableAddLi(this.tableData[i].singleton, this.tableData[i].Settlement, this.tableData[i].lingjian, this.tableData[i].num1, this.tableData[i].numm).then(response => {
            this.result += parseInt(response.data[0].result)
            if (this.result === this.tableData.length) {
              TableAddLi1(this.partNumValue, this.personValue).then(response => {
                if (response.data[0].result === '1') {
                  this.$message.success('保存成功')
                  this.radioChange()
                } else {
                  this.$message.error('保存失败')
                }
              })
            } else if (response.data[0].result === '0') {
              this.$message.error('保存失败')
            }
          })
        }
      }
    }
  }
}
</script>

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