<template>
    <div class="charts_area">
        <el-card shadow="never">
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="targetType">
                        <el-select v-model="queryParams.targetType" @change="handleQuery">
                            <el-option v-for="item in typeData" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <SelectTime ref="selectTimeRef" daysLimit v-model="queryParams.summaryType" v-model:query-params="queryParams" />
                    <!-- <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>
                        <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" />
        </div>
    </div>
  </template>

<script setup name="completionDegree" lang="ts">
import { getAllBusinessCountTotal } from '@/api/statistics/salesAnalysis'
import moment from 'moment'
import SelectTime from '../../components/selectTime.vue';
import useUserStore from '@/store/modules/user';

const typeData = [
    { label: '跟进次数', value: '1' },
    { label: '跟进客户数', value: '10' },
    { label: '成交订单', value: '30' },
    { label: '成交金额', value: '40' },
    { label: '成交产品总数', value: '50' },
]

const queryFormRef = ref<ElFormInstance>();
const { userInfo } = useUserStore();
const queryParams = ref({
    targetType: '1',
    beginCycleTime: moment().subtract(12, 'months').format('YYYY-MM') + '-01',
    endCycleTime: moment().endOf('month').format('YYYY-MM-DD'),
    summaryType: '30',
    // deptIds: [userInfo.deptId],
    ownerByIds: [userInfo.id],
});

const getData = () => {
    getAllBusinessCountTotal(queryParams.value).then((res) => {
        if(res.success) {
            let xAxisData = []
            xAxisData = res.result.map(item => item.groupTypeName)
            echartsOption.xAxis.data = xAxisData
            echartsOption.series[0].name = typeData.find(item => item.value === queryParams.value.targetType)?.label
            echartsOption.series[0].data = res.result.map(item => item.dataCount)
        }
    })
}

const echartsOption = reactive({
    tooltip: {},
    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轴颜色
            }
        },
        data: []
    },
    yAxis: {},
    series: [
        {
            name: '',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
                borderRadius: [4, 4, 0, 0], // 这里设置圆角的大小
                color:'#3aa0ff'
            },
            data: []
        },
    ]
})

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

/** 重置按钮操作 */
const selectTimeRef = ref()
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.summaryType = '30'
    queryParams.value.beginCycleTime = moment().subtract(12, 'months').format('YYYY-MM') + '-01'
    queryParams.value.endCycleTime = moment().endOf('month').format('YYYY-MM-DD')
    selectTimeRef.value?.resetTime()
    handleQuery();
}

onBeforeMount(() => {
    getData()
})
</script>
