<template>
    <div class="status-report flex-col gap-12">
        <el-card class="report-card round-8" shadow="never">
            <div class="top-line flex-between gap-16">
                <div class="flex-items-center gap-26 flex-wrap">
                    <button v-for="item in dataTabs" :key="item" class="text-tab pointer border-none bg-none font-bold" :class="{ active: dataTab === item }" @click="dataTab = item">
                        {{ item }}
                    </button>
                </div>
                <div class="date-filter flex-items-center gap-8">
                    <span>计划搭建时间</span>
                    <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="2025/03/31" end-placeholder="2025/04/14" />
                </div>
            </div>

            <div class="flex-items-center justify-start gap-16 pt-14">
                <div class="flex-items-center gap-26 flex-wrap">
                    <button v-for="item in platforms" :key="item.value" class="platform-item flex-items-center gap-6 pointer border-none bg-none" :class="{ active: platform === item.value }" @click="platform = item.value">
                        <span class="w-10 h-10 round-2" :style="{ backgroundColor: item.color }"></span>
                        {{ item.label }}
                    </button>
                </div>
                <el-select v-model="department" class="w-180" placeholder="请选择部门">
                    <el-option label="抖音投放" value="抖音投放" />
                    <el-option label="测试指定员工可见-部门" value="测试指定员工可见-部门" />
                    <el-option label="未绑定" value="未绑定" />
                </el-select>
            </div>
        </el-card>

        <el-card class="report-card chart-card round-8" shadow="never">
            <div class="flex-between gap-16">
                <el-segmented v-model="statusType" :options="statusTabs" />
                <div class="flex-items-center gap-26 flex-wrap">
                    <span v-for="item in legendItems" :key="item.name" class="flex-items-center gap-6">
                        <span class="legend-dot w-10 h-10 round" :style="{ borderColor: item.color }"></span>{{ item.name }}
                    </span>
                </div>
            </div>
            <div class="h-250 mt-10">
                <v-chart class="w-full h-full" :option="lineOption" autoresize />
            </div>
        </el-card>

        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between gap-16 pb-12">
                <span class="font-bold">详细数据</span>
                <el-button class="w-34 p-0" @click="settingVisible = !settingVisible">☷</el-button>
            </div>
            <el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
            <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
                <el-table-column prop="department" label="部门" min-width="260">
                    <template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{ row.department }}</span></template>
                </el-table-column>
                <el-table-column prop="built" label="搭建计划总数 ↑↓" align="center" />
                <el-table-column prop="running" label="投放中 ↑↓" align="center">
                    <template #default="{ row }"><span class="color-green font-bold">{{ row.running }}</span></template>
                </el-table-column>
                <el-table-column prop="notStarted" label="未投放 ⓘ ↑↓" align="center" />
                <el-table-column prop="ended" label="已终止 ↑↓" align="center" />
                <el-table-column prop="finished" label="已完成 ↑↓" align="center" />
                <el-table-column prop="deleted" label="已删除 ↑↓" align="center">
                    <template #default="{ row }"><span class="color-8aa">{{ row.deleted }}</span></template>
                </el-table-column>
            </SeTable>
            <div class="scroll-bar mt-14"></div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';

use([CanvasRenderer, LineChart, GridComponent, LegendComponent, TooltipComponent]);

const dataTab = ref('部门数据');
const platform = ref('ad');
const department = ref('');
const range = ref<[Date, Date] | ''>('');
const statusType = ref('搭建计划总数');
const settingVisible = ref(false);

const dataTabs = ['部门数据', '分组数据', '个人数据', '直播间数据', '广告主明细数据'];
const statusTabs = ['搭建计划总数', '投放中', '未投放'];
const platforms = [
    { label: '巨量广告', value: 'ad', color: '#7c3aed' },
    { label: '巨量千川', value: 'qianchuan', color: '#2d8cff' },
];
const legendItems = [
    { name: '未绑定', color: '#2d8cff' },
    { name: '测试指定员工可见-部门', color: '#00b578' },
    { name: '抖音投放', color: '#ff9800' },
];
const dates = ['2025-03-31', '2025-04-02', '2025-04-04', '2025-04-06', '2025-04-08', '2025-04-10', '2025-04-12', '2025-04-14'];
const tableRows = [
    { department: '总计', built: 18, running: 5, notStarted: 8, ended: 3, finished: 2, deleted: 0 },
    { department: '抖音投放', built: 8, running: 3, notStarted: 3, ended: 1, finished: 1, deleted: 0, link: true },
    { department: '测试指定员工可见-部门', built: 6, running: 2, notStarted: 3, ended: 1, finished: 0, deleted: 0, link: true },
    { department: '未绑定', built: 4, running: 0, notStarted: 2, ended: 1, finished: 1, deleted: 0, link: true },
];

const lineOption = computed(() => ({
    color: legendItems.map((item) => item.color),
    tooltip: { trigger: 'axis' },
    legend: { show: false },
    grid: { left: 38, right: 24, top: 26, bottom: 34 },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dates,
        axisLine: { lineStyle: { color: '#e8eef6' } },
        axisLabel: { color: '#8aa0bf' },
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: statusType.value === '搭建计划总数' ? 1 : 5,
        splitLine: { lineStyle: { color: '#edf3fb', type: 'dashed' } },
        axisLabel: { color: '#8aa0bf' },
    },
    series: [
        { name: '未绑定', type: 'line', smooth: true, data: [0, 0, 0, 0, 0, 0, 0, 0], symbolSize: 8 },
        { name: '测试指定员工可见-部门', type: 'line', smooth: true, data: [0, 0, 0, 0, 0, 0, 0, 0], symbolSize: 8 },
        { name: '抖音投放', type: 'line', smooth: true, data: [0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05], symbolSize: 8 },
    ],
}));
</script>

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

.top-line {
    border-bottom: 1px solid #edf0f5;
}

.text-tab {
    height: 38px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: #3f5574;

    &.active {
        color: rgba(var(--main-color), 1);
        border-bottom-color: rgba(var(--main-color), 1);
    }
}

.date-filter {
    color: #607086;
}

.platform-item {
    color: #3f5574;

    &.active {
        color: rgba(var(--main-color), 1);
    }
}

.chart-card {
    min-height: 310px;
}

.legend-dot {
    border: 2px solid;
}

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

.link-text {
    color: rgba(var(--main-color), 1);
}

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

.color-8aa {
    color: #8aa0bf;
}

.scroll-bar {
    height: 5px;
    border-radius: 999px;
    background: #dfe7f2;
}
</style>
