<template>
    <view class="flex-1 h-full flex flex-col">
        <u-dropdown ref="uDropdownRef" menu-icon="arrow-down-fill">
            <u-dropdown-item title="岗位">
                <view class="bg-white">
                    <view>
                        <view
                            v-for="item in positionList"
                            :key="item.id"
                            class="cell p-[24rpx] border-b border-solid border-[#f1f1f1]"
                            :class="{ active: postId == item.id }"
                            @click="handleCellClick(item)"
                        >
                            <text>{{ item.label }}</text>
                            <template v-if="postId == item.id">
                                <TIcon name="icon-check" color="#0E66FB" />
                            </template>
                        </view>
                    </view>
                    <view class="flex justify-between p-[32rpx] gap-[32rpx]">
                        <view class="flex-1">
                            <u-button class="btn" type="primary" plain text="重置"></u-button>
                        </view>
                        <view class="flex-1">
                            <u-button class="btn" type="primary" text="确定"></u-button>
                        </view>
                    </view>
                </view>
            </u-dropdown-item>
            <u-dropdown-item title="组织">
                <view class="bg-white">
                    <DropdownPicker :dropdownItem="dropdownMenuList" />
                    <view class="flex justify-between p-[32rpx] gap-[32rpx]">
                        <view class="flex-1">
                            <u-button class="btn" type="primary" plain text="重置"></u-button>
                        </view>
                        <view class="flex-1">
                            <u-button class="btn" type="primary" text="确定"></u-button>
                        </view>
                    </view>
                </view>
            </u-dropdown-item>
        </u-dropdown>
        <view class="flex-1 mt-3 px-[32rpx] overflow-auto bg-[#FAFAFE]">
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <template v-for="(item, index) in dataList" :key="`unique_${index}`">
                    <telesale-card
                        v-if="postId == 5"
                        :item="item"
                        @handleCardClick="handleCardClick"
                    />
                    <recruitsale-card
                        v-if="postId == 6"
                        :item="item"
                        @handleCardClick="handleCardClick"
                    />
                </template>
            </z-paging>
        </view>
        <!-- <DropdownPicker :dropdownItem="dropdownMenuList" /> -->
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import positionTabs from './components/position-tabs.vue'
import DaDropdown from '@/components/da-dropdown/index.vue'
import DropdownPicker from '../orga-picker.vue'
import telesaleCard from './components/telesale-card.vue'
import recruitsaleCard from './components/recruitsale-card.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'

const positionList = [
    {
        label: '电销老师',
        id: 5,
        value: 5
    },
    {
        label: '招生老师',
        id: 6,
        value: 6
    }
]
const postId = ref()
const handleCellClick = (item: any) => {
    const { id } = item
    postId.value = id
}
const dropdownMenuList = [
    {
        label: '级联X1',
        value: '1',
        children: [
            {
                label: '级联X11',
                value: '11',
                children: [
                    { label: '级联X111', value: '111' },
                    { label: '级联X122', value: '122' }
                ]
            },
            { label: '级联X12', value: '12' }
        ]
    },
    {
        label: '级联X2',
        value: '2',
        children: [
            { label: '级联X21', value: '21' },
            { label: '级联X22', value: '22' }
        ]
    }
]

const queryParams = ref({
    likeWork: ''
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiTeleClueList,
    () => {}
)
const handleCardClick = (type: string, item: any) => {
    const { id } = item
    switch (type) {
        case 'telesale':
        case 'recruitsale':
            uni.navigateTo({
                url: '/bundle/pages/clue-list/index?id=' + id + '&type=' + type
            })
            break
        default:
            break
    }
}
</script>

<style scoped lang="scss">
.cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.active {
        color: $blue-1;
    }
}
:deep(.btn) {
    button {
        @apply h-[72rpx] rounded-[12rpx];
    }
}
</style>
