<template>
    <div class="charts_area">
        <el-card shadow="never">
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="increaseType">
                        <el-select v-model="queryParams.increaseType" @change="handleQuery">
                            <el-option v-for="item in typeData" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="comparisonType">
                        <el-select v-model="queryParams.comparisonType" @change="handleQuery">
                            <el-option v-for="item in comparisonData" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item prop="deptIds">
                        <SelectOrg authorty clearable  :inputWidth="215" multiple v-model="queryParams.deptIds" :type="3"></SelectOrg>
                    </el-form-item> -->
                    <el-form-item prop="ownerByIds">
                        <SelectUser authorty multiple v-model="queryParams.ownerByIds"></SelectUser>
                    </el-form-item>
                    <el-form-item prop="years">
                        <el-date-picker
                            v-model="queryParams.years"
                            type="years"
                            :clearable="false"
                            value-format="YYYY"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="echarts-body">
            <Echart :height="650" :options="echartsOption" id="myChart" />
        </div>
    </div>
  </template>

<script setup name="completionDegree" lang="ts">
import { getBusAddCountTotal } from '@/api/statistics/salesAnalysis'
import moment from 'moment'
import * as echarts from 'echarts'
import useUserStore from '@/store/modules/user';

const typeData = [
    { label: '新增客户', value: '1' },
    { label: '新增商机', value: '2' },
    { label: '新增线索', value: '3' },
    { label: '成交商机', value: '4' },
    { label: '成交订单', value: '5' },
    { label: '成交总额', value: '6' },
    // { label: '费用支出', value: '7' },
]
const comparisonData = [
    { label: '同比增长率', value: '1' },
    { label: '环比增长率', value: '2' },
]

const queryFormRef = ref<ElFormInstance>();
const nowYear = moment().format('YYYY')

const { userInfo } = useUserStore();
const queryParams = ref({
    increaseType: '1',
    years: [String(Number(nowYear) - 1), nowYear],
    comparisonType: '1',
    // deptIds: [userInfo.deptId],
    ownerByIds: [userInfo.id],
});

const myChart = ref()
const colorData = ['#3aa0ff', '#4ecb73', '#fbd337', '#435188', '#975fe4']
const getData = () => {
    getBusAddCountTotal(queryParams.value).then((res) => {
        if(res.success) {
            myChart.value.clear()
            let xAxisData = []
            let seriesData = []
            for(let i = 0; i < 12; i++) {
                xAxisData.push(i + 1 + '月')
            }
            res.result.map((item, index) => {
                let datas = item.datas.map(a => {
                    let obj = { value: a.dataCount, dataGrowRatio: a.dataGrowRatio }
                    return obj
                })
                seriesData.push({
                    name: item.yearStr,
                    type: 'bar',
                    itemStyle: {
                        borderRadius: [4, 4, 0, 0], // 这里设置圆角的大小
                        color: colorData[index]
                    },
                    data: datas
                })
            })
            echartsOption.xAxis.data = xAxisData
            echartsOption.series = seriesData
        }
    })
}

const echartsOption = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            crossStyle: {
                color: '#999'
            }
        },
        formatter: function (params) {
            // 自定义 tooltip 内容
            let tooltipText = '';
            let comparisonName = comparisonData.find(a => a.value == queryParams.value.comparisonType)?.label
            params.map((item, index) => {
                if(index == 0) {
                    tooltipText += `${ item.axisValue }<br/>`
                }
                let a = `<span style="display:inline-block;width:8px;height:8px;background-color:${item.color};border-radius:50%;margin-right:5px;">`
                tooltipText += `${ a }</span>${ item.seriesName }年${ comparisonName }%：${ item.data.dataGrowRatio }%<br/>`
            })
            return tooltipText;
        }
    },
    grid: {
        left: '16px',    // 组件离容器左侧的距离
        right: '16px',   // 组件离容器右侧的距离
        bottom: '36px',  // 组件离容器底部的距离
        top: '16px',    // 组件离容器顶部的距离
        containLabel: true // 如果为true，则grid 区域会根据标签大小自动调整
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            interval: 0,
            color: '#333', //坐标轴字体颜色
        },
        axisLine: {
            lineStyle: {
                color: '#EBEFF3' // 修改x轴颜色
            }
        },
        axisPointer: {
            type: 'shadow'
        },
        data: []
    },
    yAxis: {},
    series: []
})

/** 搜索按钮操作 */
const handleQuery = () => {
    getData()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

onBeforeMount(() => {
    getData()
})

onMounted(() => {
    myChart.value = echarts.init(document.getElementById('myChart'))
})
</script>
