<template>
    <div class="charts_area">
        <el-card shadow="never">
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item prop="blurry">
                        <el-form-item>
                            <el-date-picker
                                v-model="daterange"
                                type="monthrange"
                                range-separator="-"
                                value-format="YYYY-MM-DD"
                                start-placeholder="开始年月"
                                end-placeholder="结束年月"
                                @change="getDate"
                            />
                        </el-form-item>
                    </el-form-item>
                    <!-- <el-form-item prop="blurry">
                        <SelectOrg authorty clearable  multiple v-model="queryParams.deptIds"></SelectOrg>
                    </el-form-item> -->
                    <el-form-item prop="blurry">
                        <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="850" :options="echartsOption" />
        </div>
        <div class="table-body">
            <Table ref="publicTable"
                :tableParams="tableParams"
                :isCheckbox='false'
                :rightBtn="[]"
                :btnRole="[]"
                :isPagination="false"
                :tableData="tableData"
            >
                <template #left>
                    <div>成交总额：¥ {{productSalesData?.orderDealAmount}}，成交次数：{{productSalesData?.orderDealNum}}次</div>
                </template>
                <!-- <template #right>
                    <el-button>导出</el-button>
                </template> -->
            </Table>
        </div>
    </div>
  </template>

<script setup name="top10CustomerDeals" lang="ts">
import moment from 'moment'
import auth from '@/plugins/auth'
import { useDictCache } from '@/hooks/web/useDict'
import { tableTypes } from '@/components/Table/types'
import { getSalesDealRankTop } from '@/api/statistics/data';
import { DataVO, DataQuery } from '@/api/statistics/data/types';
import { EChartsOption } from 'echarts'
import useUserStore from '@/store/modules/user';

const {userInfo } = useUserStore()

const echartsOption = reactive({
    legend: {
        top: 'bottom'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '16px',    // 组件离容器左侧的距离
        right: '36px',   // 组件离容器右侧的距离
        bottom: '36px',  // 组件离容器底部的距离
        top: '16px',    // 组件离容器顶部的距离
        containLabel: true // 如果为true，则grid 区域会根据标签大小自动调整
    },
    dataset: {
        source: [
            ['客户名称', '成交总额', '成交次数'],
        ]
    },
    xAxis: {
    },
    yAxis: {
        inverse: true,
        scale: true,
        type: 'category',
        axisLabel: {
            interval: 0,
            color: '#333', //坐标轴字体颜色
        },
        axisLine: {
            lineStyle: {
                color: '#EBEFF3' // 修改x轴颜色
            }
        },
        axisPointer: {
            type: 'shadow'
        },

    },
    series: [
        {
            type: 'bar',
            barWidth: 18,
            color:'#3F9EFF',
            itemStyle: {
                borderRadius: [0, 4, 4, 0] // 这里设置圆角的大小
            }
        },
        {
            type: 'bar',
            barWidth: 18,
            itemStyle: {
                color:'#58CC74',
                borderRadius: [0, 4, 4, 0] // 这里设置圆角的大小
            }
        },
    ]
})

const daterange = ref('')
const getDate = (val: string[] | null) => {
    tableParams.queryParams.beginCycleTime = val ? val[0] : ''
    tableParams.queryParams.endCycleTime = val ? moment(val[1]).endOf('month').format('YYYY-MM-DD') : ''
}

const queryFormRef = ref<ElFormInstance>();

const tableParams = reactive<tableTypes<DataQuery, DataVO>>({
    tableColumn: [
        { show: true, label: '排名', prop: 'rankNum' },
        { show: true, label: '客户名称', prop: 'customerName' },
        { show: true, label: '成交总额', prop: 'orderDealAmount',},
        { show: true, label: '成交次数', prop: 'orderDealNum' },
    ],
    queryParams: {
        beginCycleTime:null,
        endCycleTime:null,
        blurry:'',
        deptId:'',
        ownerByIds: [userInfo.id],
        // deptIds: [userInfo.deptId],
    },
})

const { queryParams } = toRefs(tableParams);

const publicTable = ref()
const productSalesData = ref()
const tableData = ref([])
/** 搜索按钮操作 */
const handleQuery = () => {
    echartsOption.dataset.source = [['客户名称', '成交总额', '成交次数']]
    getSalesDealRankTop(tableParams.queryParams).then(res => {
        if(res.success) {
            productSalesData.value = res.result
            tableData.value = res.result.datas
            if(res.result.datas){
                res.result.datas.forEach(item=>{
                    echartsOption.dataset.source.push([item.customerName,item.orderDealAmount,item.orderDealNum])
                })
            }
        }
    })
}
handleQuery()

/** 重置按钮操作 */
const resetQuery = () => {
    queryParams.value = {
        beginCycleTime:null,
        endCycleTime:null,
        ownerByIds: [userInfo.id],
        deptIds: [userInfo.deptId],
    }
    daterange.value = ''
    handleQuery();
}
</script>
