<template>
    <view class="flex flex-col gap-[24rpx] mb-[20rpx]">
        <view class="bg-white">
            <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill" :isFlex="false">
                <u-dropdown-item title="组织">
                    <view class="bg-white">
                        <DropdownPicker
                            :dropdownItem="dropdownMenuList"
                            @reset="() => handleReset('organization')"
                            @confirm="value => handleConfirm('organization', value)"
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="日期">
                    <view class="bg-white p-[20rpx]">
                        <dateDropdownPicker
                            :dropdownItem="dropdownMenuList2"
                            @reset="() => handleReset('date')"
                            @confirm="value => handleConfirm('date', value)"
                        />
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view>
        <data-overview ref="dataOverviewRef" />
        <converted-overview ref="convertedOverviewRef" />
        <rank ref="rankRef" />
        <clue-status ref="clueStatusRef" />
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import dataOverview from './components/data-overview.vue'
import convertedOverview from './components/converted-overview.vue'
import rank from './components/rank.vue'
import clueStatus from './components/clue-status.vue'
import DropdownPicker from '../orga-picker.vue'
import dateDropdownPicker from '@/components/date-dropdown/daterange.vue'

const clueStatusRef = ref<InstanceType<typeof clueStatus>>()
const rankRef = ref<InstanceType<typeof rank>>()
const convertedOverviewRef = ref<InstanceType<typeof convertedOverview>>()
const dataOverviewRef = ref<InstanceType<typeof dataOverview>>()
const uDropdownRef = ref()
const dropdownMenuList = [
    {
        label: '级联X1',
        value: '1',
        children: [
            {
                label: '级联X11',
                value: '11'
            },
            { label: '级联X12', value: '12' }
        ]
    },
    {
        label: '级联X2',
        value: '2',
        children: [
            { label: '级联X21', value: '21' },
            { label: '级联X22', value: '22' }
        ]
    }
]
const dropdownMenuList2 = {
    showQuick: true,
    title: '日期范围',
    type: 'daterange',
    prop: 'god6'
    // 默认选中 2022-01-01到2022-02-01
    // value: { start: '2022-01-01', end: '2022-02-01' },
}
const handleConfirm = (type: string, item) => {
    switch (type) {
        case 'organization':
            console.log(item)
            break
        case 'date':
            console.log(item)

            break
        default:
            break
    }
}
const handleReset = (type: string) => {
    switch (type) {
        case 'organization':
            break
        case 'date':
            break
        default:
            break
    }
}
const closeDropDown = () => {
    uDropdownRef.value.close()
}
onMounted(() => {
    dataOverviewRef.value?.fetchData()
    convertedOverviewRef.value?.fetchData()
    rankRef.value?.fetchData()
    clueStatusRef.value?.fetchData()
})
</script>
<style scoped></style>
