<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import SmallTitle from '../smallTitle/smallTitle.vue'
import RevenueYOYIcon from '../../../../assets/image/RevenueYOYIcon.png'
import './BusinessCase.less'
import moment from 'moment';
import { handleCodeGetRevenueCompare, handleGetRevenueTrend } from '../../service';
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    DatasetComponent, // 必须添加！否则 dataset 功能无效
    TransformComponent // 如果使用 dataset.source 需要此组件
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';



// 注册组件
echarts.use([
    LineChart,
    BarChart,
    GridComponent,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    DatasetComponent, // 必须注册
    TransformComponent, // 必须注册
    CanvasRenderer
]);


let myChart: echarts.ECharts;
let myChartBottom: echarts.ECharts;

const tabList: any = [
    { label: "营收金额", value: 1 },
    { label: "客单量", value: 2 },
    { label: "客单均价", value: 3 },
]
let selectTab = ref<number>(1)



// 当前请求来的实际数据
let realData = ref<any>()

// 传入的数据
const props = defineProps<{
    currentService?: any;
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {
        handleGetData()
        handleGetBottomData()
    },
    { deep: true }
);

onMounted(async () => {
    // 用tab可以修改的方法
    await handleGetData()
    await handleGetBottomData()
})


// 切换tab的内容
const handleChangeTab = async (value: number) => {
    selectTab.value = value
    handleShowData(value)
}

// 拿到数据的方法
const handleGetData = async () => {

    const req: any = {
        ProvinceCode: "340000",
        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
        ServerpartId: props.currentService?.SERVERPART_ID || "",
    }

    const data = await handleCodeGetRevenueCompare(req)
    console.log('djsakjdaskldjasoifioad', data);

    // 营收金额  
    let category: any = ['product']
    let monthList: number[] = []
    let list = data.RevenueAmountList
    if (list && list.length > 0) {
        list.forEach((item: any, index: number) => {
            category.push(item.name)
            if (index === 0 && item.data && item.data.length > 0) {
                item.data.forEach((subItem: any) => {
                    monthList.push(subItem[0])
                })
            }
        })
    }

    // 营收
    let res: any = []
    if (monthList && monthList.length > 0) {
        monthList.forEach((item: number) => {
            let list: any = [`${item}月`]
            data.RevenueAmountList.forEach((subItem: any) => {
                let newData: any = subItem.data
                list.push(newData[item - 1][1])
            })
            res.push(list)
        })
    }

    // 客单量
    let res2: any = []
    if (monthList && monthList.length > 0) {
        monthList.forEach((item: number) => {
            let list: any = [`${item}月`]
            data.TicketCountList.forEach((subItem: any) => {
                let newData: any = subItem.data
                list.push(newData[item - 1][1])
            })
            res2.push(list)
        })
    }

    // 均价
    let res3: any = []
    if (monthList && monthList.length > 0) {
        monthList.forEach((item: number) => {
            let list: any = [`${item}月`]
            data.AvgTicketAmountList.forEach((subItem: any) => {
                let newData: any = subItem.data
                list.push(newData[item - 1][1])
            })
            res3.push(list)
        })
    }


    let obj: any = {
        1: [category, ...res],
        2: [category, ...res2],
        3: [category, ...res3],
    }
    console.log('dhsauhdasjhdak', obj);
    realData.value = obj

    handleShowData(selectTab.value)
}

// 拿到底部的方法
const handleGetBottomData = async () => {
    const req: any = {
        ProvinceCode: "530000",
        StatisticsDate: moment().format('YYYY'),
        StatisticsType: 1,
        ServerpartId: props.currentService?.SERVERPART_ID || "",
    }
    const yesReq: any = {
        ProvinceCode: "530000",
        StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
        StatisticsType: 1,
        ServerpartId: props.currentService?.SERVERPART_ID || "",
    }
    const data = await handleGetRevenueTrend(req)
    const yesData = await handleGetRevenueTrend(yesReq)

    console.log('datadatadatadata', data);
    console.log('yesDatayesDatayesDatayesData', yesData);

    let category: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    let currentYear: number[] = []
    let lastYear: number[] = []

    if (data && data.length > 0) {
        data.forEach((item: any) => {
            currentYear.push(item.value)
        })
    }

    if (yesData && yesData.length > 0) {
        yesData.forEach((item: any) => {
            lastYear.push(item.value)
        })
    }

    await handleShowBottomData({
        category: category,
        currentYear: currentYear,
        lastYear: lastYear,
    })

}

// 切换显示的数据源  营收特征分析的
const handleShowData = async (value: number) => {
    let data = realData.value[value]

    const chartDom = document.getElementById('featureAnalysis');
    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    const option = {
        legend: {
            top: 10,
            right: 10,
            textStyle: {
                color: '#ffffff' // 设置图例文字为白色
            }
        },
        tooltip: { trigger: 'axis' },
        dataset: { source: data },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval: 0,
            },
            axisTick: {
                show: false // 隐藏刻度小线条
            }
        },
        yAxis: {
            splitLine: { show: false },
            axisLabel: {
                width: 40,
                overflow: 'truncate',
            }
        },
        series: [{
            type: 'bar',
            itemStyle: {
                color: '#0094FF' // 第一根柱子的颜色
            }
        },
        {
            type: 'bar',
            itemStyle: {
                color: '#69BCFF' // 第一根柱子的颜色
            }
        },
        {
            type: 'bar',
            itemStyle: {
                color: '#6B7C8B' // 第一根柱子的颜色
            }
        }],
        grid: {
            left: '0',    // 左侧间距
            right: '0',   // 右侧间距
            bottom: '0',    // 底部间距
            top: '50',       // 顶部间距
            containLabel: true // 确保坐标轴标签在grid内
        },
    };

    myChart.setOption(option);
    window.addEventListener('resize', resizeChart);
}

// 切换显示数据源  营收同比分析的
const handleShowBottomData = async (res: any) => {

    const chartDom = document.getElementById('featureAnalysisBottom');
    if (!chartDom) return;
    myChartBottom = echarts.init(chartDom);


    const option = {
        legend: {
            top: 0,              // 距离容器底部距离
            right: 0,
            itemWidth: 20,          // 图例标记的图形宽度
            itemHeight: 10,         // 图例标记的图形高度
            textStyle: {
                color: '#fff'       // 图例文字颜色
            }
        },
        xAxis: {
            type: 'category',
            data: res.category,
            boundaryGap: true,
            axisLabel: {
                interval: 0,
            },
            axisTick: {
                show: false // 隐藏刻度小线条
            }
        },
        yAxis: {
            type: 'value',
            name: '万元',
            splitLine: { show: false },
            axisLine: {
                show: true,
            },
            axisLabel: {
            }
        },
        grid: {
            left: '10',    // 增加左侧空间
            right: '10',   // 增加右侧空间
            bottom: '0',
            top: '10',
            containLabel: true
        },
        series: [
            {
                name: '今年',
                data: res.currentYear,
                type: 'line',
                lineStyle: {
                    width: 2,
                    color: '#0094FF'
                },
                itemStyle: {
                    color: '#0094FF'
                },
            },
            {
                name: '去年',
                data: res.lastYear,
                type: 'line',
                lineStyle: {
                    width: 2,
                    color: '#00FFB7' // 改为橙色
                },
                itemStyle: {
                    color: '#00FFB7' // 改为橙色
                },
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 改为线条指示器
            },
            formatter: function (params: any) {
                console.log('paramsparamsparams', params);
                return `${params.map((item: any) => {
                    return `<div>
                    ${item.seriesName}：${item.value}元
                    </div>`
                }).join("")}`
            }
        }
    };

    myChartBottom.setOption(option);
    window.addEventListener('resize', resizeChartBottom);
}

const resizeChart = () => {
    myChart?.resize();
};
const resizeChartBottom = () => {
    myChart?.resize();
};

onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart);
    myChart?.dispose();


    window.removeEventListener('resize', resizeChartBottom);
    myChartBottom?.dispose();
});


</script>



<template>
    <div class="BusinessCaseBox">
        <SmallTitle style="padding-left: 0;">
            <template #extra>
                <div class="BusinessCaseTabBox">
                    <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
                        v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)">
                        {{ item.label }}
                    </div>
                </div>
            </template>
        </SmallTitle>


        <!-- 营收同比 -->
        <div class="BusinessCaseRevenueYOY">
            <div class="BusinessCaseLeftItem">
                <img class="BusinessIcon" :src="RevenueYOYIcon" />
            </div>

            <div class="BusinessCaseRightItem">
                <div class="rightItemLeft">
                    <div class="rightItemTitle">营收同比</div>
                    <div class="rightItemBottom">
                        <div class="compareTitle">相比去年同日</div>
                        <div class="changeBox">
                            <img class="changeIcon" />
                            <!-- >0   #00FF00   <0 #FF0000 -->
                            <div class="changeText"></div>
                        </div>
                    </div>
                </div>

                <div class="rightItemRight">
                    <div class="BusinessCaseRevenueValue">3,329,828.91</div>
                    <div class="BusinessCaseRevenueUnit">元</div>
                </div>
            </div>
        </div>

        <!-- 营收特征分析 -->
        <div class="featureAnalysis">
            <SmallTitle title="营收特征分析" />

            <div class="featureAnalysisBox" id="featureAnalysis"></div>

            <SmallTitle title="营收同比分析" style="margin-top: 31px;" />

            <div class="featureAnalysisBottom" id="featureAnalysisBottom"></div>
        </div>

    </div>
</template>