<script setup>
import {reactive, ref, watch} from "vue";
import XImage from "../../../components/XImage/Index.vue";
import UploadButton from "../../../components/upload/UploadButton.vue";
import Api from "../../../api/index.js";
import {v4} from "uuid";
import MaterialSource from "./MaterialSource.vue";
import {useSystemStore} from "../../../pinia/SystemStore/index.js";
import {vDraggable} from 'vue-draggable-plus'

const SystemStore = useSystemStore();
const MaterialSourceRef = ref();
const visible = ref(false);
const targetList = reactive([]);
const emits = defineEmits(['success']);
const {id, material, disabled, hiddenMaterial} = defineProps({
    id: {
        type: Number,
        default: null,
    },
    material: {
        type: Object,
        default: null,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    hiddenMaterial: {
        type: Boolean,
        default: false,
    }
});

const uploadSuccess = (url) => {
    targetList.push({
        id: v4(),
        image: url,
    });
}

watch(
    () => visible.value,
    (val) => {
        if (val) {
            MaterialSourceRef.value?.getMaterialList();
            targetList.length = 0;
            material.material?.forEach(v => uploadSuccess(v));
        }
    }
)

const open = () => {
    visible.value = true;
}

defineExpose({
    open
});

const success = async () => {
    emits('success', targetList.map(v => v.image));
    MaterialSourceRef.value.handleImage();
}
</script>

<template>
    <!-- 素材库 -->
    <a-button v-if="!$slots.default" type="primary" @click="disabled ? null : visible=true">
        添加素材
    </a-button>
    <div @click="disabled ? null : visible=true" v-else>
        <slot></slot>
    </div>

    <a-modal
        @ok="success"
        title-align="start"
        :width="820"
        v-model:visible="visible"
        title="添加素材">
        <div class="target">
            <div class="text-[#1D2129] text-[14px]">已添加{{ targetList.length }}个素材（长摁图片可拖动排序）</div>
            <div
                v-draggable="[
                    targetList,
                    {
                        animation: 150,
                    }
                ]"
                class="grid grid-cols-6 mt-[10px] gap-[16px]">
                <x-image
                    @delete="targetList.splice(index,1)"
                    v-for="(v, index) in targetList"
                    :key="v.id"
                    :src="v.image"
                    :aspect="true"
                    width="100%"
                    height="100%">
                </x-image>
            </div>
        </div>

        <div class="mt-[20px]">
            <div class="text-[#1D2129] text-[14px] mb-[12px]">从本地添加</div>
            <UploadButton :multiple="true" :api="SystemStore.isRoot ? Api.system.uploadFile : Api.system.uploadFile2"
                          @success="uploadSuccess">
                <template #upload-button>
                    <a-button>
                        <template #icon>
                            <icon-upload/>
                        </template>
                        本地上传
                    </a-button>
                </template>
            </UploadButton>
        </div>

        <div class="mt-[20px]" v-if="!SystemStore.isRoot && !hiddenMaterial">
            <div class="text-[#1D2129] text-[14px] mb-[12px]">从素材库添加</div>
            <MaterialSource
                ref="MaterialSourceRef"
                v-model:select-list="targetList"
                :id="id">
            </MaterialSource>
        </div>
    </a-modal>
</template>

<style scoped lang="scss">
.target {
    @apply p-[20px] bg-[#F7F8FA];
    border: 1px solid #E5E6EB;
}
</style>
