<script setup>
import {onMounted, reactive} from 'vue';
import Api from "../../api/index.js";
import XSelect from "../XSelect/index.vue";
import UploadAvatar from "../upload/UploadAvatar.vue";

const group = reactive([]);

const {api} = defineProps({
    api: {
        type: Function,
        default: Api.admin.getNoticeType
    }
});
const form = defineModel('form');
onMounted(() => {
    api().then(({data}) => {
        group.length = 0;
        group.push(...data);
    })
})

const getSingle = async () => {
    const {data} = await Api.admin.getSingleList();
    return {
        data: data.list.map(v => ({
            id: v.id,
            name: v.title
        }))
    }
}
</script>

<template>
    <a-form-item label="跳转方式">
        <a-radio-group class="w-full" v-model:model-value="form.type">
            <div class="grid grid-cols-3">
                <a-radio v-for="item in group" :key="item.id" :value="item.id">
                    {{ item.name }}
                </a-radio>
            </div>
        </a-radio-group>
    </a-form-item>

    <a-form-item label="url路径" v-if="[1,3,4].includes(form.type)">
        <a-input v-model:model-value="form.url" placeholder="请输入url路径"></a-input>
    </a-form-item>

    <a-form-item v-if="form.type === 2" label="富文本内容">
        <XSelect
            v-model:model-value="form.single_id"
            :init="true"
            :api="getSingle"
            placeholder="请选择二级分类">
        </XSelect>
    </a-form-item>

    <a-form-item v-if="form.type === 5" label="弹窗内容">
        <a-radio-group v-model:model-value="form.pop_type">
            <a-radio :value="1">图片</a-radio>
            <a-radio :value="2">视频</a-radio>
        </a-radio-group>
    </a-form-item>

    <a-form-item v-if="form.type === 5">
        <UploadAvatar v-if="form.pop_type===1" v-model:files="form.pop_images"></UploadAvatar>
        <UploadAvatar v-else v-model:files="form.pop_video" :multiple="false"></UploadAvatar>
    </a-form-item>
</template>

<style scoped lang="scss">

</style>
