// 比如我們有一個創(chuàng)建用戶的表單，在上面已經(jīng)應用了一個Reactive類裝飾器
// 用了這個裝飾器后，這個類實例出來的對象會是響應式對象了。
@Reactive()
export class CreateUserForm {
  username:string
  email:string
  password:string
  confirmPassword:string
}

setup() {
  // 如果沒有用裝飾器，則需要 const form = reactive(new CreateUserForm())
  const form = new CreateUserForm()
  return {
    form
  }
}

import {reactive} from 'vue-demi'
// vue-demi可以讓你的庫同時在vue2(@vue/composition-api)和vue3中使用
//下面這個函數(shù)Reactive就是類裝飾器，返回的是繼承之后的類。實例化之后返回的是reactive對象
function Reactive() {
  return function <T extends { new (...args: any[]): {} }>(constructor: T){
    return class extends constructor { 
      constructor(...args: any[]) {
        super(...args) 
        return reactive(this)
      }
    }
  }
}

import { IsEmail, IsMobilePhone, Length } from 'class-validator'
@Reactive()
export class CreateUserForm {
    // 下面這些是屬性裝飾器，用來標記這些屬性的驗條件。
    // 在驗證的時候會通過Reflect拿到這些元數(shù)據(jù)來驗證
    // 我們也可以創(chuàng)建自定義的裝飾器
    @Length(4, 12)
    username: string
    
    @IsEmail()
    email: string

    @IsMobilePhone('zh-CN')
    phone: string

    @Length(4, 12)
    password: string
}

import { validate } from 'class-validator'
setup() {
  const form = new CreateUserForm()
  const errors = reactive< { [x in keyof CreateUserForm]: string} >({})
  const validate = async () => {
    const err = await validate(form)
    err.forEach(e => {
      if (e.constraints) {
        errors[e.property] = Object.values(e.constraints)[0]
      }
    })
  }
  return {
    form,
    errors
  }
}

// 用的是jsx，看個人習慣
render(){
  const {form,errors} = this
  return <div>
            <div>
                <p>
                    <span>用戶名</span>
                    <input v-model={form.username}></input>
		</p>
                {!!errors.username && <p>錯誤提示:{errors.username}</p>}
            </div>
            // ...一些其他表單
            <button onClick={() => this.validate()}>驗證</button>
        </div>
}

import { instanceToPlain } from 'class-transformer'
import { validate, ValidationError } from 'class-validator'
import { toRef, watch } from 'vue-demi'
const ERROR = Symbol('error') 
const IS_VALID = Symbol('isValid')
// 本來我打算error的類型簡單的寫成Record<string,any>
// 但是代碼提示太不友好了，寫成這樣的話，可以完美的提示
// 這個接口寫起來很麻煩
type ValidatorError < T > = { 
    [x in Exclude < keyof T, keyof Validator >] ?:
    T[x] extends PropertyKey ? string: ValidatorRequiredError < T[x] >
}
type ValidatorRequiredError < T > = { 
    [x in Exclude < keyof T, keyof Validator > ] : 
        T[x] extends PropertyKey ? 
        string | undefined:
        T[x] extends Function ? 
        T[x] :
        ValidatorError < T[x] > |undefined
}
type ValidatorJSON < T > = { 
    [x in Exclude < keyof T, keyof Validator > ] : 
    keyof T extends PropertyKey ? T[x] : ValidatorJSON < T[x] >
}

export default abstract class Validator {
    // 這里屬性用symbol是為了防止跟表單屬性重復
    private [ERROR]: ValidatorError <this> ={}
    private [IS_VALID] : boolean = false

    public getError() {
      return this[ERROR]
    }
    public isValid() {
      return this[IS_VALID]
    }
    public toJSON() {
      return instanceToPlain(this) as ValidatorJSON < this >
    }
    public async validate() {
        // 一些驗證的代碼
    }
    public clearError() {
      this[ERROR] = {}
    }
    private setError(result: ValidationError[]):Record <string,any > {
       // 將error設置到this[ERROR]上
    }
    private watchFields(parentKeys ? :string[]) {
       // 這里做了單獨watch每個屬性，然后單獨設置錯誤消息
    }
}
    -----------------------------------------    
//上面watchFields這個方法需要實例化的時候單獨調用
//所以我們可以放到Reactive裝飾器上，就不需要再手動調用一次了
function Reactive() {
  return function <T extends { new (...args: any[]): {} }>(constructor: T){
    return class extends constructor { 
      constructor(...args: any[]) {
        super(...args) 
        const target = reactive(this)
        if (target.watchFields) {
            target.watchFields()
        }
        return target
      }
    }
  }
}

// ./form.ts
import { Type } from 'class-transformer'
import { IsEmail, IsMobilePhone, IsOptional, Length,
	MaxLength, MinLength,  ValidateNested } from 'class-validator'
import 'reflect-metadata'
// 需要引入 reflect-metadata 來使用metadata

class Profile {
    @IsOptional()
    avatar?: string

    @Length(2, 4, {message: '姓名長度應在2到4間'})
    realName: string

    @IsOptional()
    description?: string
}

// 在表單上可以設置初始值，現(xiàn)在是固定的。
// 那也可以通過屬性裝飾器調用api來設置動態(tài)初始值。大家可以自己實現(xiàn)試試看 
@Reactive()
export class CreateUserForm extends Validator {
    @Length(4, 12, { message: '用戶名長度應在4到12間' })
    username: string = ''

    @IsEmail({}, { message: '請?zhí)顚懻_的郵箱' })
    email: string = ''

    @IsMobilePhone('zh-CN', null, { message: '請輸入正確的手機號碼' })
    phone: string = ''

    @MinLength(4, { message: '密碼長度不應低于4' })
    @MaxLength(12, { message: '密碼長度不應大于12' })
    password: string = ''

    // 也可以關聯(lián)其他表單類，但需要下面兩個裝飾器，用來關聯(lián)
    @Type(() => Profile)
    @ValidateNested()
    profile: Profile = new Profile()
}

export default defineComponent({
setup() {
    const form = new CreateUserForm()
    return {
        form
    }
},
render() {
    const { form } = this
    return (
        <div>
            <field label='用戶名' v-model={form.username} error={form.getError().username}></field>
            <field label='姓名' v-model={form.profile.realName} error={form.getError().profile?.realName}></field>
            <field label='郵箱' v-model={form.email} error={form.getError().email}></field>
            <field label='手機' v-model={form.phone} error={form.getError().phone}></field>
            <field label='密碼' v-model={form.password} error={form.getError().password}></field>
            <button onClick={() => form.validate()}>驗證</button>
            <button onClick={() => form.clearError()}>清空錯誤</button>
        </div>
    )
}
})