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

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

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

const configUseStore = useConfig()

configUseStore.$subscribe(() => {
  if (isLoadValue.value) {
    isLoadValue.value = false
    return
  }
  const asideValue = configUseStore.getAsideValue
  if (asideValue.izshow) {
    if (typeof asideValue.izshow == 'string') {
      const list = asideValue.izshow.split(',')
      formValue.value.plans = list
    }
    else {
      formValue.value.plans = asideValue.izshow
    }
  }
  else {
    formValue.value.plans = []
  }
})
const formValue = ref({
  plans: props.value,
})
if (typeof formValue.value.plans == 'string') {
  const list = formValue.value.plans.split(',')
  formValue.value.plans = list
}
const rules: FormRules = {
  plans: [
    {
      required: false,
      type: 'array',
      trigger: ['blur', 'change'],
    },
  ],
}

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

onBeforeMount(async () => {
  const list = await configStore.fetchIzShowList()
  options.value = list
})
const isLoadValue = ref(false)
function onChange(value: Array<string>) {
  isLoadValue.value = true
  emit('update:value', value)
}
</script>

<template>
  <n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
    <n-form-item :label="label" path="plans" :label-style="labStyle">
      <n-select
        v-model:value="formValue.plans"
        filterable :max-tag-count="2" placeholder="请选择分类" multiple :options="options"
        @update:value="onChange"
      />
    </n-form-item>
  </n-form>
</template>

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