<template>
    <view class="flex flex-col gap-[24rpx] mb-[20rpx]">
        <dropdownPicker
            ref="dropdownPickerRef"
            v-model="form"
            @refresh-page="refreshPage"
            @confirm="confirm"
        />
        <!-- <view class="bg-white">
            <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
                <u-dropdown-item title="团队">
                    <view class="bg-white">
                        <selectDropdown
                            ref="teamDropdownRef"
                            :dropdownItem="dropdownMenuTeamList"
                            :dropdownIndex="1"
                            @reset="() => handleReset('team')"
                            @confirm="
                                (value, dropdownIndex) =>
                                    handleConfirm('team', value, dropdownIndex)
                            "
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="组织">
                    <view class="bg-white">
                        <selectDropdown
                            ref="orgDropdownRef"
                            :dropdownItem="dropdownMenuAllOrgaList"
                            :dropdownIndex="2"
                            @reset="() => handleReset('organization')"
                            @confirm="
                                (value, dropdownIndex) =>
                                    handleConfirm('organization', value, dropdownIndex)
                            "
                        />
                    </view>
                </u-dropdown-item>
                <u-dropdown-item title="日期">
                    <view class="bg-white p-[20rpx]">
                        <dateDropdownPicker
                            :dropdownItem="dropdownMenuDateList"
                            :dropdownIndex="3"
                            @reset="() => handleReset('date')"
                            @confirm="
                                (value, dropdownIndex, dateTag) =>
                                    handleConfirm('date', value, dropdownIndex, dateTag)
                            "
                        />
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </view> -->
        <filter-value :form="form" :activeTab="activeTab" :organizationList="organizationList" />
        <data-overview ref="dataOverviewRef" />
        <converted-overview ref="convertedOverviewRef" />
        <rank ref="rankRef" @refresh="refreshData" />
        <clue-status ref="clueStatusRef" />
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref, PropType } 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 dateDropdownPicker from '@/components/date-dropdown/daterange.vue'
import dropdownPicker from '../dropdown-picker.vue'
import selectDropdown from '@/components/select-dropdown/index.vue'
import filterValue from '../filter-value.vue'
import { apiOrganizationByIdList, apiOrganizationList, apiOrganizationTeamList } from '@/api/admin'
import { formateDate, getCurDate } from '@/utils/util'
import { AdminTabEnum } from '@/enums'

export interface IForm {
    organizationId: number | null
    createTimeStart: string
    createTimeEnd: string
    userId: string
}

defineProps({
    activeTab: {
        type: Number as PropType<AdminTabEnum>,
        default: AdminTabEnum.TEAM
    }
})
const dropdownPickerRef = ref<InstanceType<typeof dropdownPicker>>()
const teamDropdownRef = ref<InstanceType<typeof selectDropdown>>()
const orgDropdownRef = ref<InstanceType<typeof selectDropdown>>()
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 organizationList = ref([])
const defaultValue = ref() //保存组织默认值
const form = ref<IForm>({
    organizationId: null,
    createTimeStart: getCurDate('start'),
    createTimeEnd: getCurDate('end'),
    userId: ''
})
const dropdownMenuDateList = {
    showQuick: true,
    title: '日期范围',
    type: 'daterange',
    prop: 'god6',
    value: { start: getCurDate('start', 'YYYY-MM-DD'), end: getCurDate('end', 'YYYY-MM-DD') }
}
const dropdownMenuTeamList = ref({
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    options: []
})
const dropdownMenuAllOrgaList = ref({
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    options: []
})
const menuIndexArr = ref<number[]>([])
const refreshPage = () => {
    fetchAllData()
}
const confirm = payload => {
    menuIndexArr.value = Array.from(new Set([...menuIndexArr.value, payload.dropdownIndex]))
    rankRef.value?.setSelectedIndexArr(menuIndexArr.value, payload?.dateTag)
}
// 查询条件
const handleConfirm = (type: string, item, dropdownIndex: number, dateTag?: string) => {
    switch (type) {
        case 'organization':
        case 'team':
            // 清空选择条件
            dropdownIndex == 1
                ? orgDropdownRef.value.clearSelect()
                : teamDropdownRef.value.clearSelect()
            form.value.organizationId = item.value
            break
        case 'date':
            form.value.createTimeStart = formateDate(item.start, 'start')
            form.value.createTimeEnd = formateDate(item.end, 'end')
            break
        default:
            break
    }
    fetchAllData()
    closeDropDown()
    menuIndexArr.value = Array.from(new Set([...menuIndexArr.value, dropdownIndex]))
    rankRef.value?.setSelectedIndexArr(menuIndexArr.value, dateTag)
}
// 重置条件
const handleReset = (type: string) => {
    switch (type) {
        case 'organization':
            break
        case 'date':
            form.value.createTimeStart = getCurDate('start')
            form.value.createTimeEnd = getCurDate('end')
            break
        case 'team':
            form.value.organizationId = defaultValue.value
            break
        default:
            break
    }
    fetchAllData()
    closeDropDown()
}
const closeDropDown = () => {
    uDropdownRef.value.close()
}
const refreshData = () => {
    rankRef.value?.fetchData(form.value)
}
onMounted(async () => {
    // await fetchOrganizationList()
    await dropdownPickerRef.value?.fetchOrganizationList()
    organizationList.value = dropdownPickerRef.value?.organizationList
    fetchAllData()
})
const fetchAllData = () => {
    dataOverviewRef.value?.fetchData(form.value)
    convertedOverviewRef.value?.fetchData(form.value)
    rankRef.value?.fetchData(form.value)
    clueStatusRef.value?.fetchData(form.value)
}
// 获取主账号下的所有组织架构
const fetchOrganizationList = async () => {
    try {
        const result = await apiOrganizationList()
        organizationList.value = result ?? []
        if (result.length > 0) {
            form.value.organizationId = result[0].id
            defaultValue.value = result[0].id
        }
    } catch (error) {}
}
// 获取团队列表
const fetchTeamList = async () => {
    try {
        const result = await apiOrganizationTeamList()
        dropdownMenuTeamList.value.options =
            result.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            }) ?? []
    } catch (error) {}
}
// 获取组织列表
const fetchAllOrganizationList = async () => {
    try {
        const result = await apiOrganizationByIdList()
        dropdownMenuAllOrgaList.value.options =
            result.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            }) ?? []
    } catch (error) {}
}

// fetchTeamList()
// fetchAllOrganizationList()
</script>
<style scoped></style>
