<template>
  <div>
    <el-form :model="maForm" ref="maForm" size="small" :inline="true" label-width="120px" >
      <el-form-item label="关键字" prop="keyWord">
        <el-input
          v-model="maForm.keyWord"
          placeholder="请输入关键字"
          clearable
          maxlength="50"
          style="width: 240px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getTaskInfo" >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="equipmentList" row-key="id">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="物资名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
      <el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true"/>
      <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
      <el-table-column label="预入库数量" align="center" prop="repairNum" :show-overflow-tooltip="true"/>
      <el-table-column label="待入库数量" align="center" prop="pendingInputNum" :show-overflow-tooltip="true"/>
      <el-table-column label="已入库数量" align="center" prop="inputNum" :show-overflow-tooltip="true" />
      <el-table-column label="被驳回数量" align="center" prop="rejectNum" :show-overflow-tooltip="true" />
      <el-table-column label="驳回原因" align="center" prop="rejectReason" :show-overflow-tooltip="true" />
      <el-table-column label="管理模式" align="center" prop="manageType" :show-overflow-tooltip="true">
        <template slot-scope="scope">
              <div v-if="scope.row.manageType==0">编码管理</div>
              <div v-if="scope.row.manageType==1">数量管理</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <dict-tag :options="dict.type.repair_end_task_status" :value="scope.row.status"/>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <!-- <el-button size="mini" style="margin-bottom: 10px" type="success" v-if="scope.row.status == '0'" @click="handlePass(scope.row)">入库</el-button>
          <el-button size="mini" type="danger" v-if="scope.row.status == '0'" @click="handleFail(scope.row)">驳回</el-button> -->
          <el-button size="mini" v-if="scope.row.manageType==0" @click="handleViewCode(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 数量入库确认框 -->
    <el-dialog title="数量入库" :visible.sync="numOpen" width="600px" append-to-body>
        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
            <span style="width: 100px;">入库数量：</span>
            <el-input v-model="numInput" type="number" min="0" @input="(v)=>(rowData.unitValue==1?numInput=Number(v.replace(/[^\d.]/g,'')) : numInput=Number(v.replace(/[^\d]/g,'')))"
            placeholder="请输入入库数量" clearable maxlength="50" style="width: 400px"/>
        </div>
        <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
            <el-button type="primary" size="mini" @click="saveNumInput">确定</el-button>
            <el-button type="normal" size="mini" @click="numOpen=false">取消</el-button>
        </div>
    </el-dialog>
     <!-- 数量入库驳回框 -->
     <el-dialog title="数量入库" :visible.sync="numOpen2" width="600px" append-to-body>
        <div style="width: 100%;height: 100%;display: flex;align-items: center;margin-bottom: 10px;">
            <span style="width: 100px;">驳回数量：</span>
            <el-input v-model="numInput2" type="number" min="0" @input="(v)=>(rowData.unitValue==1?numInput2=Number(v.replace(/[^\d.]/g,'')) : numInput2=Number(v.replace(/[^\d]/g,'')))"
            placeholder="请输入驳回数量：" clearable maxlength="20" style="width: 400px"/>
        </div>
        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
            <span style="width: 100px;">驳回原因：</span>
            <el-input v-model="rejectReason" type="textarea"
            placeholder="请输入驳回原因：" clearable maxlength="50" style="width: 400px"/>
        </div>
        <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
            <el-button type="primary" size="mini" @click="rejectNumInput">确定</el-button>
            <el-button type="normal" size="mini" @click="numOpen2=false">取消</el-button>
        </div>
    </el-dialog>

    <!-- 编码类型编码列表 -->
    <el-dialog title="编码入库" :visible.sync="open" width="1200px" append-to-body>
        <el-row :gutter="10" class="mb8">
            <el-col :span="6">
                <div style="width: 100%;height: 100%;display: flex;align-items: center;">
                    <span style="width: 80px;">关键字：</span>
                    <el-input
                      v-model="keyWord"
                      placeholder="请输入关键字"
                      clearable
                      maxlength="50"
                      style="width: 240px"/>
                </div>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" size="mini" @click="queryCodeList">查询</el-button>
                <el-button size="mini" @click="resetCodeQuery">重置</el-button>
            </el-col>
        </el-row>
        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-check"
              size="mini"
              :disabled="multiple"
              @click="handlePassAll"
              >入库</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-close"
              size="mini"
              :disabled="multiple"
              @click="handleFailAll"
              >驳回</el-button
            >
          </el-col>
        </el-row> -->
        <el-table :data="maCodeList" width="100%" ref="codeTableList" height="450px"  row-key="maId" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" :selectable="selectable"/> -->
            <el-table-column label="序号" type="index" width="55" align="center"/>
            <el-table-column label="类型名称" prop="typeName" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="规格型号" prop="materialName" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="设备编码" prop="maCode" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="设备状态" prop="maStatus" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.ma_machine_status" :value="scope.row.maStatus"/>
                </template>
            </el-table-column>
            <el-table-column label="驳回原因" prop="rejectReason" align="center" :show-overflow-tooltip="true"/>
            <!-- <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="codeWarehouse(scope.row)" v-if="!isReject&&scope.row.maStatus=='5'">入库</el-button>
                    <el-button size="mini" type="danger" @click="rejectCodeWarehouse(scope.row)" v-if="scope.row.maStatus=='5'">驳回</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <!-- <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
            <el-button type="primary" size="mini" @click="saveDevCode">保存</el-button>
            <el-button type="normal" size="mini" @click="open=false">取消</el-button>
        </div> -->
    </el-dialog>

    <!-- 编码入库驳回框 -->
    <el-dialog :visible.sync="codeOpen" width="500px" append-to-body :show-close="false">
        <div style="width: 100%;height: 100%;display: flex;align-items: center;margin-bottom: 20px;">
          <span style="width: 100%;font-size: 16px;">是否确认驳回所选择的设备编码？</span>
        </div>
        <div style="width: 100%;height: 100%;display: flex;align-items: center;">
            <span style="width: 100px;">驳回原因：</span>
            <el-input v-model="rejectReason" type="textarea"
            placeholder="请输入驳回原因" clearable maxlength="100" style="width: 400px"/>
        </div>
        <div style="width: 100%;height: 50px;display: flex;justify-content: flex-end;align-items: center;">
            <el-button type="primary" size="mini" @click="confirmRejectCode">确定</el-button>
            <el-button type="normal" size="mini" @click="codeOpen=false">取消</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getTestedDetailListApi,getCodeListApi,repairInputWarehouseApi,rejectWarehouseApi
} from "@/api/repair/testedInBound";
import { auditPass } from "@/api/repair/testExamine";
export default {
  name: "",
  dicts: ["ma_machine_status","repair_end_task_status"],
  components: {
  },
  props: {
    isEdit: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    queryId: {
      type: [String, Number],
      default: () => {
        return "";
      },
    },
    param: {
      type: Object,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      paramTemp: {},
      //任务ID
      taskId: "",
      // 遮罩层
      loading: true,
      //租赁单位
      uniteList: [],
      //租赁工程
      projectList: [],
      // 表格数据
      equipmentList: [],
      maForm: {
        keyWord: undefined
      },
      passTemp: [],
      faliTemp: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 是否显示弹出层-数量
      rowData:{},
      numInput:0,//通过
      numOpen: false,
      numInput2:0,//驳回
      rejectReason:"",
      numOpen2: false,
      // 是否显示弹出层-编码
      open: false,
      isReject: false,
      keyWord:"",
      maCodeList: [],
      codeOpen: false,
      codeRow:{}
    };
  },
  computed: {},
  mounted() {
    this.taskId = this.param.taskId
    console.log(this.param)
    this.paramTemp = this.param;
    this.getTaskInfo();
  },
  methods: {
    resetQuery(){
      this.maForm.keyWord="";
      this.getTaskInfo()
    },
    //获取任务详情-列表数据
    getTaskInfo() {
      this.loading = true;
      let param = {
        taskId:this.taskId,
        keyWord:this.maForm.keyWord
      }
      getTestedDetailListApi(param).then((response) => {
        this.equipmentList = response.data;
        this.loading = false;
      });
    },
    //入库按钮
    handlePass(row) {
      console.log(row)
      console.log(row.manageType)
      if(row.manageType==1){//数量管理
        this.numInput=0;
        this.numOpen=true;
        this.rowData=row;
      }else{//编码-打开
        this.rowData=row;
        this.isReject=false;
        this.keyWord=""
        this.queryCodeList()
        this.open=true;
      }
    },
    //数量入库确认入库
    saveNumInput(){
      console.log(this.rowData)
      console.log(this.numInput)
      if(this.numInput<=0){
        this.$modal.msgError("入库数量需大于0!");
      }else if(this.numInput>this.rowData.pendingInputNum){
        this.$modal.msgError("入库数量不能大于预入库数量!");
        this.numInput = this.rowData.pendingInputNum;
      }else{
        //数量入库接口
        let param = {
          taskId:this.rowData.taskId,
          typeId:this.rowData.typeId,
          pendingInputNum:this.rowData.pendingInputNum,
          inputNum:this.numInput,
          isRs: this.rowData.isRs,
          maCode: this.rowData.maCode,
          maTypeName: this.rowData.typeName,
          unitName: this.rowData.unitName,
        }
        repairInputWarehouseApi(param).then((response) => {
          if(response.code==200){
            this.$modal.msgSuccess("入库成功");
            this.numOpen=false;
            this.getTaskInfo();
          }
        });
      }
    },
    //驳回按钮-打开弹窗
    handleFail(row) {
      console.log(row)
      console.log(row.manageType)
      if(row.manageType==1){//数量管理
        this.numInput2=0;
        this.rejectReason="";
        this.numOpen2=true;
        this.rowData=row;
      }else{//编码-打开
        this.rowData=row;
        this.isReject=true;
        this.keyWord=""
        this.queryCodeList()
        this.open=true;
      }
    },
    //驳回按钮-数量入库-确认驳回
    rejectNumInput(){
      console.log(this.rowData)
      console.log(this.numInput2)
      console.log(this.rejectReason)
      if(this.numInput2<=0){
        this.$modal.msgError("驳回数量需大于0!");
      }else if(this.numInput2>this.rowData.pendingInputNum){
        this.$modal.msgError("驳回数量不能大于预入库数量!");
        this.numInput2 = this.rowData.pendingInputNum;
      }else{
        //数量驳回接口
        let param = {
          agreementId:this.rowData.agreementId,
          taskId:this.rowData.taskId,
          typeId:this.rowData.typeId,
          rejectReason:this.rejectReason,
          pendingInputNum:this.rowData.pendingInputNum,
          rejectNum:this.numInput2
        }
        rejectWarehouseApi(param).then((response) => {
          if(response.code==200){
            this.$modal.msgSuccess("驳回成功");
            this.numOpen2=false;
            this.getTaskInfo();
          }
        });
      }
    },
    //查看编码列表-打开编码列表弹窗
    handleViewCode(row){
      this.rowData=row;
        this.isReject=true;
        this.keyWord=""
        this.queryCodeList()
        this.open=true;
    },
    //查询编码列表
    queryCodeList(){
      console.log(this.rowData)
      console.log(this.keyWord)
      let param = {
        keyWord:this.keyWord,
        taskId:this.rowData.taskId,
        typeId:this.rowData.typeId
      }
      getCodeListApi(param).then((response) => {
        if (response.code == 200) {
          this.maCodeList = response.data
        }
      });
    },
    //编码列表弹窗-重置按钮
    resetCodeQuery(){
      this.keyWord=""
      this.queryCodeList()
    },
    //编码弹窗-单个入库
    codeWarehouse(codeRow){
      console.log(this.rowData)
      console.log(codeRow)
      let param = {
        taskId:this.rowData.taskId,
        typeId:this.rowData.typeId,
        maCodeList:[{maId:codeRow.maId,maCode:codeRow.maCode}],
        isRs: this.rowData.isRs,
        maCode: this.rowData.maCode,
        maTypeName: this.rowData.typeName,
        unitName: this.rowData.unitName,
      }
      this.$modal.confirm("是否确认入库所选择的设备编码？")
        .then(function () {
          return repairInputWarehouseApi(param);
        }).then((response) => {
          if(response.code==200){
            this.$modal.msgSuccess("入库成功");
            this.queryCodeList();
            this.getTaskInfo();
          }
        })
        .catch(() => {});
    },
    //编码弹窗-单个驳回-打开驳回弹窗
    rejectCodeWarehouse(codeRow){
      console.log(this.rowData)
      console.log(codeRow)
      this.rejectReason="";
      this.codeOpen=true;
      this.codeRow=codeRow
      // let param = {
      //   agreementId:this.rowData.agreementId,
      //   taskId:this.rowData.taskId,
      //   typeId:this.rowData.typeId,
      //   maCodeList:[{maId:codeRow.maId}]
      // }
      // this.$modal.confirm("是否确认驳回所选择的设备编码？")
      //   .then(function () {
      //     return rejectWarehouseApi(param);
      //   }).then((response) => {
      //     if(response.code==200){
      //       this.$modal.msgSuccess("驳回成功");
      //       this.queryCodeList();
      //       this.getTaskInfo();
      //     }
      //   })
      //   .catch(() => {});
    },
    //编码弹窗-单个驳回-打开驳回弹窗-确认按钮
    confirmRejectCode(){
      let param = {
        agreementId:this.rowData.agreementId,
        taskId:this.rowData.taskId,
        typeId:this.rowData.typeId,
        rejectReason:this.rejectReason,
        maCodeList:[{maId:this.codeRow.maId, maCode:this.codeRow.maCode}]
      }
      rejectWarehouseApi(param).then((response) => {
        if(response.code==200){
          this.$modal.msgSuccess("驳回成功");
          this.codeOpen=false;
          this.queryCodeList();
          this.getTaskInfo();
        }
      })
    },
    //是否可用勾选框
    selectable(row) {
      if (row.maStatus == "5") {
        return true;
      } else {
        return false;
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.passTemp = [];
      this.failTemp = [];
      this.ids = selection.map((item) => item.id);
      selection.forEach((item) => {
        this.passTemp.push({maId:item.maId, maCode:item.maCode});
      });
      selection.forEach((item) => {
        this.failTemp.push({maId:item.maId, maCode:item.maCode});
      });
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    //编码弹窗-多个通过
    handlePassAll() {
      let param = {
        taskId:this.rowData.taskId,
        typeId:this.rowData.typeId,
        maCodeList:this.passTemp,
        isRs: this.rowData.isRs,
        maCode: this.rowData.maCode,
        maTypeName: this.rowData.typeName,
        unitName: this.rowData.unitName,
      }
      this.$modal.confirm("是否确认入库所选择的设备编码？")
        .then(function () {
          return repairInputWarehouseApi(param);
        }).then((response) => {
          if(response.code==200){
            this.$modal.msgSuccess("入库成功");
            this.queryCodeList();
            this.getTaskInfo();
          }
        })
        .catch(() => {});
    },
    //编码弹窗-多个驳回
    handleFailAll() {
      let param = {
        agreementId:this.rowData.agreementId,
        taskId:this.rowData.taskId,
        typeId:this.rowData.typeId,
        maCodeList:this.failTemp
      }
      this.$modal.confirm("是否确认驳回所选择的设备编码？")
        .then(function () {
          return rejectWarehouseApi(param);
        }).then((response) => {
          if(response.code==200){
            this.$modal.msgSuccess("驳回成功");
            this.queryCodeList();
            this.getTaskInfo();
          }
        })
        .catch(() => {});
    },


  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
  width: 60px !important;
  margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}
.custom-textarea {
  width: 300px;
  height: 100px;
}
.accept-img {
  color: #409eff;

  .a-two {
    margin-left: 20px;
  }
}

.left-tip {
  font-size: 16px;
  letter-spacing: 1px;
}
</style>
