<template>
    <el-row :gutter="16" style="margin-top: 15px">
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span>销售预测</span>
                        <div>
                            <router-link style="margin-right: 10px" tag="a" :to="{ path: '/statistics/sale_ansys/salesProcess' }">
                                更多维度  <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">
                    <Echart height="800px" :options="echartsOption" />
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="never" class="index-header">
                <template #header>
                    <div class="card-header">
                        <span>销售漏斗</span>
                        <div>
                            <!-- <el-select placeholder="请选择数据类型" style="width: 150px;margin-right: 10px">
                                <el-option value="1">个人</el-option>
                                <el-option value="">不买</el-option>
                            </el-select> -->
                            <router-link style="margin-right: 10px" tag="a" :to="{ path: '/statistics/sale_ansys/salesFunnel' }">
                                更多维度  <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon></router-link>
                        </div>
                    </div>
                </template>
                <div class="count-async-body">
                    <Echart :height="500" :options="echartsOption2" />
                </div>
            </el-card>
        </el-col>

    </el-row>
</template>


<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { EChartsOption } from 'echarts'
import useUserStore from '@/store/modules/user';
import { getAnalyzeSalesFunnel, getPredictiveAnalyticsTotal } from '@/api/home/index'
import { DataTypes } from '@/api/home/types'
import moment from 'moment';
const value = ref(new Date())
const bindMonth = ref(new Date())
const userStore = useUserStore();
const echartsOptionLengentData = ref()
const eOPcountData = ref<Array<Array<string | number>>>([])



const echartsOption = reactive<EChartsOption>({
    legend: {},
    grid: {
        left: '0%',
        right: '0%',
        top: '10%',
        bottom: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            crossStyle: {
                color: '#999'
            }
        },

    },
    dataset: {
        source: []
    },
    xAxis: {
        axisPointer: {
            type: 'shadow'
        },
        type: 'category',
        axisLabel: {
            interval: 0,
            rotate: 45
        },
    },
    yAxis: {},
    series: [
        { type: 'bar', barWidth: 8, itemStyle: { color: '#739FFA' } },
        { type: 'bar', barWidth: 8, itemStyle: { color: '#4ecb73' } }
    ]
})

const getPredictiveAnalyticsTotalCount = () => {
    let param = {
        isMySelf: 1
    }
    getPredictiveAnalyticsTotal(param).then((res) => {
        if (res.success) {
            let data = res.result.businessMonthCountls
            const newData = [
                ['product', '预计销售金额', '概率金额'],
                ...data.map(item => [
                    `${moment(item.month).format('M')}月`,
                    item.salesAmount,
                    item.expectedSalesAmount
                ])
            ]
            // 更新整个 dataset
            echartsOption.dataset = {
                source: newData
            }
        }
    })
}

const legendData = ref()
const countData = ref<DataTypes[]>([])
const echartsOption2 = reactive<EChartsOption>({
    title: {
        text: 'Funnel',
        show: false,
    },
    grid: {
        left: '0%',
        right: '0%',
        top: '10%',
        bottom: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: (item)=>{

            // console.log(item, ">>>>>>>>>>>>>>>>>>>>>>>")
            // if(item.dataIndex == 0){
            //     return `${item.name}：${item.value}`
            // }else{
            //
            // }
            return `${item.name}：${item.value}<br>占比：${item.percent}%`
        }
    },

    legend: {
        orient: 'horizontal', // 水平布局
        bottom: 0, // 距离底部0像素
        data: legendData.value
    },
    series: [
        {
            type: 'funnel',
            left: '10%',
            top: 30,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'outer',
                color: '#000000'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
                color: function (params) {
                    const colorList = ['#2989FF', '#29CCCB', '#F18E56', '#D787FF', '#7F6BFF'].reverse();
                    return colorList[params.dataIndex];
                }
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: countData.value
        }
    ]
}) as EChartsOption

const getAnalyzeSalesFunnelData = () => {

    let param = {
        beginCycleTime: '',
        endCycleTime: '',
        isMySelf: 1
    }
    if (bindMonth.value) {
        //根据月份获取当前月份的第一天和最后一天
        param.beginCycleTime = moment(bindMonth.value).startOf('month').format('YYYY-MM-DD');
        param.endCycleTime = moment(bindMonth.value).endOf('month').format('YYYY-MM-DD');
    }
    getAnalyzeSalesFunnel(param).then((res) => {
        if (res.success) {
            countData.value = []
            legendData.value = []
            if (res.result.businessStageCountls && res.result.businessStageCountls.length > 0) {
                let data  = res.result.businessStageCountls.slice(0, 10);
                legendData.value = data.map(item => {
                    return item.stageName
                })
                data.forEach(item => {
                    countData.value.push({
                        seriesName: item.stageName,
                        name: item.stageName,
                        percent: item.stageSurnoverRatio,
                        value: Number(item.businessNum),

                    })
                });
                // echartsOption2.series.data = countData.value
                // 更新整个 data
                echartsOption2.series[0].data = countData.value
            }
        }
    })
}

onMounted(() => {
    getAnalyzeSalesFunnelData()
    getPredictiveAnalyticsTotalCount()
});

</script>

<style  lang="scss">
.count-async-body{
    .el-calendar__header{
        justify-content: flex-end;
        padding-top: 0;
        border-bottom: none;
        padding-bottom: 0;

    }
    .el-calendar-table .el-calendar-day{
        height: 46px;
    }
}

.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
        font-size: 14px;
        font-weight: 600;
    }
}
.date-class-name{


}
</style>

<style scoped lang="scss">
.count-async{


}
.count-async-body{
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.box-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    span{
        color:  #262626;
        font-size: 24px;
        font-weight: 600;
    }
    lable{
        color: #999999;
        font-size: 14px;
        font-weight: 500;
    }
    &:hover{
        cursor: pointer;
    }

}
.fast-menu-body{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    span{
        display: flex;
        flex-direction: column;
        align-items: center;
        .cicyle{
            width: 57px;
            height: 57px;
            border-radius: 50px;
            background: linear-gradient(180deg, #1874FF 0%, #A2C7FF 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        label{
            font-weight: 500;

        }
    }
}
</style>
