<script setup lang="ts">
import { httpList } from '/@/api/components/seal';
import { ElDatePicker } from 'element-plus';
import { useTask } from '/@/hooks/core';
import { ref, watch } from 'vue';

import Dayjs from 'dayjs';
import { useVModel } from '@vueuse/core';

const props = defineProps<{ company_code?: string; modelValue: string }>()
const months = ref<string[]>([])

const value = useVModel(props, 'modelValue')

const listTask = useTask({ success(data){ months.value = data.map(({ fz_date }) => fz_date) } })

watch(
    () => props.company_code, 
    () => {
      if(!props.company_code) return
      listTask.run(httpList({ company_code: props.company_code, status: 0 }))
    }, 
    { immediate: true}
)

function disabledDate(v){
    const nV = Dayjs(v).format('YYYY-MM')
    return !months.value.includes(nV)
}
</script>

<template>
    <ElDatePicker 
        type="month" 
        v-model="value" 
        value-format="YYYY-MM" 
        :disabledDate="company_code ? disabledDate : undefined" 
    />
</template>