import { Modal } from 'ant-design-vue'
import { defineStore } from 'pinia'
import { reactive, h } from 'vue'
import { useSchedulerOnce } from 'flicker-vue-hooks'
import { UserController } from '@/controller'

export const useUserStore = defineStore('userStore', () => {
  const userInfo = reactive({})

  const clearUserInfo = () => {
    return new Promise((resolve) => {
      // 做些什么
      useSchedulerOnce(() => resolve(true), 500)
    })
  }

  const login = async (data: USER.Params.Login) => {
    // 存储用户信息 跳转页面
    await UserController.login({
      ...data,
      password: encryptPassWord(data.password)
    })
  }

  const openUserInfoModal = () => {
    Modal.confirm({
      title: '您确定要退出吗？',
      content: h('a-form', null, [h('a-form-item', { label: '任务名称' }, [h('a-input', null, 2233)])]),
      cancelText: '取消',
      okText: '确定',
      onCancel: () => {},
      onOk: async () => {
        await clearUserInfo()
        // 退出
      }
    })
  }

  const logout = () => {
    Modal.confirm({
      title: '您确定要退出吗？',
      cancelText: '取消',
      okText: '确定',
      onCancel: () => {},
      onOk: async () => {
        await clearUserInfo()
        // 退出
      }
    })
  }

  const encryptPassWord = (password: string) => encodeURI(btoa(password))

  return {
    userInfo,
    login,
    logout,
    clearUserInfo,
    openUserInfoModal,
    encryptPassWord
  }
})
