// 比如我們有一個(gè)創(chuàng)建用戶的表單，在上面已經(jīng)應(yīng)用了一個(gè)Reactive類裝飾器
// 用了這個(gè)裝飾器后，這個(gè)類實(shí)例出來(lái)的對(duì)象會(huì)是響應(yīng)式對(duì)象了。
@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可以讓你的庫(kù)同時(shí)在vue2(@vue/composition-api)和vue3中使用
//下面這個(gè)函數(shù)Reactive就是類裝飾器，返回的是繼承之后的類。實(shí)例化之后返回的是reactive對(duì)象
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 {
    // 下面這些是屬性裝飾器，用來(lái)標(biāo)記這些屬性的驗(yàn)條件。
    // 在驗(yàn)證的時(shí)候會(huì)通過(guò)Reflect拿到這些元數(shù)據(jù)來(lái)驗(yàn)證
    // 我們也可以創(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，看個(gè)人習(xí)慣
render(){
  const {form,errors} = this
  return <div>
            <div>
                <p>
                    <span>用戶名</span>
                    <input v-model={form.username}></input>
		</p>
                {!!errors.username && <p>錯(cuò)誤提示:{errors.username}</p>}
            </div>
            // ...一些其他表單
            <button onClick={() => this.validate()}>驗(yàn)證</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')
// 本來(lái)我打算error的類型簡(jiǎn)單的寫成Record<string,any>
// 但是代碼提示太不友好了，寫成這樣的話，可以完美的提示
// 這個(gè)接口寫起來(lái)很麻煩
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是為了防止跟表單屬性重復(fù)
    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() {
        // 一些驗(yàn)證的代碼
    }
    public clearError() {
      this[ERROR] = {}
    }
    private setError(result: ValidationError[]):Record <string,any > {
       // 將error設(shè)置到this[ERROR]上
    }
    private watchFields(parentKeys ? :string[]) {
       // 這里做了單獨(dú)watch每個(gè)屬性，然后單獨(dú)設(shè)置錯(cuò)誤消息
    }
}
    -----------------------------------------    
//上面watchFields這個(gè)方法需要實(shí)例化的時(shí)候單獨(dú)調(diào)用
//所以我們可以放到Reactive裝飾器上，就不需要再手動(dòng)調(diào)用一次了
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 來(lái)使用metadata

class Profile {
    @IsOptional()
    avatar?: string

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

    @IsOptional()
    description?: string
}

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

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

    @IsMobilePhone('zh-CN', null, { message: '請(qǐng)輸入正確的手機(jī)號(hào)碼' })
    phone: string = ''

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

    // 也可以關(guān)聯(lián)其他表單類，但需要下面兩個(gè)裝飾器，用來(lái)關(guā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='手機(jī)' v-model={form.phone} error={form.getError().phone}></field>
            <field label='密碼' v-model={form.password} error={form.getError().password}></field>
            <button onClick={() => form.validate()}>驗(yàn)證</button>
            <button onClick={() => form.clearError()}>清空錯(cuò)誤</button>
        </div>
    )
}
})