<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 configUseStore = useConfig()

configUseStore.$subscribe(() => {
  if(isLoadValue.value) {
    isLoadValue.value = false;
    return
  }
  let asideValue = configUseStore.getAsideValue;
  if(asideValue['izcustomname']) {
    if(typeof asideValue['izcustomname'] == "string") {
      let list = asideValue['izcustomname'].split(',');
      formValue.value.plans = list;
    }else {
      formValue.value.plans = asideValue['izcustomname'];
    }
    console.log("formValue.value.izcustomname", formValue.value.plans);
  }else {
    formValue.value.plans = [];
  }
});
const props = defineProps<{
  value: string[] | null
  label: string
}>()

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

const formValue = ref({
  plans: props.value,
})
if(typeof formValue.value.plans == "string") {
  let 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.fetchizcustomnameList()
  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 filterable
        v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择拜访客户名称" multiple
        :options="options" @update:value="onChange"
      />
    </n-form-item>
  </n-form>
</template>

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