<template>
    <el-dialog
        :model-value="printCodeVisible"
        title="打印条码"
        width="1160px"
        @close="close"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :distinguish-cancel-and-close="true"
        destroy-on-close
        :z-index="20"
    >
        <ProTable
            ref="printCodeTable"
            :formData="datas.printCodeFormData"
            :columns="datas.printCodeColumns"
            :request-api="getListApi"
            :init-param="datas.printCodeRuleFormData"
            @selectionChange="selectionChange"
            :orgCode="datas.printCodeRuleFormData.orgCode"
            :isBoxClass="false"
        >
        </ProTable>
        <template #footer>
            <!-- 全部打印 -->
            <div style="display: flex; align-items: center; justify-content: space-between">
                <el-button type="primary" v-for="(item, index) in PRINT_CODE_BTNS" :key="index" @click="printCode(item)">{{
                    item
                }}</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 打印条码 -->
    <canvas id="barcode" style="width: 100%; height: 100%" v-show="false"></canvas>
    <canvas id="barcode1" style="width: 100%; height: 100%" v-show="false"></canvas>
    <div id="barcode1_box">
        <canvas id="barcode1" style="width: 100%; height: 100%" v-show="false"></canvas>
    </div>
</template>

<script setup lang="ts" name="printCode">
import { sequenceCodePrint } from "@/utils/print/barCode/sequenceCodePrint.js";
//深拷贝方法
import { cloneDeep } from "lodash-es";
// 打印弹窗搜索条件配置项
import { PRINT_CODE_FORM_DATA, PRINT_CODE_RULE_FORM_DATA, PRINT_CODE_FORM_COLUMNS } from "../../constant/printCode/index";
// 打印条码页面打印按钮
import { PRINT_CODE_BTNS } from "../../constant/list/printBtns";
//表格TS
import { ProTableInstance } from "@/components/ProTable/interface";
const printCodeTable = ref<ProTableInstance>();
interface IProps {
    printCodeVisible: boolean; //弹窗显示隐藏控制
    generateRecordId: number; //获取数据用的id
    handleClosePrintCode?: () => void; //关闭弹窗
    getListApi?: any; //数据接口
    orgCode: number;
}
const props = defineProps<IProps>();
const emits = defineEmits<{
    (e: "handleClosePrintCode", result: Record<string, any>): void;
}>();

const datas = reactive<any>({
    selectionList: [], //选中表格的行
    printCodeFormData: cloneDeep(PRINT_CODE_FORM_DATA), //打印条码弹窗搜索配置项
    printCodeRuleFormData: cloneDeep(PRINT_CODE_RULE_FORM_DATA), //打印条码弹窗搜索结果
    printCodeColumns: cloneDeep(PRINT_CODE_FORM_COLUMNS) //打印条码弹窗表格配置项
});
const closeInitData = () => {
    datas.printCodeFormData = cloneDeep(PRINT_CODE_FORM_DATA); //打印条码弹窗搜索配置项
    datas.printCodeRuleFormData = cloneDeep(PRINT_CODE_RULE_FORM_DATA); //打印条码弹窗搜索结果
    datas.selectionList = []; //清空选择的数据
};
//打印条码关闭弹窗需要做的事情
const close = () => {
    closeInitData();
    //通知父组件改变弹窗状态
    emits("handleClosePrintCode", {
        visible: false
    });
};

//表格选择事件
const selectionChange = (selection: any) => {
    datas.selectionList = selection;
};

//打印按钮事件
const printCode = (item: any) => {
    console.log(item);
    nextTick(() => {
        setTimeout(() => {
            sequenceCodePrint();
        }, 200);
    });
};
watch(
    () => props.generateRecordId,
    newValue => {
        datas.printCodeRuleFormData.generateRecordId = newValue;
    },
    {
        immediate: true,
        deep: true
    }
);
watch(
    () => props.orgCode,
    newValue => {
        datas.printCodeRuleFormData.orgCode = newValue;
        console.log("组织ID", newValue);
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

<style scoped></style>
