<template>
    <TContainer>
        <TSearch
            v-model="queryParams.likeWork"
            placeholder="搜索客户姓名/手机号码"
            backgroundColor="#F5F5F5"
            showBorder
            @on-input="searchChange"
        />
        <u-tabs
            :list="tabs"
            :scrollable="false"
            :itemStyle="{ height: '44px', flex: 1 }"
            :activeStyle="{ color: '#0E66FB' }"
            lineWidth="49"
            lineColor="#0E66FB"
            @change="handleChangeTab"
        ></u-tabs>
        <view class="flex-1 pt-[24rpx] px-[24rpx] overflow-auto bg-[#F8F8F8]">
            <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"
                    @handle-update-remark="handleUpdateRemark"
                    @refresh-page="refresh"
                />
            </z-paging>
        </view>
    </TContainer>
    <w-confirm-popup v-model="popupShow" @confirm="handleConfirm">
        <template #content>
            <TTextareaField v-model="contentText" border="surround" :required="false" />
        </template>
    </w-confirm-popup>
</template>

<script setup lang="ts">
import { useZPaging } from '@/hooks/useZPaging'
import { ref, onMounted, shallowRef, computed, onUnmounted } from 'vue'
import { debounce } from 'lodash-es'
import clueCard from '@/components/widgets/recruitsale/clue-card.vue'
import { apiCluseList, apiEditRemark } from '@/api/clue'
import { converStatusEnum } from '@/enums'
import { toast } from '@/utils/util'
import { onLoad, onUnload } from '@dcloudio/uni-app'

const tabs = shallowRef([
    { name: '待领取', value: converStatusEnum.UN_RECEIVED },
    { name: '转化中', value: converStatusEnum.CONVERTED_PROCESS },
    { name: '已成交', value: converStatusEnum.CONVERTED },
    { name: '已战败', value: converStatusEnum.FAILED }
])
const activeTab = ref(converStatusEnum.UN_RECEIVED)
const queryParams = computed(() => {
    const payload = {
        situation: activeTab.value,
        likeWork: ''
    }
    return payload
})
const dataList = ref([])
const { paging, queryList, refresh, changeApi, setParams } = useZPaging(
    queryParams.value,
    apiCluseList,
    () => {}
)
const handleChangeTab = item => {
    activeTab.value = item.value
    refresh(queryParams.value)
}
const popupShow = ref(false)
const contentText = ref('')
const clueId = ref('')
const handleUpdateRemark = item => {
    const { id, remark } = item
    popupShow.value = true
    contentText.value = remark
    clueId.value = id
}
const handleConfirm = async () => {
    try {
        const params = {
            id: clueId.value,
            remark: contentText.value
        }
        await apiEditRemark(params)
        toast('修改备注成功')
        refresh(queryParams.value)
    } catch (error) {}
}
function addProgress() {
    refresh(queryParams.value)
}
function completeClue() {
    refresh(queryParams.value)
}
onLoad(() => {
    uni.$on('addProgress', addProgress)
    uni.$on('completeClue', completeClue)
})
onUnload(() => {
    uni.$off('addProgress', addProgress)
    uni.$off('completeClue', completeClue)
})
const searchChange = debounce(() => {
    refresh(queryParams.value)
}, 300)
</script>
<style scoped></style>
