<template>
    <div class="live-page bgmr vh100 over-y-auto p-24">
        <section class="flex-between gap-20">
            <div>
                <h2 class="fs-16 color-000">直播账号总览</h2>
                <p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p>
            </div>
            <el-button type="primary" color="#4854ff" class="h-36 px-20" @click="openBindDialog">
                <el-icon class="mr-6">
                    <Link />
                </el-icon>
                绑定直播号
            </el-button>
        </section>

        <section class="summary-list flex bg-fff round-8 hidden mt-16">
            <div v-for="item in summaryCards" :key="item.label" class="summary-card flex-1 px-22 py-12">
                <div class="color-888 fs-12">{{ item.label }}</div>
                <div class="mt-8 fs-18 font-bold" :class="item.color">{{ item.value }}</div>
            </div>
        </section>

        <el-card class="mt-16 bg-fff round-8 account-table-wrap hidden" shadow="never">
            <SeTable :data-list="accounts" class="account-table" :total="accounts.length" :default-page-size="50"
                size="default" @update:page="handlePageChange">
                <el-table-column label="直播账号" min-width="300">
                    <template #default="{ row }">
                        <div class="flex-items-center minw-0">
                            <div class="live-icon flex-center wh-40 round-8 color-fff mr-14">
                                <el-icon>
                                    <VideoCamera />
                                </el-icon>
                            </div>
                            <div class="minw-0">
                                <div class="font-bold color-000 ellipsis">{{ row.name }}</div>
                                <div class="mt-6 fs-12 color-8aa ellipsis">@{{ row.handle }} · {{ row.lastSync }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="rooms" label="直播间数" min-width="110" />
                <el-table-column prop="likes" label="累计点赞" min-width="130">
                    <template #default="{ row }">
                        <span class="like-text font-bold">♡ {{ row.likes.toLocaleString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="cost" label="投放消耗" min-width="130">
                    <template #default="{ row }">
                        <span class="font-bold">¥{{ row.cost.toLocaleString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sales" label="成交销量" min-width="130">
                    <template #default="{ row }">
                        <span class="font-bold">{{ row.sales.toLocaleString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="成交金额" min-width="130">
                    <template #default="{ row }">
                        <span class="font-bold">¥{{ row.amount.toLocaleString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="roi" label="综合 ROI" min-width="120">
                    <template #default="{ row }">
                        <span class="color-main font-bold">{{ row.roi.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" min-width="140">
                    <template #default="{ row }">
                        <span class="status-tag px-12 py-2 round-20 font-bold fs-12"
                            :class="getStatusClass(row.status)">
                            {{ row.status }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="150">
                    <template #default="{ row }">
                        <div class="flex">
                            <el-button class="w-34 h-34 p-0" @click="openDetail(row)">
                                <el-icon>
                                    <View />
                                </el-icon>
                            </el-button>
                            <el-button v-if="row.canSync" class="w-34 h-34 p-0" @click="syncAccount(row)">
                                <el-icon>
                                    <Refresh />
                                </el-icon>
                            </el-button>
                            <el-button class="w-34 h-34 p-0" @click="removeAccount(row)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </SeTable>
        </el-card>

        <Dialog v-model="bindVisible" bg-color="#fff" width="672">
            <div class="bind-dialog bg-fff round-8 hidden">
                <div class="dialog-header flex-items-center px-24 py-18">
                    <span class="w-4 h-16 round-10 bg-main mr-12"></span>
                    <span class="font-bold color-000">绑定直播号</span>
                </div>
                <div class="px-24 py-26">
                    <div class="bind-steps flex gap-12">
                        <button v-for="item in bindSteps" :key="item.step" type="button"
                            class="bind-step flex-items-center gap-12 flex-1 px-12 border-none pointer text-left"
                            :class="{ active: bindStep === item.step }" @click="bindStep = item.step">
                            <span class="step-index flex-center wh-24 round color-000 fs-12 font-bold">{{ item.step }}</span>
                            <span class="font-bold color-000 fs-13">{{ item.title }}</span>
                        </button>
                    </div>

                    <div class="bind-auth-panel mt-20 flex-center flex-col round-6">
                        <div class="signal-icon relative flex-center mb-22" :class="`step-${bindStep}`">
                            <span class="signal-dot round"></span>
                            <span class="signal-ring signal-ring-left"></span>
                            <span class="signal-ring signal-ring-right"></span>
                        </div>
                        <div class="font-bold color-000 fs-14">{{ currentBindStep.title }}</div>
                        <div class="mt-8 fs-13 color-8aa">{{ currentBindStep.desc }}</div>
                    </div>
                </div>
                <div class="bind-footer flex justify-end gap-12 px-24 py-16">
                    <el-button @click="bindVisible = false">取消</el-button>
                    <el-button type="primary" color="#9d19ff" @click="handleBindConfirm">确认绑定</el-button>
                </div>
            </div>
        </Dialog>

        <Dialog v-model="detailVisible" bg-color="#fff" width="900">
            <div class="bg-fff round-8 hidden">
                <div class="dialog-header flex-items-center px-24 py-18">
                    <span class="w-4 h-14 round-10 bg-main mr-12"></span>
                    <span class="font-bold color-000">直播账号详情</span>
                </div>
                <div v-if="currentAccount" class="detail-panel pt-4">
                    <div class="flex-items-center mb-20 px-24 pt-24">
                        <div class="live-icon flex-center wh-44 round-8 color-fff mr-14">
                            <el-icon>
                                <VideoCamera />
                            </el-icon>
                        </div>
                        <div class="minw-0">
                            <div class="font-bold fs-16 color-000">{{ currentAccount.name }}</div>
                            <div class="fs-12 color-8aa mt-4">@{{ currentAccount.handle }} · {{ currentAccount.lastSync
                            }}</div>
                        </div>
                        <span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18"
                            :class="getStatusClass(currentAccount.status)">
                            {{ currentAccount.status }}
                        </span>
                    </div>

                    <div class="detail-metrics flex gap-12 mb-20 px-24">
                        <div v-for="item in detailItems" :key="item.label" class="detail-metric flex-1 p-16 round-6">
                            <div class="fs-12 color-8aa">{{ item.label }}</div>
                            <div class="mt-8 font-bold color-000 fs-20">{{ item.value }}</div>
                        </div>
                    </div>

                    <div class="font-bold color-000 mb-12 px-24">直播间销量与销售额</div>
                    <div class="px-24 pb-20">
                        <SeTable :data-list="currentAccount.roomsData" :total="currentAccount.roomsData.length"
                            :default-page-size="10" size="default">
                            <el-table-column prop="room" label="直播间" min-width="170" />
                            <el-table-column prop="host" label="主播" min-width="120" />
                            <el-table-column prop="sales" label="销量" min-width="100" />
                            <el-table-column prop="amount" label="销售额" min-width="130">
                                <template #default="{ row }">
                                    <span class="font-bold">¥{{ row.amount.toLocaleString() }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="roi" label="ROI" min-width="100">
                                <template #default="{ row }">
                                    <span class="color-main font-bold">{{ row.roi.toFixed(2) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" min-width="120">
                                <template #default="{ row }">
                                    <span class="room-status px-10 py-2 round-20 font-bold fs-12"
                                        :class="row.status === '直播中' ? 'live' : 'ended'">
                                        {{ row.status }}
                                    </span>
                                </template>
                            </el-table-column>
                        </SeTable>
                    </div>
                </div>
                <div class="dialog-footer flex justify-end px-24 py-16">
                    <el-button type="primary" class="w-64" @click="detailVisible = false">关闭</el-button>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { Delete, Link, Refresh, VideoCamera, View } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

type LiveStatus = '已绑定' | '授权即将到期' | '首次同步中';
type LiveAccount = {
    id: number;
    name: string;
    handle: string;
    lastSync: string;
    rooms: number;
    likes: number;
    cost: number;
    sales: number;
    amount: number;
    roi: number;
    status: LiveStatus;
    canSync: boolean;
    roomsData: LiveRoom[];
};
type LiveRoom = {
    room: string;
    host: string;
    sales: number;
    amount: number;
    roi: number;
    status: '直播中' | '已结束';
};

const bindVisible = ref(false);
const detailVisible = ref(false);
const currentAccount = ref<LiveAccount>();
const bindStep = ref(1);
const bindForm = reactive({
    name: '',
    handle: '',
    status: '已绑定' as LiveStatus,
});
const bindSteps = [
    { step: 1, title: '抖音扫码授权', desc: '授权完成后自动同步直播间账号' },
    { step: 2, title: '千川账户授权', desc: '完成千川授权后同步投放消耗数据' },
    { step: 3, title: '同步直播数据', desc: '同步完成后可在列表查看直播账号' },
];
const accounts = ref<LiveAccount[]>([
    {
        id: 1,
        name: '梦畅美妆旗舰店',
        handle: 'MCBeauty_2026',
        lastSync: '今天 10:26',
        rooms: 3,
        likes: 286400,
        cost: 82640,
        sales: 2158,
        amount: 368420,
        roi: 4.46,
        status: '已绑定',
        canSync: false,
        roomsData: [
            { room: '秋季通勤穿搭', host: '梁清淇', sales: 498, amount: 88720, roi: 4.72, status: '直播中' },
            { room: '显瘦牛仔合集', host: '徐云卿', sales: 624, amount: 116800, roi: 4.96, status: '已结束' },
            { room: '晚间精华专场', host: '苏沐', sales: 1036, amount: 162900, roi: 4.28, status: '已结束' },
        ],
    },
    {
        id: 2,
        name: '梦畅服饰直播号',
        handle: 'MCFashion_Live',
        lastSync: '今天 10:24',
        rooms: 2,
        likes: 184600,
        cost: 59320,
        sales: 1462,
        amount: 286900,
        roi: 4.84,
        status: '已绑定',
        canSync: false,
        roomsData: [
            { room: '秋季通勤穿搭', host: '梁清淇', sales: 498, amount: 88720, roi: 4.72, status: '直播中' },
            { room: '显瘦牛仔合集', host: '徐云卿', sales: 624, amount: 116800, roi: 4.96, status: '已结束' },
        ],
    },
    {
        id: 3,
        name: '梦畅家居好物',
        handle: 'MCHome_Select',
        lastSync: '昨天 23:58',
        rooms: 1,
        likes: 93200,
        cost: 31860,
        sales: 708,
        amount: 128760,
        roi: 4.04,
        status: '授权即将到期',
        canSync: true,
        roomsData: [
            { room: '小户型收纳节', host: '周宁', sales: 708, amount: 128760, roi: 4.04, status: '已结束' },
        ],
    },
    {
        id: 4,
        name: '梦畅个护精选',
        handle: 'MCCare_Select',
        lastSync: '等待首次同步',
        rooms: 1,
        likes: 0,
        cost: 0,
        sales: 0,
        amount: 0,
        roi: 0,
        status: '首次同步中',
        canSync: true,
        roomsData: [
            { room: '个护新品首场', host: '待分配', sales: 0, amount: 0, roi: 0, status: '直播中' },
        ],
    },
]);

const statusMeta: Record<LiveStatus, { className: string }> = {
    已绑定: { className: 'success' },
    授权即将到期: { className: 'warning' },
    首次同步中: { className: 'syncing' },
};
const getStatusClass = (status: LiveStatus) => statusMeta[status].className;
const summaryCards = computed(() => [
    { label: '正常同步', value: accounts.value.filter((item) => item.status === '已绑定').length, color: 'color-green' },
    { label: '首次同步中', value: accounts.value.filter((item) => item.status === '首次同步中').length, color: 'color-main' },
    { label: '授权待处理', value: accounts.value.filter((item) => item.status === '授权即将到期').length, color: 'color-orange' },
    { label: '当前直播中', value: accounts.value.filter((item) => item.rooms > 0).length, color: 'color-red' },
]);
const detailItems = computed(() => {
    const item = currentAccount.value;
    if (!item) return [];

    return [
        { label: '成交销量', value: item.sales.toLocaleString() },
        { label: '销售额', value: `¥${item.amount.toLocaleString()}` },
        { label: '累计点赞', value: item.likes.toLocaleString() },
        { label: '投放消耗', value: `¥${item.cost.toLocaleString()}` },
    ];
});
const currentBindStep = computed(() => bindSteps.find((item) => item.step === bindStep.value) || bindSteps[0]);

const openBindDialog = () => {
    bindStep.value = 1;
    bindVisible.value = true;
};
const openDetail = (row: LiveAccount) => {
    currentAccount.value = row;
    detailVisible.value = true;
};
const syncAccount = (row: LiveAccount) => {
    row.status = '已绑定';
    row.canSync = false;
    row.lastSync = '刚刚同步';
    ElMessage.success(`${row.name} 已同步`);
};
const removeAccount = async (row: LiveAccount) => {
    try {
        await ElMessageBox.confirm(`确认删除直播号「${row.name}」吗？`, '删除确认', { type: 'warning' });
        accounts.value = accounts.value.filter((item) => item.id !== row.id);
        ElMessage.success('已删除直播号');
    } catch {
        ElMessage.info('已取消删除');
    }
};
const confirmBind = () => {
    const name = bindForm.name.trim() || '新绑定直播号';
    const handle = bindForm.handle.trim() || `Live_${Date.now().toString().slice(-4)}`;
    accounts.value.unshift({
        id: Date.now(),
        name,
        handle,
        lastSync: bindForm.status === '首次同步中' ? '等待首次同步' : '刚刚绑定',
        rooms: 0,
        likes: 0,
        cost: 0,
        sales: 0,
        amount: 0,
        roi: 0,
        status: bindForm.status,
        canSync: bindForm.status !== '已绑定',
        roomsData: [],
    });
    bindVisible.value = false;
    bindForm.name = '';
    bindForm.handle = '';
    bindForm.status = '已绑定';
    ElMessage.success('直播号绑定成功');
};
const handleBindConfirm = () => {
    if (bindStep.value < 3) {
        bindStep.value += 1;
        return;
    }
    confirmBind();
};

const handlePageChange = () => {
    // 当前为静态数据，预留分页事件用于后续接接口。
};

</script>

<style scoped lang="scss">
.page-header {
    border-bottom: 1px solid #dfe7f2;
}

.summary-list {
    border: 1px solid #dfe7f2;
}

.summary-card {
    border-right: 1px solid #edf0f5;

    &:last-child {
        border-right: none;
    }
}

.account-table-wrap {
    border: 1px solid #dfe7f2;
}

.account-table {
    :deep(.el-table__header th) {
        background: #f5f5f5;
        color: #888;
        padding: 12px 0;
    }

    :deep(.el-table__row) {
        height: 74px;
    }
}

.live-icon {
    flex-shrink: 0;
    background: linear-gradient(135deg, #9d19ff, #7c3aed);
}

.status-tag {
    display: inline-block;

    &.success {
        color: #00875a;
        background: #e7fbf1;
    }

    &.warning {
        color: #d97706;
        background: #fff7e6;
    }

    &.syncing {
        color: #8a22fd;
        background: #fbf0ff;
    }
}

.detail-metrics {
    min-width: 0;
}

.detail-metric {
    border: 1px solid #dfe7f2;
}

.room-status {
    display: inline-block;

    &.live {
        color: #00875a;
        background: #e7fbf1;
    }

    &.ended {
        color: #48607f;
        background: #f1f5f9;
    }
}

.minw-0 {
    min-width: 0;
}

.color-green {
    color: #00a86b;
}

.color-orange {
    color: #f59e0b;
}

.color-red,
.like-text {
    color: #ff0055;
}

.dialog-header,
.dialog-footer,
.bind-footer {
    border-top: 1px solid #edf0f5;
}

.dialog-header {
    border-top: none;
    border-bottom: 1px solid #edf0f5;
}

.bind-dialog {
    box-shadow: 0 16px 45px rgba(15, 23, 42, .18);
}

.bind-step {
    height: 74px;
    background: #fff;
    border: 1px solid #dfe7f2 !important;
    border-radius: 6px;

    &.active {
        background: #fbf5ff;
        border-color: #d58cff !important;
    }

    &.active .step-index {
        color: #fff;
        background: #9d19ff;
    }
}

.step-index {
    flex-shrink: 0;
    background: #edf3fb;
    color: #71829b;
}

.bind-auth-panel {
    height: 212px;
    background: #f8fbff;
    border: 1px solid #dfe7f2;
}

.signal-icon {
    width: 116px;
    height: 84px;
    color: #0f1b33;
}

.signal-dot {
    width: 16px;
    height: 16px;
    background: currentColor;
    box-shadow: 0 0 0 12px rgba(15, 27, 51, .1);
}

.signal-ring {
    position: absolute;
    top: 4px;
    width: 38px;
    height: 76px;
    border-color: currentColor;
    border-style: solid;
}

.signal-ring-left {
    left: 0;
    border-width: 8px 0 8px 8px;
    border-radius: 42px 0 0 42px;

    &::after {
        right: -14px;
        border-width: 7px 0 7px 7px;
        border-radius: 30px 0 0 30px;
    }
}

.signal-ring-right {
    right: 0;
    border-width: 8px 8px 8px 0;
    border-radius: 0 42px 42px 0;

    &::after {
        left: -14px;
        border-width: 7px 7px 7px 0;
        border-radius: 0 30px 30px 0;
    }
}

.signal-ring-left::after,
.signal-ring-right::after {
    content: '';
    position: absolute;
    top: 14px;
    width: 24px;
    height: 48px;
    border-color: currentColor;
    border-style: solid;
}

.text-left {
    text-align: left;
}
</style>
