<script setup>
import {reactive, ref, watch} from "vue";
import JumpMethod from '../../../../../components/JumpMethod/index.vue';
import UploadOne from "../../../../../components/upload/UploadOne.vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const {detail, position} = defineProps({
    detail: {
        type: Object,
        default: {},
    },
    position: {
        type: Number,
        default: 1,
    }
});
const emits = defineEmits(['success']);
const visible = ref(false);
watch(
    () => visible.value,
    (val) => {
        if (val) {
            Object.assign(form, detail);
            if (form.single_id === 0) form.single_id = null;
            if (form.pop_type === 0) form.pop_type = 1;
        }
    }
)
const form = reactive({
    file: null,
    files: [],
    pop_images: [],
    pop_video: [],
    single_id: null,
    pop_type: 1,
    type: 0,
});

const success = async () => {
    if (detail.id) {
        const {msg} = await Api.admin.editADV({
            ...form,
            position
        });
        Message.success(msg);
    } else {
        const {msg} = await Api.admin.addADV({
            ...form,
            position
        });
        Message.success(msg);
    }

    emits('success');
}
</script>

<template>
    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
        <template #icon>
            <icon-plus/>
        </template>
        新建
    </a-button>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        title="编辑平台消息"
        title-align="start"
        @ok="success"
        v-model:visible="visible">
        <a-form layout="vertical">
            <a-form-item label="封面">
                <div class="w-full h-[140px]">
                    <upload-one v-model:file="form.file"></upload-one>
                </div>
            </a-form-item>
            <JumpMethod v-model:form="form" :api="Api.admin.getADVType"></JumpMethod>
        </a-form>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
