<template>
    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
        <div class="box">
            <div class="box_top">
                <router-link to="/" class="box_top_left">
                    <el-icon size="20">
                        <ArrowLeft />
                    </el-icon>
                    <div style="margin-left: 10px;">返回</div>
                </router-link>
                <router-link to='/workrecord' class="box_top_right">
                    交班记录
                </router-link>
            </div>
            <div class="box_content">
                <div class="box_content_left">
                    <div class="box_content_left_top">
                        <div class="box_content_left_top_item">
                            <div class="box_content_left_top_item_top">
                                <div style="color:#ff5252; font-size: 30px;">
                                    {{ infoData.orderNum || 0 }}
                                </div>
                                <div style="margin-top: 6px; color: #666;">
                                    总订单
                                </div>
                            </div>
                            <div class="box_content_left_top_item_top">
                                <div style="color:#ff5252; font-size: 30px;">
                                    {{ infoData.amount || 0 }}
                                </div>
                                <div style="margin-top: 6px; color: #666;">
                                    营业额
                                </div>
                            </div>
                        </div>
                        <div class="box_content_left_top_item">
                            <div class="box_content_left_top_item_botton">
                                <div style=" font-size: 20px;">
                                    {{ infoData.cashAmount || 0 }}
                                </div>
                                <div style="margin-top: 6px;">
                                    现金支付
                                </div>
                                <div style="margin-top: 6px;font-size: 14px;">
                                    查看详情
                                </div>
                            </div>
                            <div class="box_content_left_top_item_botton">
                                <div style=" font-size: 20px;">
                                    {{ infoData.returnAmount || 0 }}
                                </div>
                                <div style="margin-top: 6px;">
                                    退款金额
                                </div>
                                <div style="margin-top: 6px;font-size: 14px;">
                                    查看详情
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box_content_left_bottom">
                        <el-table :data="infoData.detailList" style="width: 100%;" height="400px">
                            <el-table-column prop="productName" label="商品名称" />
                            <el-table-column prop="skuName" label="规格名称" />
                            <el-table-column prop="num" label="商品数量" />
                            <el-table-column prop="amount" label="商品金额" />
                        </el-table>
                    </div>
                </div>
                <div class="box_content_right">
                    <div class="box_content_right_tiem">
                        <div class="box_content_right_tiemleft">
                            上岗时间：
                        </div>
                        <div class="box_content_right_tiemright">
                            {{ dayjs(infoData.loginTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
                        <div class="box_content_right_tiemleft">
                            交班时间：
                        </div>
                        <div class="box_content_right_tiemright">
                            {{ dayjs(infoData.loginOutTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
                        <div class="box_content_right_tiemleft">
                            终端名称：
                        </div>
                        <div class="box_content_right_tiemright">
                            {{ infoData.equipment || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
                        <div class="box_content_right_tiemleft">
                            备用金：
                        </div>
                        <div class="box_content_right_tiemright">
                            {{ infoData.pettyCash || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiem">
                        <div class="box_content_right_tiemleft">
                            收营员：
                        </div>
                        <div class="box_content_right_tiemright">
                            {{ infoData.userName || '无' }}
                        </div>
                    </div>
                    <div class="box_content_right_tiembutton" :loading="loading" @click="exit">
                        <span v-if="!loading">交班/关班</span>
                        <span v-else>交班/关班中....</span>
                    </div>

                </div>
            </div>
        </div>
    </el-drawer>

</template>

<script setup>
import { ipcRenderer } from "electron";

import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, dayjs } from 'element-plus'
import { shopInfoqueryDuty, loginlogout, handoverData } from '@/api/work/index.js'
import useStorage from '@/utils/useStorage'
import { useRouter } from "vue-router";
import { bySubType } from "@/api/device";
import { useUser } from "@/store/user.js";
import { useSocket } from "@/store/socket.js";
const socket = useSocket();

const store = useUser();

const router = useRouter();

const dialogVisible = ref(true) //交班
//详情数据
const infoData = ref({})
const loading = ref(false);

const printList = ref([]);
const localPrintList = ref([])

// 获取打印机状态
async function bySubTypeAjax() {
    try {
        const res = await bySubType({
            shopId: store.userInfo.shopId,
            contentType: "local",
            subType: "cash",
        });
        printList.value = res;
    } catch (error) {
        console.log(error);
    }
}

// 获取本地打印机列表
function getPrintList() {
    ipcRenderer.send("getPrintList");
    ipcRenderer.on("printList", (event, arg) => {
        localPrintList.value = arg;
        // console.log(localPrintList.value);
    });
}

// 检查本地打印机是否能正常使用
function checkLocalPrint(deviceName) {
    let print = ''
    for (let item of localPrintList.value) {
        if (item.name == deviceName) {
            print = item
        }
    }

    if (!print.name) {
        return false
    } else {
        return true
    }
}

const exit = async () => {
    try {
        if (printList.value.length) {
            if (!checkLocalPrint(printList.value[0].config.deviceName)) {
                loading.value = true;
                let res = await loginlogout({
                    status: 1
                })
                // useStorage.clear()
                useStorage.del('userInfo')
                useStorage.del('token')
                ElMessage.success("交班成功");
                setTimeout(() => {
                    router.replace({
                        name: "login",
                    });
                }, 1000);
                loading.value = false;
            } else {
                // 获取交班打印小票数据
                const data = await handoverData({
                    id: infoData.value.id
                })
                data.deviceName = printList.value[0].config.deviceName
                data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
                ipcRenderer.send("printerWorkSync", JSON.stringify(data));
                // return
                // useStorage.clear()
                useStorage.del('userInfo')
                useStorage.del('token')
                useStorage.del('douyin')
                ElMessage.success("交班成功");
                setTimeout(() => {
                    router.replace({
                        name: "login",
                    });
                }, 1000);
                loading.value = false;
            }
        } else {
            loading.value = true;
            let res = await loginlogout({
                status: 1
            })
            // useStorage.clear()
            useStorage.del('userInfo')
            useStorage.del('token')
            ElMessage.success("交班成功");
            setTimeout(() => {
                router.replace({
                    name: "login",
                });
            }, 1000);
            loading.value = false;
        }
        socket.close()
    } catch (error) {
        loading.value = false;
    }
}
const infoshopInfoqueryDutys = async () => {
    try {
        let res = await shopInfoqueryDuty({
            page: 1,
            pageSize: 10
        })
        infoData.value = res
    } catch (error) {

    }

}
onMounted(() => {
    getPrintList()
    bySubTypeAjax()
    infoshopInfoqueryDutys()
})
</script>

<style scoped lang="scss">
.box {
    padding: 16px 0;
    height: 100%;

    .box_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        color: #161718;
        text-decoration: none;
        /* 取消下划线效果 */

        .box_top_left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #161718;
            text-decoration: none;
        }

        .box_top_right {
            color: #161718;
            text-decoration: none;
            /* 取消下划线效果 */
        }
    }

    .box_content {
        margin-top: 10px;
        width: 100%;
        height: 92%;
        display: flex;

        .box_content_left {
            background: #fff;
            width: 70%;
            height: 100%;
            border-radius: 6px;
            padding: 30px 20px;

            .box_content_left_top {
                display: flex;
                flex-direction: column;
                border-bottom: 1px solid #ccc;
                padding-bottom: 20px;

                .box_content_left_top_item {
                    display: flex;
                    align-items: center;

                    .box_content_left_top_item_top {
                        margin-left: 30px;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                    }

                    .box_content_left_top_item_botton:nth-child(1) {
                        margin-left: 0;

                    }

                    .box_content_left_top_item_botton {
                        position: relative;
                        margin-left: 10px;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        width: 200px;
                        padding: 20px 0;
                        background: #e0e0e0;
                        border-radius: 10px;
                    }

                    .box_content_left_top_item_botton::after {
                        position: absolute;
                        top: 0;
                        content: '';
                        display: inline-block;
                        width: 200px;
                        height: 8px;
                        background: #ff5252;
                        border-radius: 10px 10px 0 0;
                    }
                }
            }

        }

        .box_content_right {
            width: 30%;
            height: 100%;
            background: #fff;
            margin-left: 10px;
            border-radius: 6px;
            padding: 10px 12px;
            position: relative;

            .box_content_right_tiem:nth-child(1) {
                margin-top: 0;
            }

            .box_content_right_tiem {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .box_content_right_tiemleft {
                    color: #9e9e9e;
                }

            }

            .box_content_right_tiembutton {
                position: absolute;
                bottom: 10px;
                left: 5%;
                background: #ba5050;
                width: 90%;
                border-radius: 5px;
                color: #fff;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }

        }
    }
}
</style>