<template>
  <el-dialog
    :visible.sync="visible"
    title="标签补打"
    append-to-body
    width="400px"
    @close="dialogClose"
  >
    <el-form ref="form" :model="form" size="mini" label-width="110px">
      <el-form-item label="打印模板" prop="BtReportId">
        <el-select
          v-model="form.BtReportId"
          placeholder="请选择模板"
          @change="reportChange"
        >
          <el-option
            v-for="item in btTemplateList"
            :key="item.id"
            :label="item.originName"
            :value="item.id"
          >
            <el-row :gutter="10">
              <el-col :span="12">{{ item.originName }}</el-col>
              <el-col :span="12" class="text-right">{{ item.version }}</el-col>
            </el-row>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="handlePrintRepair">打印标签</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLabelPrintData } from "@/api/wms/incoming/register";
import { printLabel } from "@/api/common";
import { getAppendixTableData } from "@/api/system/appendix.js";

export default {
  components: {},
  data() {
    return {
      printData: [],
      form: {
        qrCode: undefined,
        BtReportId: "",
        BtReportUrl: "",
        BtReportName: "",
        reportType: "0",
        HicoreReportName: "",
      },
      // bartender模板列表
      btTemplateList: [],
      visible: false,
    };
  },
  created() {
    this.getTemplateList();
  },
  methods: {
    reportChange(e) {
      const fdIndex = this.btTemplateList.findIndex((ret) => ret.id === e);
      this.form.BtReportName = this.btTemplateList[fdIndex].originName;
      this.form.BtReportUrl = this.btTemplateList[fdIndex].url;
    },
    // 获取BT打印模板
    getTemplateList() {
      getAppendixTableData({
        pageNum: 1,
        pageSize: 999,
        printFlag: "1",
        filesMenuId: "1000000000000000001",
      }).then(({ data }) => {
        this.btTemplateList = data?.list ?? [];
      });
    },
    reset() {
      this.form = {
        qrCode: undefined,
        printer: "",
        BtReportId: "",
        BtReportUrl: "",
        BtReportName: "",
        reportType: "0",
      };
    },

    async handlePrintRepair() {
      if (!this.form.BtReportUrl || !this.form.BtReportName) {
        this.$message.warning("请选择bartender打印模板");
        return;
      }
      try {
        const { qrCode } = this.form;
        const labelParams = {
          qrCode,
        };
        const printDetailData = await getLabelPrintData(labelParams);
        const { data: productsDetails } = printDetailData;

        this.printData.push(...productsDetails);
        // 打印参数
        const printParams = {
          printJson: JSON.stringify(this.printData),
          fileUrl: this.form.BtReportUrl,
        };

        await printLabel(printParams); // 打印
        this.$emit("complete");
        this.printData = []; // 清空
        this.visible = false;
        this.reset();
      } catch (error) {
        console.log(error);
      }
    },
    dialogClose() {
      this.reset();
    },
  },
};
</script>
