<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="taskSource" :options="sourceTabs" />
                <el-segmented v-model="taskStatus" :options="statusTabs" />
                <el-select v-model="department" class="w-200" 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="timeField" class="w-200">
                    <el-option label="下单日期" value="下单日期" />
                    <el-option label="发布日期" value="发布日期" />
                </el-select>
                <el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="2025/04/06" end-placeholder="2025/04/21" />
            </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="department" label="部门名称" min-width="180">
                <template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
            </el-table-column>
            <el-table-column prop="taskCount" label="任务数 ↑↓" align="center" />
            <el-table-column prop="reached" label="已达标 ↑↓" align="center" />
            <el-table-column prop="pending" label="待完成 ↑↓" align="center" />
            <el-table-column prop="orders" label="下单数 ↑↓" align="center" />
            <el-table-column prop="published" label="出片数 ↑↓" align="center">
                <template #default="{ row }"><span class="color-main font-bold">{{ row.published }}</span></template>
            </el-table-column>
            <el-table-column label="操作" min-width="190" align="center">
                <template #default="{ row }">
                    <div class="flex-center gap-12">
                        <el-button link type="primary" @click="openStats(row)">统计</el-button>
                        <el-button link type="primary" @click="openDetail(row)">查看详情</el-button>
                        <el-button link type="primary">数据洞察</el-button>
                    </div>
                </template>
            </el-table-column>
        </SeTable>

        <TaskStatsDialog v-model:visible="statsVisible" :row="currentRow" />
        <TaskDetailDialog v-model:visible="detailVisible" :department="currentRow?.department" />
    </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';
import TaskStatsDialog from './TaskStatsDialog.vue';
import TaskDetailDialog from './TaskDetailDialog.vue';

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

type TaskRow = {
    department: string;
    taskCount: number;
    reached: number;
    pending: number;
    orders: number;
    published: number;
};

const dataTab = ref('部门数据');
const taskSource = ref('发布的任务');
const taskStatus = ref('全部状态');
const department = ref('');
const timeField = 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 statsVisible = ref(false);
const detailVisible = ref(false);
const currentRow = ref<TaskRow>();

const dataTabs = ['部门数据', '分组数据', '个人数据'];
const sourceTabs = ['发布的任务', '被指派的任务', '下单运营'];
const statusTabs = ['全部状态', '待完成', '已达标'];
const chartTabs = ['时间趋势', '占比分析', '视频状态分布'];
const metricTabs = ['任务数', '下单数', '出片数'];
const departments = ['B部门', '电商运营部', 'A部门', 'Ian部门1', '默认部门'];
const legendItems = [
    { name: 'B部门', color: '#6366f1' },
    { name: '默认部门', color: '#10b981' },
    { name: 'A部门', color: '#f59e0b' },
    { name: 'C部门', color: '#ef4444' },
    { name: '抖音投放', color: '#06b6d4' },
];
const dates = ['2025-04-06', '2025-04-07', '2025-04-08', '2025-04-10', '2025-04-12', '2025-04-14', '2025-04-16', '2025-04-18', '2025-04-20'];
const tableRows: TaskRow[] = [
    { department: 'B部门', taskCount: 2, reached: 2, pending: 0, orders: 4, published: 4 },
    { department: '电商运营部', taskCount: 1, reached: 0, pending: 1, orders: 3, published: 0 },
    { department: 'A部门', taskCount: 0, reached: 0, pending: 0, orders: 0, published: 0 },
    { department: 'Ian部门1', taskCount: 0, reached: 0, pending: 0, orders: 0, published: 0 },
    { department: 'Ian部门1', taskCount: 0, reached: 0, pending: 0, orders: 0, published: 0 },
    { department: '默认部门', taskCount: 0, reached: 0, pending: 0, orders: 0, published: 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: 'B部门', type: 'line', smooth: true, symbolSize: 7, areaStyle: { opacity: .18 }, data: [0, 2, 0, 0, 0, 0, 0, 0, 0] },
        { name: '默认部门', type: 'line', smooth: true, symbolSize: 7, areaStyle: { opacity: .16 }, data: [0, 1, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'A部门', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'C部门', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: '抖音投放', type: 'line', smooth: true, symbolSize: 7, data: [0, 0, 0, 0, 0, 0, 0, 0, 0] },
    ],
}));

const exportData = () => ElMessage.success('已生成导出任务');
const openStats = (row: TaskRow) => {
    currentRow.value = row;
    statsVisible.value = true;
};
const openDetail = (row: TaskRow) => {
    currentRow.value = row;
    detailVisible.value = true;
};
</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;
    }
}
</style>
