<script setup>
import XImage from "../../../components/XImage/Index.vue";
import {ref} from "vue";

const visible = ref(false);
const emits = defineEmits(['edit']);
const {id, material, disabled} = defineProps({
    id: {
        type: Number,
        default: null,
    },
    material: {
        type: Object,
        default: null,
    },
    disabled: {
        type: Boolean,
        default: false,
    }
});

const edit = () => {
    visible.value = false;
    emits('edit');
}
</script>

<template>
    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
        添加素材
    </a-button>
    <div @click="visible=true" v-else class="cursor-pointer">
        <slot></slot>
    </div>

    <a-modal
        v-model:visible="visible"
        title-align="start"
        title="素材">
        <div class="grid grid-cols-4">
            <div v-for="(v, index) in material.material" :key="index"
                 class="flex flex-col justify-center items-center gap-[10px]">
                <x-image :src="v" :hide-delete="true"></x-image>
                素材{{ index }}
            </div>
        </div>
        <template #footer>
            <div class="flex gap-[12px] justify-end">
                <a-button @click="edit" :disabled="disabled">编辑素材</a-button>
                <a-button @click="visible=false" type="primary">确定</a-button>
            </div>
        </template>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
