import { reactive } from 'vue'
import { FunctionalComponent } from 'vue'

interface LoginWay {
    component_show: boolean
    icon_component: FunctionalComponent,
    icon_show: boolean
    icon_desc: string
}

export type WayBase = Record<string, Pick<LoginWay, 'icon_component' | 'icon_desc'>>

export type LoginWayRecord = Record<string, LoginWay>

// 登录方式动作
export default class LoginWayAction <T extends WayBase = any>{

    // 记录值
    private _last: string | number = ''

    // 结果对象
    ways: LoginWayRecord = {}

    // 构造函数初始化
    constructor(wayBases: T) {
        // 遍历对象键
        Object.keys(wayBases).forEach((key, index) => {
            // 先断言为交叉类型
            let way = wayBases[key] as LoginWay
            // 依据条件挂载额外属性
            0 === index ? (this._last = key, way['component_show'] = Boolean(true), way['icon_show'] = Boolean(false)) : (way['component_show'] = Boolean(false), way['icon_show'] = Boolean(true))
            // 重赋值
            this.ways[key] = way
        }
        )
        // 转换为响应式对象
        this.ways = reactive<LoginWayRecord>(this.ways)
    }

    // 登录方式切换方法
    public change(active: string | number): void {
        let lastWay = this.ways[this._last]
        let activeWay = this.ways[active]
        // 记录值对应操作组件隐藏, 图标组件显示
        lastWay.component_show = Boolean(false)
        lastWay.icon_show = Boolean(true)
        // 当前值对应操作组件隐藏, 图标组件显示
        activeWay.component_show = Boolean(true)
        activeWay.icon_show = Boolean(false)
        // 更新记录值
        this._last = active
    }
}



// 登录方式数据
const wayObjs = {
  username: { 
    icon_component: UserOutlined,
    icon_desc: '用户',
  },
  mobile: {
    icon_component: MobileOutlined,
    icon_desc: '手机'
  }
}

// 表单动作
const { formRef, formData, formRules, cleanForm, formFinish, formFinishFailed, formSubmit } = formAction()
// 登录方式对象
const wayAction: LoginWayAction = new LoginWayAction(wayObjs)

我补全来，您再帮我看下, 还是不行