<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'
import { useFinal } from '@/store/modules/final'

const configUseStore = useConfig()

configUseStore.$subscribe(() => {
  if(isLoadValue.value) {
    isLoadValue.value = false;
    return
  }
  let asideValue = configUseStore.getAsideValue;
  if(asideValue['izplan']) {
    if(typeof asideValue['izplan'] == "string") {
      let list = asideValue['izplan'].split(',');
      formValue.value.plans = list;
    }else {
      formValue.value.plans = asideValue['izplan'];
    }    
    console.log("formValue.value.izplan", formValue.value.plans);
  }else {
    formValue.value.plans = [];
  }
});

const finalStore = useFinal()
finalStore.$subscribe(() => {
  if(isLoadValue.value) {
    isLoadValue.value = false;
    return
  }
  let asideValue = finalStore.getAsideValue;
  if(asideValue && asideValue['izplan']) {
    if(typeof asideValue['izplan'] == "string") {
      let list = asideValue['izplan'].split(',');
      formValue.value.plans = list;
    }else {
      formValue.value.plans = asideValue['izplan'];
    }    
    console.log("formValue.value.izplan", 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 planOptons = ref([])
const configStore = useDictionary()
const labStyle = {
  fontWeight: 'bold',
}

onBeforeMount(async () => {
  const planList = await configStore.fetchPlanList()
  planOptons.value = planList
})
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 clearable
        v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择计划" multiple :options="planOptons"
        @update:value="onChange"
      />
    </n-form-item>
  </n-form>
</template>

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