<script setup>
import { useUserStore } from "@/store/user.js";
import { onMounted, onUnmounted, ref } from "vue";
import { info, logout } from "@/api/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";
import { usePrintStore } from "@/store/print.js";
import { printTicket } from "@/utils/EscPos.js";

const userStore = useUserStore();
const printStore = usePrintStore();

const merInfo = ref({});
merInfo.value = userStore.userInfo;

const router = useRouter();
const onLogout = () => {
    userStore.setUserInfo({});
    userStore.setToken("");
    router.push("/login");
};

const onRefresh = () => {
    window.location.reload();
};

const dialogVisible = ref(false); //是否显示重新连接

// 连接打印机
const connect = () => {
    console.log("连接打印机");
    uni.getEnv((res) => {
        if (res.h5) ElMessage.error("请使用APP连接打印机");
        else {
            printStore.setConnect(false);
            printStore.setPrintAddress('');
            dialogVisible.value = false;
            uni.postMessage({
                data: {
                    type: "connect",
                },
            });
        }
    });
};

let isPrint = false; //是否正在打印小票
// 预打印
const printReceipt = (content = "") => {
    console.log("预打印");
    console.log(printTicket(content, true));
    if (isPrint) return;
    isPrint = true;
    uni.getEnv((res) => {
        if (res.h5) {
            ElMessage.error("请使用APP打印小票");
            isPrint = false;
        } else {
            APPprint(content);
            setTimeout(() => {
                isPrint = false;
            }, 4000);
        }
    });
};

// 小程序订单-预打印
const letPrintReceipt = (content = "") => {
    console.log("预打印");
    let str = printTicket(content, true)
    console.log(str);
    if (isPrint) return;
    isPrint = true;
    uni.getEnv((res) => {
        if (res.h5) {
            ElMessage.error("请使用APP打印小票");
            isPrint = false;
        } else {
            APPprint(str);
            setTimeout(() => {
                isPrint = false;
            }, 4000);
        }
    });
};



// APP打印
const APPprint = (content = "") => {
    let str = "";
    if (content === "") {
        str = printTicket({}, true); //打印自检
        console.log(str);
    } else str = content;
    uni.postMessage({
        data: {
            type: "print",
            content: str,
        },
    });
};

onMounted(() => {
    mitt.on("printReceipt", printReceipt);
    mitt.on("letPrintReceipt", letPrintReceipt);
    // 监听消息
    window.addEventListener(
        "message",
        function (event) {
            // alert(JSON.stringify(event.data));
            if (event.data.type === "connect") {
                let str = event.data.data.address;
                printStore.setConnect(true);
                printStore.setPrintAddress(str);
                ElMessage.success("已连接打印机T58(" + str + ")");
            }
        },
        false
    );
});

onUnmounted(() => {
    mitt.off("printReceipt", printReceipt);
    mitt.off("letPrintReceipt", letPrintReceipt);
});
</script>

<template>
    <div class="my-card">
        <div class="card-header">
            <div style="width: 4.5rem">
                <el-image style="height: 2.5rem; width: 2.5rem; margin: 0 auto"
                    src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/12c93202404101530591311.png"></el-image>
            </div>
            <div class="card-title">泸优采收银系统</div>
            <div style="
          margin-left: 1rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
        ">
                <el-icon color="#fff" size="18" @click="onRefresh">
                    <Refresh />
                </el-icon>
            </div>
        </div>
        <div class="card-body">
            <div style="margin-right: 1rem">
                <el-button @click="mitt.emit('letPrintReceipt')" type="primary">
                    <span>打印自检</span>
                </el-button>
            </div>
            <div style="margin-right: 1rem" v-if="!printStore.is_connect || !printStore.printAddress">
                <el-button @click="connect" type="warning">
                    <span>点击自动连接打印机</span>
                </el-button>
            </div>
            <div style="margin-right: 1rem;font-size: 0.9rem;" v-else @click="dialogVisible = true">
                <div>已连接打印机T58</div>
                <div style="font-size: 0.7rem;color: #ccc;">({{ printStore.printAddress }})</div>
            </div>
            <el-dialog v-model="dialogVisible" title="提示" width="500">
                <span>打印机已连接，是否重新连接</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="connect"> 重新连接 </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dropdown trigger="hover">
                <div class="el-dropdown-link">
                    <el-avatar :src="merInfo.avatar" icon="user-filled" />
                    <div class="info">
                        <div>
                            {{ merInfo.name }}
                        </div>
                        <div>({{ merInfo.role_name }})</div>
                    </div>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="onLogout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped lang="scss">
.my-card {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-header {
        display: flex;
        align-items: center;

        .card-title {
            font-size: 1.6rem;
        }
    }

    .card-body {
        display: flex;
        align-items: center;
    }
}

.el-dropdown-link {
    width: auto;
    display: flex;
    color: #fff;
    align-items: center;

    .info {
        margin: 0 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
    }
}

.el-dropdown {
    border: none;
}
</style>
