<template>
    <div class="content">
        <div class="cart_wrap card">
            <div class="header">
                <div class="menus">
                    <div class="item" :class="{ active: tabActive == index }" v-for="(item, index) in tabAreas"
                        :key="item.id" @click="tabChange(item, index)">
                        <el-text>{{ item.label }}</el-text>
                    </div>
                </div>
                <!-- <div class="all">
                    <el-button type="link" icon="Clock">预定管理</el-button>
                </div> -->
            </div>
            <div class="tab_container">
                <div class="tab_head">
                    <el-radio-group v-model="area" @change="shopTableAjax">
                        <el-radio-button label="全部" value=""></el-radio-button>
                        <el-radio-button :label="item.name" :value="item.id" v-for="item in areaList"
                            :key="item.id"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="overflow_y" v-loading="loading">
                    <div class="tab_list">
                        <div class="item" :class="{ active: tableItemActive == index }"
                            :style="{ '--color': tableStatusList.find(val => val.type == item.status).color }"
                            v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
                            <div class="tab_title" :class="`${item.status}`">
                                <span>{{ item.name }}</span>
                                <span>0/{{ item.maxCapacity }}</span>
                            </div>
                            <div class="tab_cont">
                                <el-icon class="icon" v-if="item.status != 'using'">
                                    <CircleClose />
                                </el-icon>
                                <div class="using" v-else>
                                    <div class="t1">开台中</div>
                                    <!-- <div class="t2">
                                        <el-icon>
                                            <Timer />
                                        </el-icon>
                                        <span>{{ countTime(item.updatedAt) }}</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="empty" v-if="!tableList.length">
                        <el-empty description="空空如也~" />
                    </div>
                </div>
                <div class="pagination">
                    <el-pagination background v-model:current-page="query.page" :pager-count="5"
                        layout=" pager, jumper, total" :total="query.total"
                        @current-change="shopTableAjax"></el-pagination>
                </div>
            </div>
        </div>
        <div class="right_card card">
            <!-- 台桌统计 -->
            <countCard v-if="!slectTable.id" />
            <!-- 台桌信息 -->
            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
        </div>
    </div>
</template>

<script setup>
import { shopArea, shopTable } from "@/api/account.js";
import countCard from '@/views/table/components/countCard.vue'
import tableInfo from '@/views/table/components/tableInfo.vue'
import { ref, onMounted } from 'vue'
import { dayjs } from 'element-plus'
import tableStatusList from './statusList.js'

const tabActive = ref(0)
const tabAreas = ref([
    {
        label: '全部',
        type: '',
    },
    {
        label: '空闲',
        type: 'idle',
    },
    {
        label: '使用中',
        type: 'unsettled'
    },
    {
        label: '待清理',
        type: 'settled',
    },
    {
        label: '已预订',
        type: 'subscribe',
    }
])

const query = ref({
    page: 1,
    size: 12,
    total: 0
})
const loading = ref(false)
// 区域列表
const areaList = ref([])
// 台桌列表
const tableList = ref([])
// 所选区域
const area = ref('')
// 选择台桌索引
const tableItemActive = ref(-1)
// 选择台桌信息
const slectTable = ref('')

// 切换类型
function tabChange(item, index) {
    tabActive.value = index
    shopTableAjax()
}

// 计算当前的时间差
function countTime(t) {
    let ctime = dayjs().valueOf()
    return dayjs(ctime - t).format('H小时m分')
}

// 支付成功，刷新状态
async function paySuccess() {
    await shopTableAjax()
    slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
}

// 选择台桌
function slectTableHandle(index, item) {
    if (tableItemActive.value == index) {
        tableItemActive.value = -1
        slectTable.value = ''
    } else {
        tableItemActive.value = index
        slectTable.value = item
    }
}

// 关闭台桌
function slectTableClose() {
    tableItemActive.value = -1
    slectTable.value = ''
}

// 获取台桌区域
async function shopAreaAjax() {
    try {
        const res = await shopArea({
            page: 1,
            size: 500
        })
        areaList.value = res.records
    } catch (error) {
        console.log(error)
    }
}

// 获取台桌列表
async function shopTableAjax() {
    try {
        loading.value = true
        const res = await shopTable({
            page: query.value.page,
            size: query.value.size,
            areaId: area.value,
            tableCode: '',
            name: '',
            status: tabAreas.value[tabActive.value].type,
        })
        tableList.value = res.records
        query.value.total = +res.totalRow
        setTimeout(() => {
            loading.value = false
        }, 500)
    } catch (error) {
        loading.value = false
        console.log(error)
    }
}

onMounted(() => {
    shopAreaAjax()
    shopTableAjax()
})
</script>

<style scoped lang="scss">
.pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--el-font-size-base);
}

.cart_wrap {
    flex: 2;
}

.right_card {
    flex: 1;
    height: 100%;
    margin-left: var(--el-font-size-base);
}

.header {
    display: flex;
    height: var(--el-component-size-large);
    justify-content: space-between;
    border-bottom: 1px solid #ececec;

    .menus {
        display: flex;
        padding: 0 10px;

        .item {
            padding: 0 10px;
            display: flex;
            align-items: center;
            position: relative;

            span {
                font-size: var(--el-font-size-base);
            }

            &.active {

                &::after {
                    content: "";
                    width: 70%;
                    height: 4px;
                    border-radius: 4px;
                    position: absolute;
                    bottom: 0;
                    left: 15%;
                    background-color: var(--primary-color);
                }

                span {
                    color: var(--primary-color);
                }
            }
        }
    }

    .all {
        display: flex;
        align-items: center;
    }
}

.tab_container {
    padding: var(--el-font-size-base);

    .tab_head {
        padding-bottom: var(--el-font-size-base);
    }

    .overflow_y {
        height: calc(100vh - 220px);
        overflow-y: auto;
    }

    .tab_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 10px;

        .item {
            border-radius: 6px;
            overflow: hidden;
            padding: 2px;
            background-color: var(--color);

            &.active {
                .tab_cont {
                    position: relative;
                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-color: var(--color);
                        opacity: .2;
                        z-index: 1;
                    }
                }
            }

            &:hover {
                cursor: pointer;
            }

            .tab_title {
                height: var(--el-component-size-large);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                color: #fff;
            }

            .tab_cont {
                height: 112px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                border-radius: 4px;
                position: relative;

                .icon {
                    color: var(--color);
                    font-size: 30px;
                    transform: rotate(45deg);
                    position: relative;
                    z-index: 2
                }
            }
        }
    }
}
</style>