import { Component, Vue } from 'vue-property-decorator'
import { Getter, namespace } from 'vuex-class'
import { SysDictionaryDto as Dictionary } from '@/api/swagger'

const dictModule = namespace('dictionary')
/**
 * 动态表单项组件的混入
 */
@Component({
  name: 'DictionaryMixin',
})
export default class DictionaryMixin extends Vue {
  /**
   * 字典集合
   */
  public readonly $dictionaryMap: { [key: string]: Dictionary[] } = {}

  @dictModule.Action('fetch')
  private readonly dictModuleBatchFetch!: (params: { codes: string[] }) => Promise<Dictionary[]>

  @Getter('dictionaryGetter')
  private readonly getterHelper!: (key: string) => Dictionary[]

  /**
   * 拉取字典
   * @param keys dictionary store里面的字典state值
   */
  public async $fetchDictionary(codes: string[]) {
    const directories = await this.dictModuleBatchFetch({ codes })

    if (Array.isArray(codes)) {
      codes.forEach((key) => {
        this.$set(this.$dictionaryMap, key, this.getterHelper(key))
      })
    } else {
      this.$set(this.$dictionaryMap, codes, this.getterHelper(codes))
    }

    return directories
  }
}