<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
import type { FormItemRule, FormRules } from 'naive-ui'
import { useDictionary } from '@/store/modules/dictonary'

const props = defineProps<{
  value: string[] | null
  label: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: string[]): void
}>()

const formValue = ref({
  users: props.value,
})

const rules: FormRules = {
  users: [
    {
      required: true,
      type: 'array',
      validator(rule: FormItemRule, value: string[]) {
        if (value == null || value.length === 0)
          return new Error('请选择提报人')

        return true
      },
      trigger: ['blur', 'change'],
    },
  ],
}

const personOptions = ref([])
const configStore = useDictionary()
const labStyle = {
  fontWeight: 'bold',
}

onBeforeMount(async () => {
  const personList = await configStore.fetchPersionList()
  personOptions.value = personList
})

function onChange(value: Array<string>) {
  emit('update:value', value)
}
</script>

<template>
  <n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
    <n-form-item :label="label" path="users" :label-style="labStyle">
      <n-select
        v-model:value="formValue.users" :max-tag-count="2" multiple placeholder="请选择提报人(可多选)"
        :options="personOptions" @update:value="onChange"
      />
    </n-form-item>
  </n-form>
</template>

<style lang="less" scoped></style>
