<template>
    <ele-page>
        <ele-card
            :body-style="{ padding: '24px' }"
            shadow="never"
            class="border-none rounded-xl"
        >
            <!-- 数据概览 -->
            <div class="mb-6">
                <div class="flex items-center mb-4">
                    <div class="w-1 h-4 bg-blue-500 mr-2 rounded"></div>
                    <span class="font-bold text-gray-800 text-base"
                        >数据概览</span
                    >
                </div>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <div
                            class="flex items-center p-6 bg-white border border-gray-100 shadow-sm rounded-lg h-[104px] transition-shadow hover:shadow-md"
                        >
                            <div
                                class="mr-4 flex items-center justify-center w-12 h-12 rounded-lg bg-blue-50"
                            >
                                <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 48 48"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M24 4L28.1 10.5H35.5V17.9L42 22L39 28.5L42 35.5H34.5V42.5H27.5L24 45L20.5 42.5H13.5V35.5H6L9 28.5L6 22L12.5 17.9V10.5H19.9L24 4Z"
                                        stroke="#3B82F6"
                                        stroke-width="4"
                                        stroke-linejoin="round"
                                    />
                                    <circle
                                        cx="24"
                                        cy="24.5"
                                        r="5"
                                        stroke="#3B82F6"
                                        stroke-width="4"
                                    />
                                </svg>
                            </div>
                            <div class="flex flex-col justify-center">
                                <span class="text-gray-500 text-sm mb-1"
                                    >未完结工单数量</span
                                >
                                <span
                                    class="text-[28px] font-bold text-gray-800 leading-none"
                                    >56</span
                                >
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            class="flex items-center p-6 bg-white border border-gray-100 shadow-sm rounded-lg h-[104px] transition-shadow hover:shadow-md"
                        >
                            <div
                                class="mr-4 flex items-center justify-center w-12 h-12 rounded-lg bg-orange-50"
                            >
                                <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 48 48"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M24 4L28.1 10.5H35.5V17.9L42 22L39 28.5L42 35.5H34.5V42.5H27.5L24 45L20.5 42.5H13.5V35.5H6L9 28.5L6 22L12.5 17.9V10.5H19.9L24 4Z"
                                        stroke="#F59E0B"
                                        stroke-width="4"
                                        stroke-linejoin="round"
                                    />
                                    <circle
                                        cx="24"
                                        cy="24.5"
                                        r="5"
                                        stroke="#F59E0B"
                                        stroke-width="4"
                                    />
                                </svg>
                            </div>
                            <div class="flex flex-col justify-center">
                                <span class="text-gray-500 text-sm mb-1"
                                    >待处理工单数量</span
                                >
                                <span
                                    class="text-[28px] font-bold text-gray-800 leading-none"
                                    >56</span
                                >
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            class="flex items-center p-6 bg-white border border-gray-100 shadow-sm rounded-lg h-[104px] transition-shadow hover:shadow-md"
                        >
                            <div
                                class="mr-4 flex items-center justify-center w-12 h-12 rounded-lg bg-green-50"
                            >
                                <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 48 48"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M24 4L28.1 10.5H35.5V17.9L42 22L39 28.5L42 35.5H34.5V42.5H27.5L24 45L20.5 42.5H13.5V35.5H6L9 28.5L6 22L12.5 17.9V10.5H19.9L24 4Z"
                                        stroke="#10B981"
                                        stroke-width="4"
                                        stroke-linejoin="round"
                                    />
                                    <circle
                                        cx="24"
                                        cy="24.5"
                                        r="5"
                                        stroke="#10B981"
                                        stroke-width="4"
                                    />
                                </svg>
                            </div>
                            <div class="flex flex-col justify-center">
                                <span class="text-gray-500 text-sm mb-1"
                                    >处理中工单数量</span
                                >
                                <span
                                    class="text-[28px] font-bold text-gray-800 leading-none"
                                    >56</span
                                >
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 工单趋势 -->
            <div class="mb-6 mt-8">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <div class="w-1 h-4 bg-blue-500 mr-2 rounded"></div>
                        <span class="font-bold text-gray-800 text-base"
                            >工单趋势</span
                        >
                    </div>
                    <div class="flex items-center gap-3">
                        <el-radio-group
                            v-model="trendSearch.days"
                            class="custom-radio-group"
                        >
                            <el-radio-button label="7">7日</el-radio-button>
                            <el-radio-button label="15">15日</el-radio-button>
                            <el-radio-button label="30">30日</el-radio-button>
                        </el-radio-group>
                        <el-date-picker
                            v-model="trendSearch.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="选择时间"
                            end-placeholder="选择时间"
                            style="width: 260px"
                        />
                        <el-button
                            type="primary"
                            class="custom-btn-primary"
                            @click="fetchTrendData"
                            >查询</el-button
                        >
                        <el-button
                            class="custom-btn-info"
                            @click="resetTrendSearch"
                            >重置</el-button
                        >
                    </div>
                </div>
                <ele-card
                    :body-style="{ padding: '10px 20px 20px 20px' }"
                    shadow="never"
                    class="border border-gray-100 shadow-sm rounded-lg"
                >
                    <v-chart
                        ref="trendChartRef"
                        style="height: 380px"
                        :option="trendChartOption"
                        autoresize
                    />
                </ele-card>
            </div>

            <!-- 工作量统计 -->
            <div class="mb-6 mt-8">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center">
                        <div class="w-1 h-4 bg-blue-500 mr-2 rounded"></div>
                        <span class="font-bold text-gray-800 text-base"
                            >工作量统计</span
                        >
                    </div>
                    <div class="flex items-center gap-3">
                        <el-radio-group
                            v-model="workloadSearch.days"
                            class="custom-radio-group"
                        >
                            <el-radio-button label="7">7日</el-radio-button>
                            <el-radio-button label="15">15日</el-radio-button>
                            <el-radio-button label="30">30日</el-radio-button>
                        </el-radio-group>
                        <el-date-picker
                            v-model="workloadSearch.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="选择时间"
                            end-placeholder="选择时间"
                            style="width: 260px"
                        />
                        <el-button
                            type="primary"
                            class="custom-btn-primary"
                            @click="fetchWorkloadData"
                            >查询</el-button
                        >
                        <el-button
                            class="custom-btn-info"
                            @click="resetWorkloadSearch"
                            >重置</el-button
                        >
                    </div>
                </div>
                <ele-card
                    :body-style="{ padding: '0px' }"
                    shadow="never"
                    class="border border-gray-100 shadow-sm rounded-lg overflow-hidden"
                >
                    <el-table
                        :data="workloadData"
                        show-summary
                        border
                        style="width: 100%"
                        :header-cell-style="{
                            background: '#F2F2F2',
                            color: '#333',
                            fontWeight: 'bold'
                        }"
                    >
                        <el-table-column
                            type="index"
                            label="序号"
                            width="80"
                            align="center"
                        />
                        <el-table-column prop="operator" label="操作员" />
                        <el-table-column prop="created" label="创建工单数量" />
                        <el-table-column prop="finished" label="完结工单数量" />
                        <el-table-column prop="claimed" label="理赔工单数量" />
                        <el-table-column
                            prop="claimAmount"
                            label="理赔工单金额"
                        />
                    </el-table>
                </ele-card>
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { BarChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent
    } from 'echarts/components';
    import VChart from 'vue-echarts';
    import { useEcharts } from '@/utils/use-echarts';

    defineOptions({ name: 'WorkOrderAnalysis' });

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

    const trendChartRef = ref(null);
    useEcharts([trendChartRef]);

    // 趋势搜索参数
    const trendSearch = reactive({
        days: '7',
        dateRange: []
    });

    // 趋势图表配置
    const trendChartOption = reactive({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: [
                { name: '新增工单', icon: 'roundRect' },
                { name: '完结工单', icon: 'roundRect' }
            ],
            top: 0,
            itemWidth: 20,
            itemHeight: 12,
            textStyle: {
                color: '#333'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#E5E5E5'
                }
            },
            axisTick: {
                show: true,
                alignWithLabel: true,
                lineStyle: {
                    color: '#E5E5E5'
                }
            },
            axisLabel: {
                color: '#333',
                margin: 12
            }
        },
        yAxis: {
            type: 'value',
            max: 250,
            interval: 50,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#E5E5E5'
                }
            },
            axisLabel: {
                color: '#333'
            }
        },
        series: [
            {
                name: '新增工单',
                type: 'bar',
                barWidth: 32,
                itemStyle: {
                    color: '#3B82F6',
                    borderRadius: [4, 4, 0, 0]
                },
                data: [100, 140, 230, 100, 130, 150, 180]
            },
            {
                name: '完结工单',
                type: 'bar',
                barWidth: 32,
                itemStyle: {
                    color: '#10B981',
                    borderRadius: [4, 4, 0, 0]
                },
                data: [150, 100, 200, 140, 100, 175, 125]
            }
        ]
    });

    const fetchTrendData = () => {
        // mock api call
    };

    const resetTrendSearch = () => {
        trendSearch.days = '7';
        trendSearch.dateRange = [];
    };

    // 工作量搜索参数
    const workloadSearch = reactive({
        days: '7',
        dateRange: []
    });

    // 工作量表格数据
    const workloadData = ref([
        {
            operator: 'zzz',
            created: 11,
            finished: 22,
            claimed: 22,
            claimAmount: 22
        },
        {
            operator: 'zzz',
            created: 11,
            finished: 22,
            claimed: 22,
            claimAmount: 22
        },
        {
            operator: 'zzz',
            created: 11,
            finished: 22,
            claimed: 22,
            claimAmount: 22
        }
    ]);

    const fetchWorkloadData = () => {
        // mock api call
    };

    const resetWorkloadSearch = () => {
        workloadSearch.days = '7';
        workloadSearch.dateRange = [];
    };
</script>

<style scoped>
    /* 自定义单选按钮组样式 */
    .custom-radio-group :deep(.el-radio-button__inner) {
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        margin-right: 8px;
        background-color: #f3f4f6;
        color: #4b5563;
        padding: 6px 16px;
        box-shadow: none !important;
        transition: all 0.2s;
    }
    .custom-radio-group
        :deep(
            .el-radio-button__original-radio:checked + .el-radio-button__inner
        ) {
        background-color: #3b82f6;
        color: #fff;
    }
    .custom-radio-group
        :deep(.el-radio-button:last-child .el-radio-button__inner) {
        margin-right: 0;
    }
    .custom-radio-group :deep(.el-radio-button__inner:hover) {
        background-color: #e5e7eb;
        color: #1f2937;
    }
    .custom-radio-group
        :deep(
            .el-radio-button__original-radio:checked
                + .el-radio-button__inner:hover
        ) {
        background-color: #2563eb;
        color: #fff;
    }

    /* 自定义按钮样式 */
    .custom-btn-primary {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
        padding: 8px 20px;
    }
    .custom-btn-primary:hover,
    .custom-btn-primary:focus {
        background-color: #2563eb;
        border-color: #2563eb;
    }

    .custom-btn-info {
        background-color: #ffffff;
        border-color: #d1d5db;
        color: #4b5563;
        padding: 8px 20px;
    }
    .custom-btn-info:hover,
    .custom-btn-info:focus {
        background-color: #f9fafb;
        border-color: #9ca3af;
        color: #1f2937;
    }
</style>
