<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
                                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.deptId"></SelectOrg>
                    </el-form-item>
                    <el-form-item prop="blurry">
                        <SelectUser authorty :deptIds="queryParams.deptId" 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="700" :options="echartsOption" />
        </div>
    </div>
  </template>

<script setup name="customerDealRateAnalysis" lang="ts">
import auth from '@/plugins/auth'
import { useDictCache } from '@/hooks/web/useDict'
import { tableTypes } from '@/components/Table/types'
import { listCustomer } from '@/api/customer';
import { CustomerVO, CustomerQuery } from '@/api/customer/types';
import { EChartsOption } from 'echarts'

const echartsOption = reactive<EChartsOption>({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['首次商机成交率', '商机成交率', '续约率'],
        top: 'bottom'
    },
    grid: {
        top: '8%',
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '首次商机成交率',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {}
        },
        {
            name: '商机成交率',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            areaStyle: {}
        },
        {
            name: '续约率',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            areaStyle: {}
        },
    ]
}) as EChartsOption


const queryFormRef = ref<ElFormInstance>();
const getDate = (val: string[] | null) => {
    tableParams.queryParams.beginCycleTime = val ? val[0] : ''
    tableParams.queryParams.endCycleTime = val ? val[1] : ''
}

const tableParams = reactive<tableTypes<CustomerQuery, CustomerVO>>({
    tableColumn: [],
    queryParams: {
        beginCycleTime:null,
        endCycleTime:null,
        blurry:'',
        deptId:'',
        ownerByIds:null,
    },
    listFn: listCustomer,
    exportCode: 'EXPORT_CUSTOM_EXCEL'
})

const { queryParams } = toRefs(tableParams);

const handleQuery = () => {
    // tableParams.tableData = [];
    // tableParams.loading = true;
    // tableParams.listFn(tableParams.queryParams).then((res) => {
    //     tableParams.tableData = res.data;
    //     tableParams.loading = false;
    // });
}
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    // handleQuery();
}
</script>
