<template>
  <basic-container>
    <el-form ref="form" :model="formData" :rules="rules" inline label-width="80px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="流程卡号" prop="cardNo">
            <el-input
              ref="codeFocus"
              v-model="formData.cardNo"
              placeholder="请扫描流程卡号"
              @keyup.enter.native="codeKeyUp"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-descriptions
            :column="3"
            label-width="100px"
            :content-style="{ 'min-width': '120px' }"
            class="margin-top"
            border
          >
            <el-descriptions-item>
              <template #label> 流程卡号 </template>
              {{ tableObj.cardNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 车间订单号 </template>
              {{ tableObj.woCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 批次 </template>
              {{ tableObj.batchNo }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label> 零件号 </template>
              {{ tableObj.partCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 零件名称 </template>
              {{ tableObj.partName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 上序号 </template>
              {{ tableObj.frontOrders }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label> 上序名称 </template>
              {{ tableObj.frontPpsName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 工序号 </template>
              {{ tableObj.orders }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 工序名称 </template>
              {{ tableObj.ppsName }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label> 加工班组 </template>
              {{ tableObj.makeTeam }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 检验数量 </template>
              <el-input v-model="tableObj.makeQty" placeholder="请输入" type="number" min="0" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 是否合格 </template>
              <div>
                <el-radio
                  v-model="fillInObj.checkResult"
                  :label="1"
                  @input="checkResulInput($event, fillInObj)"
                  >合格</el-radio
                >
                <el-radio
                  v-model="fillInObj.checkResult"
                  :label="2"
                  @input="checkResulInput($event, fillInObj)"
                  >不合格</el-radio
                >
                <el-radio
                  v-model="fillInObj.checkResult"
                  :label="-1"
                  @input="checkResulInput($event, fillInObj)"
                  >NA</el-radio
                >
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 合格数量 </template>
              <el-input
                v-model="fillInObj.qualifiedQty"
                placeholder="请输入"
                type="number"
                min="0"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 不合格数量 </template>
              <el-input
                v-model="fillInObj.unqualifiedQty"
                placeholder="请输入"
                type="number"
                min="0"
                @change="unqualifiedQtyChange"
              />
            </el-descriptions-item>
            <!-- 比例 -->
            <el-descriptions-item>
              <template #label> 比例(%) </template>
              <el-input v-model="fillInObj.scale" placeholder="请输入" type="number" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 不良原因 </template>
              <!-- <poor-reason v-model="fillInObj.poorReason" placeholder="请选择" @change="prChange" /> -->
              <el-select v-model="fillInObj.poorReason" placeholder="请选择" @change="prChange">
                <el-option
                  v-for="item in poorReasonList"
                  :key="item.dictValue"
                  :label="item.dictValue"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label> 不良描述 </template>
              <el-input
                v-model="fillInObj.poorMemo"
                :autosize="{ minRows: 2, maxRows: 5 }"
                type="textarea"
              />
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-form>
    <span style="text-align: center; display: block; margin: 20px 0px 10px 0px">
      <el-button slot="right" type="primary" :disabled="isDisabled" @click="onSubmit"
        >保存</el-button
      >
    </span>
  </basic-container>
</template>
<script>
import { loadProTest, saveProCheck } from '@/api/workCheck/index.js';
// defective_cause
import { getDictionary } from '@/api/system/dict';
export default {
  data() {
    return {
      formData: {
        cardNo: null,
      },
      rules: {
        cardNo: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      tableObj: {
        makeQty: null,
      },
      fillInObj: {
        checkResult: 1,
        qualifiedQty: null,
        unqualifiedQty: null,
        scale: 0,
        poorReason: '',
        poorMemo: '',
      },
      isDisabled: false,
      poorReasonList: [], //不良原因
    };
  },
  mounted(){
    this.getDictionary()
  },
  methods: {
    getDictionary(){
      getDictionary({code:'defective_cause'}).then(res => {
        this.poorReasonList = res.data.data;
      });
    },
    unqualifiedQtyChange(v) {
      this.fillInObj.unqualifiedQty = v;
      // this.$set(this.qcReviewSheet, 'unqualifiedQty', v);
      const makeQty = this.tableObj.makeQty;
      if (v > makeQty) {
        this.$message.error('不合格数不能大于' + makeQty);
        this.$set(this.fillInObj, 'unqualifiedQty', null);
        this.$set(this.fillInObj, 'scale', null);
      } else {
        this.$set(this.fillInObj, 'scale', Math.round((v / makeQty) * 100));
      }
    },
    checkResulInput(v, item) {
      if (v === 2) {
        this.fillInObj.unqualifiedQty = this.tableObj.makeQty;
        this.fillInObj.qualifiedQty = 0;
      } else {
        this.fillInObj.qualifiedQty = this.tableObj.makeQty;
        this.fillInObj.unqualifiedQty = 0;
      }
    },
    prChange(id, item) {
      // this.fillInObj.poorReason = '';
      // if (item) {
      //   this.fillInObj.poorReason = item.name;
      // } else {
      //   this.fillInObj.poorReason = '';
      // }
    },
    codeKeyUp() {
      if (this.formData.cardNo) {
        loadProTest({ cardNo: this.formData.cardNo }).then(res => {
          this.tableObj = res.data.data;
          this.fillInObj = {
            checkResult: 1,
            qualifiedQty: this.tableObj.makeQty,
            unqualifiedQty: 0,
            scale: 0,
            poorReason: '',
            poorMemo: '',
          };
        });
      }
    },
    onSubmit() {
      this.isDisabled = true;
      this.$refs.form.validate(valid => {
        if (valid) {
          const num = Number(this.fillInObj.unqualifiedQty) + Number(this.fillInObj.qualifiedQty);
          if (num > this.tableObj.makeQty) {
            this.$message.warning('合格与不合格数量之和不能大于检验数量!!!');
            return;
          }
          if (this.fillInObj.checkResult === 2) {
            if (this.fillInObj.poorReason === '' || this.fillInObj.poorMemo === '') {
              this.$message.warning('请填写原因或描述!!!');
              return;
            }
          }
          if (Number(this.fillInObj.scale) > 100 || Number(this.fillInObj.scale) < 0) {
            this.$message.warning('比例所填值的范围在0~100!!!');
            return;
          }
          this.fillInObj.makeQty = this.tableObj.makeQty;
          this.fillInObj.wpId = this.tableObj.wpId;
          saveProCheck(this.fillInObj)
            .then(res => {
              this.$message.success('检验成功!!!');
              this.tableObj = {
                makeQty: null,
              };
              this.fillInObj = {
                checkResult: 1,
                qualifiedQty: null,
                unqualifiedQty: null,
                scale: 0,
                poorReason: '',
                poorMemo: '',
              };
              this.formData.cardNo = '';
              this.isDisabled = false;
            })
            .catch(err => {});
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>