import { message } from 'ant-design-vue';
import { computed, onMounted, ref } from 'vue'
import { getAPisHttp, deleteApisHttp, updateApisHttp } from '../apis';
import { Pagination } from '@/types'
import { getPageCurrentUtil } from '@/utils';
import { IApi } from './../types/index';


export const useApliList = () => {
    const page = ref({
        pageSize: 10,
        current: 1,
    })
    // 返回查询列表的字段
    const { loading: queryLoading, request: requestApiList, result } = getAPisHttp<IApi[]>()
    // 删除列表项
    const { loading: deleteLoading, request: requestDelete } = deleteApisHttp<IApi>()
    /**
     * 计算分页参数 给table pagination使用
     */
    const pagination = computed({
        get() {
            const { pageSize, current } = page.value
            const total = result.value?.total || 0
            return {
                current,
                pageSize,
                total
            }
        },
        set(opt: Pagination) {
            const { pageSize, current } = opt
            Object.assign(page.value, {
                pageSize,
                current
            })
        }
    })
    const loading = computed(() => {
        return queryLoading.value || deleteLoading.value
    })
    /**
     * 计算数据源
     */
    const dataSource = computed(() => {
        return result.value?.data || []
    })
    /**
     * 调用查询请求
     */
    const handleSearchList = () => {
        const { pageSize, current } = pagination.value
        const params = {
            pageSize,
            current
        }
        requestApiList(undefined, params)
    }
    /**
     * 调用删除请求
     */
    const handleDelete = (id: IApi['_id']) => {
        requestDelete(() => {
            message.success('删除成功')
            handleChange({
                current: getPageCurrentUtil(pagination.value.current, dataSource.value.length),
                pageSize: pagination.value.pageSize
            })
        }, { id })
    }
    /**
     * 监听分页事件
     */
    const handleChange = (p: Pagination) => {
        pagination.value = p
        handleSearchList()
    }

    onMounted(() => {
        handleSearchList()
    })

    return {
        loading,
        pagination,
        dataSource,
        handleChange,
        handleDelete
    }
}