<template>
    <div class="analysis-panel bg-fff round-8 p-24">
        <div class="flex-items-center gap-34 page-tabs pb-14">
            <button v-for="item in dataTabs" :key="item" class="text-tab border-none bg-none font-bold pointer" :class="{ active: dataTab === item }" @click="dataTab = item">
                {{ item }}
            </button>
        </div>

        <div class="flex-between flex-wrap gap-14 py-24">
            <div class="flex-items-center gap-12 flex-wrap">
                <el-segmented v-model="contentType" :options="contentTabs" />
                <el-select v-model="department" class="w-160" placeholder="请选择部门">
                    <el-option v-for="item in departments" :key="item" :label="item" :value="item" />
                </el-select>
            </div>
            <div class="flex-items-center gap-12">
                <el-select v-model="summaryType" class="w-90">
                    <el-option label="汇总" value="汇总" />
                    <el-option label="明细" value="明细" />
                </el-select>
                <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
            </div>
        </div>

        <el-card class="report-card round-8" shadow="never">
            <div class="flex-between chart-tabs pb-10">
                <div class="flex-items-center gap-26">
                    <button v-for="item in chartTabs" :key="item" class="text-tab small border-none bg-none font-bold pointer" :class="{ active: chartTab === item }" @click="chartTab = item">
                        {{ item }}
                    </button>
                </div>
                <el-button link type="primary" @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起' }}</el-button>
            </div>
            <div v-show="!collapsed" class="pt-16">
                <div class="flex-between gap-12 mb-16">
                    <div class="flex-items-center gap-10">
                        <el-segmented v-model="metric" :options="metricTabs" />
                        <el-select v-model="rankLimit" class="w-200">
                            <el-option label="显示top5" value="top5" />
                            <el-option label="显示top10" value="top10" />
                        </el-select>
                    </div>
                    <div class="flex-items-center gap-18 flex-wrap">
                        <span v-for="item in legendItems" :key="item.name" class="flex-items-center gap-6 fs-12">
                            <span class="w-8 h-8 round" :style="{ backgroundColor: item.color }"></span>{{ item.name }}
                        </span>
                    </div>
                </div>
                <div class="chart-box round-8">
                    <v-chart class="w-full h-full" :option="lineOption" autoresize />
                </div>
            </div>
        </el-card>

        <div class="flex-between mt-30 mb-14">
            <span class="font-bold fs-16">详细数据</span>
            <div class="flex-items-center gap-8">
                <el-button @click="exportData">导出数据</el-button>
                <el-button class="w-34 p-0" @click="fieldVisible = !fieldVisible">☷</el-button>
            </div>
        </div>
        <el-alert v-if="fieldVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
        <SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10" row-key="department">
            <el-table-column prop="date" label="数据时间" min-width="190" />
            <el-table-column prop="department" label="部门名称" min-width="160">
                <template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
            </el-table-column>
            <el-table-column prop="uploadPeople" label="上传人数 ⓘ ↑↓" align="center" />
            <el-table-column prop="uploadCount" label="上传次数 ↑↓" align="center" />
            <el-table-column prop="downloadCount" label="下载次数 ↑↓" align="center" />
            <el-table-column prop="downloadPeople" label="被下载人数 ↑↓" align="center" />
            <el-table-column prop="pushPeople" label="被推送人数 ↑↓" align="center" />
            <el-table-column prop="copyPeople" label="被复制剪映人数 ↑↓" align="center" />
            <el-table-column prop="usage" label="作品被使用率 ⓘ ↑↓" align="center" />
            <el-table-column prop="viral" label="爆款视频数 ↑↓" align="center">
                <template #default="{ row }"><span class="color-8aa">{{ row.viral }}</span></template>
            </el-table-column>
        </SeTable>
    </div>
</template>

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

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

const dataTab = ref('部门数据');
const contentType = ref('全部');
const department = ref('');
const summaryType = ref('汇总');
const range = ref<[Date, Date] | ''>('');
const chartTab = ref('时间趋势');
const metric = ref('上传');
const rankLimit = ref('top5');
const collapsed = ref(false);
const fieldVisible = ref(false);

const dataTabs = ['部门数据', '分组数据', '个人数据'];
const contentTabs = ['全部', '成片', '素材', '第三方', '图片', '音频'];
const chartTabs = ['时间趋势', '占比分析'];
const metricTabs = ['上传', '下载', '复制到剪映'];
const departments = ['默认部门', 'B部门', 'Ian部门1', '7-20部门2', 'A部门'];
const legendItems = [
    { name: '默认部门', color: '#6366f1' },
    { name: 'B部门', color: '#10b981' },
    { name: 'Ian部门1', color: '#f59e0b' },
    { name: '7-20部门2', color: '#ef4444' },
    { name: 'A部门', color: '#06b6d4' },
];
const dates = ['2025-04-06', '2025-04-08', '2025-04-10', '2025-04-12', '2025-04-14', '2025-04-16', '2025-04-18', '2025-04-20'];
const tableRows = [
    { date: '2025-04-06-2025-04-21', department: '默认部门', uploadPeople: 1, uploadCount: 47, downloadCount: 120, downloadPeople: 22, pushPeople: 8, copyPeople: 12, usage: '59.57', viral: 0 },
    { date: '2025-04-06-2025-04-21', department: 'B部门', uploadPeople: 1, uploadCount: 6, downloadCount: 1, downloadPeople: 0, pushPeople: 1, copyPeople: 1, usage: '33.33', viral: 0 },
    { date: '2025-04-06-2025-04-21', department: 'Ian部门1', uploadPeople: 1, uploadCount: 3, downloadCount: 0, downloadPeople: 0, pushPeople: 0, copyPeople: 0, usage: '0.00', viral: 0 },
    { date: '2025-04-06-2025-04-21', department: '7-20部门2', uploadPeople: 1, uploadCount: 3, downloadCount: 0, downloadPeople: 0, pushPeople: 0, copyPeople: 0, usage: '0.00', viral: 0 },
    { date: '2025-04-06-2025-04-21', department: 'A部门', uploadPeople: 0, uploadCount: 0, downloadCount: 0, downloadPeople: 0, pushPeople: 0, copyPeople: 0, usage: '0.00', viral: 0 },
];

const lineOption = computed(() => ({
    color: legendItems.map((item) => item.color),
    tooltip: { trigger: 'axis' },
    legend: { show: false },
    grid: { left: 54, right: 40, top: 35, bottom: 42 },
    xAxis: { type: 'category', boundaryGap: false, data: dates, axisLabel: { color: '#8aa0bf' }, axisLine: { lineStyle: { color: '#edf3fb' } } },
    yAxis: { type: 'value', splitLine: { lineStyle: { color: '#edf3fb', type: 'dashed' } }, axisLabel: { color: '#8aa0bf' } },
    series: [
        { name: '默认部门', type: 'line', smooth: true, symbolSize: 7, areaStyle: { opacity: .18 }, data: [0, 4, 2, 1, 0, 6, 35, 1] },
        { name: 'B部门', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Ian部门1', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0] },
        { name: '7-20部门2', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'A部门', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0] },
    ],
}));

const exportData = () => ElMessage.success('已生成导出任务');
</script>

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

.page-tabs,
.chart-tabs {
    border-bottom: 1px solid #edf0f5;
}

.text-tab {
    height: 36px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: #10233f;

    &.small {
        height: 34px;
    }

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

.report-card,
.chart-box {
    border: 1px solid #dfe7f2;
}

.chart-box {
    height: 240px;
}

.analysis-table {
    :deep(.el-table__header th) {
        background: #f8fbff;
        color: #48607f;
        font-weight: 700;
    }
}

.color-8aa {
    color: #8aa0bf;
}
</style>
