<template>
    <div class="charts_area">
        <el-card shadow="never">
            <template #header>
                <div class="top_nav flex">
                    <template v-for="(item,index) in headerNav">
                        <div class="nav_list" @click="changeNav(index,item.value)">
                            {{ item.label }}
                            <i :class="navIndex == index ? 'on' : ''"></i>
                        </div>
                    </template>
                </div>
            </template>
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="followUpTimeType">
                        <el-select v-model="queryParams.followUpTimeType" @change="handleQuery">
                            <el-option label="写跟进时间" value="10"></el-option>
                            <el-option label="实际跟进时间" value="20"></el-option>
                        </el-select>
                    </el-form-item>
                    <SelectTime ref="selectTimeRef" v-model="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="450" :options="echartsOption" />
        </div>
        <div class="table-body">
            <Table
                ref="publicTable"
                :tableParams="tableParams"
                :isCheckbox='false'
                :rightBtn="[]"
                :btnRole="[]"
                :key="navIndex"
            >
                <template #left>
                    <div>
                        跟进次数：{{ flowUpData?.followUpNum }}，
                        <template v-if="flowUpType == '0'">
                            联系人跟进次数：{{ flowUpData?.liaisonNum }}，
                            跟进线索次数：{{ flowUpData?.clusNum }}，
                            跟进客户次数：{{ flowUpData?.customerNum }}，
                            跟进商机次数：{{ flowUpData?.businessNum }}，
                            跟进订单次数：{{ flowUpData?.orderFormNum }}
                        </template>
                        <template v-else>
                            视讯：{{ flowUpData?.videosNum }}，
                            到访：{{ flowUpData?.comeNum }}，
                            拜访：{{ flowUpData?.visitNum }}，
                            邮件：{{ flowUpData?.emailNum }}，
                            其他：{{ flowUpData?.otherNum }}
                        </template>
                    </div>
                </template>
                <!-- <template #right>
                    <el-button style="margin-left: 10px;">导出</el-button>
                </template> -->
            </Table>
        </div>
    </div>
  </template>

<script setup name="completionDegree" lang="ts">
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'
import { getFlowUpCountTypeTotal, listFlowUpCountType, getFlowUpCountModeTotal, listFlowUpCountMode } from '@/api/statistics/salesAnalysis'
import { SalesProcessQuery, SalesProcessVO } from '@/api/statistics/salesAnalysis/types';
import moment from 'moment';
import SelectTime from '../../components/selectTime.vue';
import useUserStore from '@/store/modules/user';

const summaryType = ref('30')

// 顶部客户类型切换
const headerNav = [
    { label: '跟进对象', value: '0' },
    { label: '跟进类型', value: '1' }
]
const navIndex = ref(0)
const flowUpType = ref('0')

const flowUpData = ref()
const colorData = ['#4ecb73', '#fbd337', '#435188', '#975fe4']
const getData = () => {
    let seriesData = []
    let xAxisData = []
    let requset = flowUpType.value == '0' ? getFlowUpCountTypeTotal : getFlowUpCountModeTotal
    requset(queryParams.value).then(res => {
        if(res.success) {
            flowUpData.value = res.result
        }
    })
    let listRequset = flowUpType.value == '0' ? listFlowUpCountType : listFlowUpCountMode
    listRequset({ ...queryParams.value, pageIndex: 1, pageSize: 10000 }).then(res => {
        if(res.success) {
            let source = flowUpType.value == '0' ?
                [
                    { label: '联系人跟进次数', value: 'liaisonNum' },
                    { label: '跟进线索次数', value: 'clusNum' },
                    { label: '跟进客户次数', value: 'customerNum' },
                    { label: '跟进商机次数', value: 'businessNum' },
                    { label: '跟进订单次数', value: 'orderFormNum' },
                ] :
                [
                    { label: '视讯', value: 'videosNum' },
                    { label: '到访', value: 'comeNum' },
                    { label: '拜访', value: 'visitNum' },
                    { label: '邮件', value: 'emailNum' },
                    { label: '其他', value: 'otherNum' }
                ]
            xAxisData = res.result.records.map(item => item.userName)
            seriesData.push({
                name: '跟进次数',
                type: 'bar',
                barWidth: 18,
                itemStyle: {
                    color:'#3aa0ff',
                    borderRadius: [4, 4, 0, 0] // 这里设置圆角的大小
                },
                data: res.result.records.map(item => item.followUpNum)
            })
            for(let i = 0; i < 5; i++) {
                seriesData.push({
                    name: source[i].label,
                    type: 'bar',
                    barWidth: 18,
                    itemStyle: {
                        color: colorData[i],
                        borderRadius: [4, 4, 0, 0] // 这里设置圆角的大小
                    },
                    data: res.result.records.map(item => item[source[i].value])
                })
            }
            echartsOption.xAxis.data = xAxisData
            echartsOption.series = seriesData
        }
    })
}

const echartsOption = reactive({
    legend: {
        top: 'bottom'
    },
    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: []
})


const queryFormRef = ref<ElFormInstance>();

const { userInfo } = useUserStore();
const tableParams = reactive<tableTypes<SalesProcessQuery, SalesProcessVO>>({
    tableColumn: [],
    queryParams: {
        followUpTimeType: '10',
        beginCycleTime: moment().subtract(12, 'months').format('YYYY-MM') + '-01',
        endCycleTime: moment().endOf('month').format('YYYY-MM-DD'),
        // deptIds: [userInfo.deptId],
        ownerByIds: [userInfo.id],
    },
    listFn: null,
    exportCode: 'EXPORT_CUSTOM_EXCEL'
})

const { queryParams, tableColumn, listFn } = toRefs(tableParams);

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

/** 重置按钮操作 */
const selectTimeRef = ref()
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    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();
}

const changeNav = (index: number, val: string) => {
    navIndex.value = index
    flowUpType.value = val
    tableColumn.value = [
        { show: true, label: '员工姓名', prop: 'userName' },
        { show: true, label: '所在部门', prop: 'deptName' },
        { show: true, label: '跟进次数', prop: 'followUpNum' },
    ]
    if(index == 0) {
        tableColumn.value.push(
            { show: true, label: '联系人跟进次数', prop: 'liaisonNum' },
            { show: true, label: '跟进线索次数', prop: 'clusNum' },
            { show: true, label: '跟进客户次数', prop: 'customerNum' },
            { show: true, label: '跟进商机次数', prop: 'businessNum' },
            { show: true, label: '跟进订单次数', prop: 'orderFormNum' }
        )
    }else {
        tableColumn.value.push(
            { show: true, label: '视讯', prop: 'videosNum' },
            { show: true, label: '到访', prop: 'comeNum' },
            { show: true, label: '拜访', prop: 'visitNum' },
            { show: true, label: '邮件', prop: 'emailNum' },
            { show: true, label: '其他', prop: 'otherNum' }
        )
    }
    listFn.value = index == 0 ? listFlowUpCountType : listFlowUpCountMode
    getData()
}
changeNav(0, '0')
</script>
