<template>
  <div>
    <el-form ref="form" inline @submit.native.prevent>
      <el-row>
        <el-col :span="5">
          <el-form-item label="流程卡号：">
            <el-input
              ref="codeFocus"
              v-model="cardNo"
              placeholder="请扫描流程卡号"
              @keyup.enter.native="codeKeyUp"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="同槽编号：">
            <el-input
              ref="codeFocus"
              v-model="mtnCode"
              placeholder="请扫描同槽编号"
              @keyup.enter.native="codeKeyUpMtnCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item style="margin: 0px 20px 0px 20px">
            <el-switch v-model="line" active-text="上线前" inactive-text="下线后" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button
              :disabled="wpList.length == 0"
              style="margin-top: 4px"
              type="primary"
              @click="onSubmit"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="wpList" :export-excel="false" :height="400" border>
      <el-table-column type="index" width="50px" align="center" />
      <el-table-column label="车间订单号" align="center" prop="poCode" />
      <el-table-column label="产品号" align="center" prop="partCode" />
      <el-table-column label="批次号" align="center" prop="batchNo" />
      <el-table-column label="当前工序" align="center" prop="currentWpTitle" />
      <el-table-column align="center" width="100" fixed="right" label="操作">
        <template #scope="scope">
          <el-button type="text" size="mini" @click="deleteRow(scope.row.currentWpId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: rgb(85, 85, 243)">维护电子档案</span>
      </div>

      <el-form ref="form" :model="formData" :rules="rulesMold" inline>
        <el-row>
          <el-col :span="6">
            <el-form-item label="设备编码：" prop="ecId">
              <!-- <equipment-card v-model="formData.ecId" clearable /> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模板：" prop="rfpId">
              <el-select
                v-model="formData.rfpId"
                clearable
                placeholder="请选择"
                @change="rbFilePreserveChange"
                style="width: 220px"
              >
                <el-option
                  v-for="item in dsRbFilePreserveList"
                  :key="item.rfpId"
                  :label="item.name"
                  :value="item.rfpId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cardNo: '',
      mtnCode: '',
      dsRbFilePreserveList: [],
      preserveSlotList: [],
      wpList: [],
      line: true,
      formData: { ecId: null, rfpId: null },
      rulesMold: {
        // ecId: [this.$validation.required],
        // rfpId: [this.$validation.required],
      },
    };
  },
  methods: {
    codeKeyUp() {
      if (this.cardNo) {
        this.commonMethod(this.cardNo);
      }
    },
    commonMethod(item) {
      if (item) {
        // this.$ajax.get('prMakeRec/loadCurrentWp/' + item).then(res => {
        //   if (this.$ifAjax(res)) {
        //     const obj = this.wpList.find(item => {
        //       return item.currentWpId == res.data.currentWpId;
        //     });
        //     if (obj != null) {
        //       return this.$message.warning('此订单已存在');
        //     }
        //     this.dsRbFilePreserveList = [];
        //     this.wpList.push(res.data);
        //     this.getRbFilePreserve(res.data.currentWpId);
        //   }
        // });
      }
    },
    codeKeyUpMtnCode() {
      if (this.mtnCode) {
        // this.$ajax.get('prMacToolUse/loadPrMacToolUseByMtnCode/' + this.mtnCode).then((res) => {
        //   if (this.$ifAjax(res)) {
        //     console.log(res);
        //     const list = res.data;
        //     for(var i =0;i < list.length; i++){
        //     this.commonMethod(list[i]);
        //     }
        //   }
        // });
      }
    },
    // 表格删除
    deleteRow(currentWpId) {
      this.wpList.forEach((item, index) => {
        if (item.currentWpId === currentWpId) {
          this.wpList.splice(index, 1);
        }
      });
    },

    // 保存
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const wpIdList = [];
          this.wpList.forEach(item => {
            wpIdList.push(item.currentWpId);
          });
          // this.$ajax
          //   .post('prMakeRec/saveRetrospectDefend', {
          //     wpIdList,
          //     ecId: this.formData.ecId,
          //     rfpId: this.formData.rfpId,
          //     line: this.line,
          //     preserveSlotList: this.preserveSlotList,
          //   })
          //   .then(res => {
          //     if (this.$ifAjax(res)) {
          //       this.$message.success(this.$t('global.saveOk'));
          //       this.$refs.form.resetFields();
          //       this.formData = {};
          //       this.cardNo = '';
          //       this.wpList = [];
          //       this.preserveSlotList = [];
          //     }
          //   });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tableBox {
  height: 430px;
  overflow: auto;
  padding-bottom: 30px;
  table {
    tr {
      page-break-inside: avoid;
    }
    td {
      width: 168px;
      height: 30px;
      border: 1px solid #000;
      background: transparent;
      color: #000;
      font-size: 14px;
      text-align: center;
      // padding: 0;
      // margin: 0;
      // /deep/ .el-input__inner {
      //   text-align: center;
      //   height: 26px !important;
      //   width: 80% !important;
      // }
    }
  }
}
.box-card {
  margin-top: 10px !important;
}
</style>
