import { shallowRef, watch } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { getTableColumns } from '@/business/table'
import { Category } from '@/constants/diamond'
import { useFavoriteStore } from '@/stores'

export function useFavorite() {
    const { loading, favoriteList, getFavoriteList } = useFavoriteStore()
    const { dataList, total, pageIndex, pageSize, selectList, buttonList } = useDataTable<Ermcp.MyFavoriteRsp>({ pagination: true })
    const columns = shallowRef(getTableColumns('favorite'))

    selectList.value = [
        {
            label: '商品分类',
            key: 'zscategory',
            options: [
                { label: '单颗裸钻', value: Category.Diamond },
                { label: '单颗彩钻', value: Category.Fancy }
            ],
        },
    ]

    watch(favoriteList, (data) => {
        total.value = data.length
        dataList.value = data
    }, {
        immediate: true
    })

    return {
        loading,
        dataList,
        columns,
        total,
        pageIndex,
        pageSize,
        selectList,
        buttonList,
        getFavoriteList,
    }
}