<template>
    <view class="flex flex-col h-screen">
        <view class="flex items-center justify-between">
            <view class="flex-1 overflow-auto">
                <u-tabs
                    :list="tabs"
                    :itemStyle="{ height: '44px', flex: 1 }"
                    :activeStyle="{ color: '#0E66FB' }"
                    lineWidth="32"
                    lineColor="#0E66FB"
                    :scrollable="isScrollable"
                    @change="handleChangeTab"
                ></u-tabs>
            </view>
            <view class="mr-[32rpx]">
                <TIcon name="icon-filter" color="#999" />
            </view>
        </view>
        <TSearch
            v-model="queryParams.likeWork"
            placeholder="搜索客户姓名/手机号码"
            backgroundColor="#F5F5F5"
            @on-input="searchChange"
        />
        <view class="flex-1 px-[32rpx] pt-[24rpx] overflow-auto bg-[#FAFAFE]">
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <clue-card
                    v-for="(item, index) in dataList"
                    :key="`${index} + 'unique'`"
                    :item="item"
                />
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, shallowRef } from 'vue'
import clueCard from './components/clue-card.vue'
import { useZPaging } from '@/hooks/useZPaging'
import { apiTeleClueList } from '@/api/clue'
import { computed } from 'vue'
import { debounce } from 'lodash-es'

const queryParams = ref({
    likeWork: ''
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiTeleClueList
)
const activeTab = ref(0)
const tabOptions: Record<string, any[]> = {
    telesale: [
        { name: '全部', value: 0 },
        { name: '未领取', value: 1 },
        { name: '已领取', value: 2 },
        { name: '异常待处理', value: 3 }
    ],
    recruitsale: [
        { name: '转化中', value: 0 },
        { name: '已添加', value: 1 },
        { name: '异常待处理', value: 2 },
        { name: '已成交', value: 3 },
        { name: '已战败', value: 4 }
    ]
}
const tabs = computed(() => tabOptions[type.value])
const isScrollable = computed(() => tabs.value?.length >= 5)
const handleChangeTab = item => {
    activeTab.value = item.value
}
const searchChange = debounce(() => {
    refresh(queryParams.value)
}, 300)

const type = ref('')
onLoad(option => {
    if (option.id) {
        uni.setNavigationBarTitle({
            title: '张三'
        })
        type.value = option.type ?? ''
    }
})
</script>
<style scoped></style>
