<template>
    <div class="workbench flex flex-col gap-[16px]">
        <search-form v-model:queryParams="form" @reset-page="resetPage" @reset-params="resetParams" @fect-all-data="fetchAllData" />
        <data-overview ref="dataOverviewRef" />
        <div class="flex gap-[16px] flex-wrap">
            <conversion-process-chart ref="coversionProcessChartRef" />
            <converted-chart ref="convertedChartRef" />
        </div>
        <div class="flex gap-[16px] flex-wrap">
            <rank ref="rankRef" @refresh="refreshData" />
            <clue-status-pie ref="clueStatusPieRef" />
            <!-- <converted-line-chart /> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import dataOverview from './components/data-overview.vue'
import conversionProcessChart from './components/conversion-process-chart.vue'
import convertedChart from './components/converted-chart.vue'
import rank from './components/rank.vue'
import clueStatusPie from './components/clue-status-pie.vue'
// import convertedLineChart from './components/converted-line-chart.vue'
import searchForm from './components/search-form.vue'
import { getCurDate } from '@/utils/util'

export interface IForm {
    organizationId: number | null
    createTimeStart: string
    createTimeEnd: string
    userId: string
}
const initialVal = ref()
const form = ref<IForm>({
    organizationId: null,
    createTimeStart: getCurDate('start'),
    createTimeEnd: getCurDate('end'),
    userId: ''
})
const convertedChartRef = ref<InstanceType<typeof convertedChart>>()
const rankRef = ref<InstanceType<typeof rank>>()
const clueStatusPieRef = ref<InstanceType<typeof clueStatusPie>>()
const coversionProcessChartRef = ref<InstanceType<typeof conversionProcessChart>>()
const dataOverviewRef = ref<InstanceType<typeof dataOverview>>()
const resetPage = () => {
    fetchAllData(initialVal.value)
}
const resetParams = () => {
    form.value = {
        organizationId: initialVal.value,
        createTimeStart: getCurDate('start').toString(),
        createTimeEnd: getCurDate('end').toString(),
        userId: ''
    }
    fetchAllData(initialVal.value)
}
const fetchAllData = (defaultValue?: number) => {
    initialVal.value = defaultValue ?? null
    dataOverviewRef.value?.fetchData(form.value)
    coversionProcessChartRef.value?.fetchData(form.value)
    clueStatusPieRef.value?.fetchData(form.value)
    rankRef.value?.fetchData(form.value)
    convertedChartRef.value?.fetchData(form.value)
}
const refreshData = () => {
    rankRef.value?.fetchData(form.value)
}
</script>

<style lang="scss" scoped>
.wokrbench {
    &-center {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
    }
}
</style>
