<template>
    <j-select
        style="width: 100%"
        v-model:value="keys"
        placeholder="请选择标签"
        :options="tagsList"
        @change="onChange"
    />
</template>

<script lang="ts" setup>
import TemplateApi from '@/api/notice/template';

const props = defineProps({
    notify: {
        type: Object,
        default: () => {},
    },
    value: {
        type: String,
        default: ''
    },
});

const emit = defineEmits(['update:value', 'change']);

const tagsList = ref<any[]>([]);
const keys = ref<string | undefined>(undefined);

const getDepartment = async (id: string) => {
    const resp = await TemplateApi.getTags(id);
    if (resp.status === 200) {
        tagsList.value = resp.result.map((item: any) => ({value: item.id, label: item.name}))
    }
};

watch(
    () => props.value,
    (newVal) => {
        keys.value = newVal || undefined
    },
    { immediate: true },
);

watch(
    () => props.notify.notifierId,
    (newVal) => {
        if (newVal) {
            getDepartment(newVal);
        }
    },
    { deep: true, immediate: true },
);

const onChange = (key: string, option: any) => {
    emit('update:value', {
        source: 'fixed',
        value: key,
    });
    emit('change', option ? option?.label : '')
};
</script>

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