<template>
    <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
        <div class="box">
            <div class="box_top">
                <div class="box_top_left" @click="dialogVisible = false">
                    <el-icon size="20">
                        <ArrowLeft />
                    </el-icon>
                    <div style="margin-left: 4px;">返回</div>
                </div>
                <div class="box_top_right" @click="checkRecord">
                    交班记录
                </div>
            </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.orderCount || 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;">
                                    ￥{{ formatDecimal(infoData.handAmount || 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;">
                                    ￥{{ formatDecimal(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;">
                                    ￥{{ formatDecimal(infoData.refundAmount || 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" border style="width: 100%;" height="382px">
                            <el-table-column prop="productName" label="商品名称" />
                            <el-table-column prop="skuName" label="规格名称" />
                            <el-table-column prop="num" label="商品数量" />
                            <el-table-column prop="amount" label="商品金额">
                                <template v-slot="scope">
                                    ￥{{ formatDecimal(scope.row.amount || 0) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="box_content_right">
                    <div class="top">
                        <div class="box_content_right_tiem">
                            <div class="box_content_right_tiemleft">
                                店铺：
                            </div>
                            <div class="box_content_right_tiemright">
                                {{ infoData.shopName }}
                            </div>
                        </div>
                        <div class="box_content_right_tiem">
                            <div class="box_content_right_tiemleft">
                                上岗时间：
                            </div>
                            <div class="box_content_right_tiemright">
                                {{ dayjs(infoData.loginTime || new Date()).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.handoverTime || new Date()).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.staffName || '无' }}
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="is_shop">
                            <div class="button">
                                <el-checkbox v-model="isPrint" :true-value="1" :false-value="0" border
                                    label="是否打印商品销售数据" style="width: 100%" />
                            </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>
        </div>
    </el-drawer>

</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, dayjs } from 'element-plus'
import { handoverTotal, handover, handoverData, handoverNetworkPrint } from '@/api/account.js'
import { useRouter } from "vue-router";
import { useUser } from "@/store/user.js";
import { formatDecimal } from '@/utils/index.js'
import { usePrint } from "@/store/print.js";
import { useGoods } from "@/store/goods.js";
import { staffPermission } from '@/api/user.js'

const goodsStore = useGoods();
const printStore = usePrint();
const store = useUser();
const router = useRouter();
const dialogVisible = ref(false) //交班
//详情数据
const infoData = ref({})
const loading = ref(false);

const isPrint = ref(1)

// 查看交班记录
async function checkRecord() {
    try {
        // await staffPermission('yun_xu_cha_kan_suo_you_jiao_ban_ji_lu')
        router.push('/workrecord')
    } catch (error) {
        console.log(error);
    }
}

// 开始交班
const exit = async () => {
    try {
        if (loading.value) return
        loading.value = true;
        // await staffPermission('yun_xu_jiao_ban')
        const res = await handover(isPrint.value)
        const data = await handoverData(res)
        if (printStore.deviceNoteList.length) {
            // 使用本地打印机 打印交班数据
            data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
            data.printShop = isPrint.value
            printStore.printWork(data)
        } else {
            // 使用云打印机 打印交班数据
            await handoverNetworkPrint(data.id)
        }
        logoutHandle()
    } catch (error) {
        loading.value = false;
        console.log(error);
    }
}

// 退出登录
async function logoutHandle() {
    try {
        loading.value = true;
        await store.logout()
        goodsStore.clearAllGoods()
        ElMessage.success("交班成功");
        setTimeout(() => {
            router.replace({
                name: "login",
            });
        }, 1000);
    } catch (error) {
        loading.value = false;
        console.log('退出失败');
    }
}

// 获取交班打印数据前置
const infoshopInfoqueryDutys = async () => {
    try {
        let res = await handoverTotal()
        infoData.value = res
    } catch (error) {
        console.log(error);
    }

}

defineExpose({
    show
})

function show() {
    dialogVisible.value = true
    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: 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;
                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%;
            margin-left: 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;

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

                .box_content_right_tiemleft {
                    color: #9e9e9e;
                }

            }

            .box_content_right_tiembutton {
                background: #ba5050;
                border-radius: 5px;
                color: #fff;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }

        }
    }
}

.top {
    flex: 1;
    background-color: #fff;
    padding: 10px 0;
    border-radius: 6px;
}

.footer {
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}

.is_shop {
    .button {
        flex: 1;
        margin-bottom: 10px;

        :deep(.el-checkbox.el-checkbox--large) {
            height: var(--el-component-size-large);
            background-color: #fff;
        }

        :deep(.el-checkbox__inner) {
            width: 20px;
            height: 20px;

            &::after {
                border-width: 2px;
                top: 0;
                left: 4px;
            }
        }

        :deep(.el-checkbox__label) {
            font-size: var(--el-font-size-base) !important;
        }
    }
}
</style>