<template>
  <el-dialog
    :visible.sync="visible"
    title="物料拆批"
    append-to-body
    width="400px"
    @close="dialogClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="110px"
    >
      <el-form-item label="当前数量" prop="inQty">
        <el-input v-model="form.inQty" disabled />
      </el-form-item>
      <el-form-item label="拆分后数量" prop="remainderQty">
        <el-input v-model="form.remainderQty" disabled />
      </el-form-item>
      <el-form-item label="拆分数量" prop="splitQty">
        <el-input
          v-model="form.splitQty"
          oninput="value=value.replace(/^\D*(\d*(?:.\d{0,8})?).*$/g, '$1')"
          placeholder="请输入拆分数量"
          @change="QtyChange"
        />
      </el-form-item>
      <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="ensureSplit"
        >确认拆分/打印标签</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { createSplit } from "@/api/wms/inLibrary/materialDemolitionBatch";
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: [],
      printStyle: `
        <style>
          table {
            width:100%;
            margin: 0 auto;
            border: 1px solid #000000;
            border-collapse: collapse;
            page-break-after:always;
            font-size: 12px;
            table-layout: fixed;
          }

          th, td {
            border: 1px solid #000000;
          }
          td {
            width:100%;
            word-break:keep-all;/* 不换行 */
            white-space:nowrap;/* 不换行 */
            overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;
          }
        </style>
      `,
      form: {
        id: undefined,
        inQty: undefined,
        remainderQty: undefined,
        splitQty: undefined,
        qrCode: undefined,
        printer: "Fabulous F-BP43i",
        BtReportId: "",
        BtReportUrl: "",
        BtReportName: "",
        reportType: "0",
      },
      nextIndex: 0,
      nextPrintState: false,
      // bartender模板列表
      btTemplateList: [],
      rules: {
        splitQty: [
          {
            required: true,
            message: "请输入拆分数量",
            trigger: "blur",
          },
        ],
      },
      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 = {
        id: undefined,
        materialLots: undefined,
        inQty: undefined,
        splitQty: undefined,
        remainderQty: undefined,
        qrCode: undefined,
        printer: "Fabulous F-BP43i",
        BtReportId: "",
        BtReportUrl: "",
        BtReportName: "",
        reportType: "0",
      };
    },
    // 拆批/打印标签
    async ensureSplit() {
      if (!this.form.BtReportUrl || !this.form.BtReportName) {
        this.$message.warning("请选择bartender打印模板");
        return;
      }
      try {
        const result = await createSplit(this.form);
        this.$modal.msgSuccess("物料拆分成功,正在打印标签...");
        const { data: qrCode } = result;
        const params = {
          qrCode,
        };
        // 获取打印数据
        const printDetailData = await getLabelPrintData(params);
        const { data: productsDetails } = printDetailData;
        this.printData.push(...productsDetails);
        // 打印参数
        const printParams = {
          printJson: JSON.stringify(this.printData),
          fileUrl: this.form.BtReportUrl,
        };
        await printLabel(printParams); // 打印
        this.printData = [];
        this.$emit("complete");
        this.visible = false;
        this.reset();
      } catch (error) {
        console.log(error);
      }
    },
    // 小数点处理
    getHandleNumber(val) {
      return Math.round(parseFloat(val) * 100000000) / 100000000;
    },
    QtyChange(v) {
      this.form.remainderQty = this.getHandleNumber(this.form.inQty - v);
    },
    dialogClose() {
      this.form.splitQty = undefined;
      this.form.remainderQty = undefined;
      this.reset();
    },
  },
};
</script>
<style></style>
