import { toValue, useAsyncState, watchOnce } from '@vueuse/core' import type { MaybeRefOrGetter } from 'vue' import { ref, watch } from 'vue' import { deleteModelService, getAllModelServices } from '@/api/product/model' import { useMessage } from '@/hooks/web/useMessage' import { useModal } from '@/components/Modal' import type { ModelService } from '@/api/product/types' export function useModelService(productId: MaybeRefOrGetter, defaultModelId?: string) { const selectedModelId = ref() const { state, execute } = useAsyncState( () => getAllModelServices(toValue(productId) as string), [], { resetOnExecute: false, immediate: toValue(productId) !== undefined, }, ) watch(() => toValue(productId), () => execute()) watchOnce(state, () => { if (state.value.length > 0) selectedModelId.value = defaultModelId || state.value[0].id }) const [registerModelServiceModal, { openModal }] = useModal() async function handleDeleteModelService(id: string) { try { await deleteModelService(id) useMessage().createMessage.success('删除成功') execute() } catch {} } return { selectedModelId, setSelectedModelId: (id: string) => selectedModelId.value = id, reloadModelService: execute, modelServiceList: state, handleDeleteModelService, registerModelServiceModal, openModelServiceModal: openModal, } }