<template>
  <!-- 编码绑定查看与编码页面 -->
  <div>
    <el-form
      size="small"
      :model="maForm"
      :inline="true"
      ref="maFormRef"
      label-width="100px"
    >
      <el-form-item label="类型规格" prop="keyWord">
        <el-input
          clearable
          maxlength="50"
          style="width: 240px"
          v-model="maForm.keyWord"
          placeholder="请输入类型规格"
        />
      </el-form-item>

      <el-form-item label="机具厂家" prop="typeId">
        <el-select
          clearable
          filterable
          style="width: 240px"
          v-model="maForm.typeId"
          placeholder="请选择机具厂家"
        >
          <el-option
            :key="m.value"
            :value="m.value"
            :label="m.label"
            v-for="m in millList"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出厂日期" prop="productDate">
        <el-date-picker
          type="date"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          placeholder="请选择出厂日期"
          v-model="maForm.productDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >
          查询
        </el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          type="danger"
          icon="el-icon-plus"
          @click="handleBackAll"
        >
          驳回
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="codeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="序号" type="index" width="55" />
      <el-table-column
        align="center"
        label="物资名称"
        prop="maTypeName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        label="规格型号"
        prop="typeName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="到货数量"
        prop="purchaseNum"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="单位" prop="unitName" />
      <el-table-column
        align="center"
        label="供应商"
        prop="supplierName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="出厂日期"
        prop="productionTime"
        show-overflow-tooltip
      />

      <el-table-column label="相关配套资料" align="center" prop="checkUrlName">
        <!-- <template slot-scope="scope">
            <div @click="openGt(scope.row)" style="color: #02a7f0; cursor: pointer">
                {{ '报告管理' }}
            </div>
            </template> -->
      </el-table-column>

      <el-table-column align="center" label="状态">
        <template slot-scope="{ row }">
          <dict-tag
            :value="row.status"
            :options="dict.type.purchase_task_status"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-zoom-in"
            @click="handleView(row)"
          >
            查看
          </el-button>
          <el-button plain size="mini" type="warning" @click="handleBind(row)">
            <svg-icon icon-class="bind-icon" />
            绑定
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-close"
            @click="handleReject(row)"
          >
            驳回
          </el-button>
          <!-- 当从主列表点击查看时可显示二维码下载按钮 -->
          <el-button
            plain
            size="mini"
            type="success"
            @click="onDownloadQr(row)"
            v-if="queryType === 1"
          >
            <svg-icon icon-class="qr-icon" />
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="maForm.pageNum"
      :limit.sync="maForm.pageSize"
      @pagination="getCodeList"
    />

    <!-- 编码查看弹框-->
    <el-dialog
      width="70%"
      append-to-body
      title="查看编码"
      :visible.sync="viewCodeVisible"
    >
      <el-table border max-height="600px" :data="viewCodeList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column align="center" label="类型名称" prop="materialName" />
        <el-table-column align="center" label="规格型号" prop="materialModel" />
        <el-table-column align="center" prop="maCode" label="设备编码" />
        <el-table-column align="center" label="绑定人员" prop="createBy" />
        <el-table-column align="center" label="绑定时间" prop="createTime" />
        <el-table-column align="center" label="出厂编号" prop="outFacCode" />
        <el-table-column align="center" label="出厂时间" prop="productDate" />
      </el-table>
    </el-dialog>

    <!-- 绑定弹框-->
    <el-dialog
      width="70%"
      append-to-body
      title="编码绑定"
      :visible.sync="bindCodeVisible"
    >
      <el-form
        size="small"
        :inline="true"
        ref="queryFormBindRef"
        :model="queryBindForm"
        :rules="queryBindFormRules"
      >
        <el-form-item label="前缀" prop="codePrefix">
          <el-input
            clearable
            maxlength="20"
            placeholder="请输入前缀"
            v-model="queryBindForm.codePrefix"
          />
        </el-form-item>

        <el-form-item label="后缀范围" prop="codeSuffixStart">
          <el-input
            clearable
            placeholder="开始数值"
            v-model="queryBindForm.codeSuffixStart"
          />
        </el-form-item>
        <el-form-item prop="codeSuffixEnd">
          <el-input
            clearable
            placeholder="结束数值"
            v-model="queryBindForm.codeSuffixEnd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleAdd"
            >填充</el-button
          >
          <el-button type="primary" size="mini" @click="handleCodeBinding"
            >绑定</el-button
          >
        </el-form-item>
        <el-form-item>
          <div style="margin-left: 10px">
            当前待绑定数量：
            <span style="font-weight: bold; color: #ff4949">
              {{ waitBindNum }}
            </span>
          </div>
        </el-form-item>
      </el-form>
      <el-table border max-height="600px" :data="codeTableList">
        <el-table-column align="center" label="序号" type="index" />
        <el-table-column align="center" label="设备名称" prop="materialName" />
        <el-table-column align="center" label="规格型号" prop="materialModel" />
        <el-table-column align="center" label="设备编码">
          <template slot-scope="{ row }">
            <el-input clearable v-model="row.maCode" placeholder="请填写编码" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="出厂编号">
          <template slot-scope="{ row }">
            <el-input
              clearable
              v-model="row.outFacCode"
              placeholder="请填写出厂编码"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="出厂时间">
          <template slot-scope="{ row }">
            <el-date-picker
              type="date"
              v-model="row.productDate"
              placeholder="请选择出厂日期"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-remove"
              @click="handleRemove(scope.$index)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  bindAllData,
  getListDetailById,
  getNewBuyBindListDetailsApi,
} from "@/api/purchase/goodsBind";

export default {
  name: "BindTools",
  dicts: ["purchase_task_status"],
  props: {
    // 查询参数 taskId
    queryTaskId: {
      type: [String, Number],
      default: () => "",
    },
    // 查询参数 id
    queryId: {
      type: [String, Number],
      default: () => "",
    },
    // 页面展示类型 1. 查看 2. 编码
    queryType: {
      type: Number,
      default: () => 1,
    },
  },
  data() {
    return {
      total: 0, //                列表总条数
      waitBindNum: 0, //          待绑定数量
      loading: false, //          列表 loading 遮罩层
      showSearch: true, //        显示搜索条件
      viewCodeVisible: false, //  查看弹框
      bindCodeVisible: false, //  绑定弹框
      millList: [{ label: "测试公司", value: 1 }], //            厂家列表
      codeList: [], //            列表
      selectList: [], //          列表复选框选中数据
      viewCodeList: [], //        查看列表
      codeTableList: [], //       填充列表
      // 编码绑定表单数据源
      queryBindForm: {
        typeId: "", //          物资typeId
        typeName: "", //        规格型号
        codePrefix: "", //      编码前缀
        maTypeName: "", //      物资名称
        codeSuffixEnd: "", //   后缀结束
        codeSuffixStart: "", // 后缀开始
      },
      // 编码校验规则
      queryBindFormRules: {
        codePrefix: [
          { required: true, message: "请输入前缀", trigger: "blur" },
        ],
        codeSuffixStart: [
          {
            required: true,
            trigger: "blur",
            message: "请输入前缀",
          },
          {
            pattern: /^[1-9][0-9]*$/,
            message: "请输入大于0且不能以0开头的正整数",
          },
        ],
        codeSuffixEnd: [
          {
            required: true,
            trigger: "blur",
            message: "请输入后缀",
          },

          {
            pattern: /^[1-9][0-9]*$/,
            message: "请输入大于0且不能以0开头的正整数",
          },
        ],
      },
      // 列表查询参数
      maForm: {
        pageNum: 1,
        pageSize: 10,
        taskId: "",
        keyWord: "",
        productDate: "",
        taskStatus: 3,
      },
    };
  },
  created() {
    // 绑定按钮事件添加防抖 防止重复编码
    this.handleCodeBinding = this.debounce(this.handleCodeBinding, 1000);
  },
  mounted() {
    this.getCodeList();
  },
  methods: {
    // 获取列表数据
    async getCodeList() {
      this.loading = true;
      this.maForm.taskId = this.queryTaskId;
      this.maForm.id = this.queryId;
      this.maForm.statusList = [3, 13];
      const { data: res } = await getNewBuyBindListDetailsApi(this.maForm);
      this.loading = false;
      // this.total = res.total
      this.codeList = res.purchaseCheckDetailsList;
      this.total = res.purchaseCheckDetailsList.length || 0;
    },
    // 搜索
    handleQuery() {
      this.getCodeList();
    },
    // 重置
    resetQuery() {
      this.resetForm("maFormRef");
      this.getCodeList();
    },
    // 驳回 (批量)
    handleBackAll() {
      if (this.selectList.length < 1) {
        this.$modal.msgError("请勾选数据！");
        return;
      }
    },
    // 列表复选框事件
    handleSelectionChange(list) {
      this.selectList = list;
    },
    // 查看
    handleView(row) {
      this.viewCodeVisible = true;
      // this.loadingTwo = true
      // getListDetailById({ taskId: row.taskId, typeId: row.typeId }).then(
      //     (response) => {
      //         this.getListBind = response.rows
      //         this.showBind = true
      //         this.titleBind = '查看'
      //         this.loadingTwo = false
      //     },
      // )
    },
    // 绑定
    handleBind(row) {
      this.bindCodeVisible = true;
      this.waitBindNum = row.purchaseNum;
      this.queryBindForm.typeId = row.typeId;
      this.queryBindForm.typeName = row.typeName;
      this.queryBindForm.maTypeName = row.maTypeName;
      // this.queryBindTwo = {}
      // this.resetForm('queryFormBind')
      // this.titleTwo = '绑定'
      // this.showTwo = true
      // this.num = row.checkNum
      // this.materialName = row.materialName
      // this.materialModel = row.materialModel
      // this.productDate = row.productDate
      // this.taskIdTemp = row.taskId
      // this.typeIdTemp = row.typeId
    },
    // 驳回
    handleReject(row) {
      this.$confirm("是否确定驳回", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
    // 下载
    onDownloadQr() {
      console.log("二维码下载");
    },
    // 填充
    handleAdd() {
      // 1. 校验表单
      this.$refs.queryFormBindRef.validate((valid) => {
        if (valid) {
          // 1.1 判断结束值是否大于开始值
          const {
            typeName,
            codePrefix,
            maTypeName,
            codeSuffixEnd,
            codeSuffixStart,
          } = this.queryBindForm;
          if (parseInt(codeSuffixEnd) < parseInt(codeSuffixStart)) {
            this.$modal.msgError("结束值不可小于开始值");
            return;
          }
          // 1.2 判断可编码数量
          let waitCodeNum = this.waitBindNum; // 待编码数量
          // 可编码数量 如相减大于代编码数量 则取待编码数量 如小于待编码数量 则取相减后值
          let passCodeNUm =
            codeSuffixEnd - codeSuffixStart + 1 > waitCodeNum
              ? waitCodeNum
              : codeSuffixEnd - codeSuffixStart + 1;

          this.codeTableList = [];
          // 1.3 循环生成编码
          for (let i = 0; i < passCodeNUm; i++) {
            const codeItem = {
              typeName,
              maTypeName,
              outFacCode: "",
              productDate: "",
              maCode: `${codePrefix}${parseInt(codeSuffixStart) + i}`,
            };
            this.codeTableList.push(codeItem);
          }
        }
      });
    },
    //  绑定
    async handleCodeBinding() {
      if (this.codeTableList.length < 1) {
        this.$modal.msgError("请填充编码");
        return;
      }

      let isCodePass = false;
      try {
        this.codeTableList.forEach((e, index) => {
          if (!e.maCode) {
            this.$modal.msgError(`序号为${index + 1}的编码为空，请填写`);
            isCodePass = true;
            throw new Error();
          }
        });
      } catch (error) {}

      if (isCodePass) return;
      // 调后台接口
      const res = await bindAllData({
        taskId: this.queryTaskId,
        dtoList: this.codeTableList,
        typeId: this.queryBindForm.typeId,
      });
      if (res.code == 200) {
        this.$modal.msgSuccess("绑定成功");
      }
      console.log(res, "编码结果--");
    },
    //  移除
    handleRemove(index) {
      this.codeTableList.splice(index, 1);
    },

    // 防抖函数
    debounce(fn, delay) {
      let timer = null;
      return (...args) => {
        if (timer) {
          clearTimeout(timer);
        }
        // 设置新的定时器，延迟执行函数
        timer = setTimeout(() => {
          fn.apply(...args);
        }, delay);
      };
    },
  },
};
</script>
