<script setup>
import XImage from "../../../components/XImage/Index.vue";
import {onMounted, reactive, ref} from "vue";
import Api from "../../../api/index.js";

const selectList = defineModel('select-list');
const type = ref(0);
const list = reactive([]);
const {id} = defineProps({
    id: {
        type: Number,
        default: null,
    }
});

const getMaterialList = async () => {
    const {data} = await Api.merchant.getMaterialList(id);
    list.length = 0;
    list.push(...data);
}

onMounted(() => {
    getMaterialList();
});
const select = (v) => {
    const flag = selectList.value.findIndex(k => k.id === v.id);
    console.log(flag);
    if (flag !== -1) { // 删除
        selectList.value.splice(flag, 1);
    } else { // 新增
        selectList.value.push(v);
    }
}
const handleImage = async () => {
    if (type.value === 0) {
        selectList.value.filter(v => typeof v.id === 'number').forEach(v => {
            Api.merchant.delMaterial(v.id);
        });
    }
}

defineExpose({
    getMaterialList,
    handleImage
});
</script>

<template>
    <div class="source">
        <div>
            <a-radio-group v-model:model-value="type">
                <a-radio :value="0">添加并从素材库删除</a-radio>
                <a-radio :value="1">添加并在素材库保留</a-radio>
            </a-radio-group>
        </div>
        <div class="mt-[12px] grid grid-cols-8 gap-[14px]">
            <div
                @click="select(v)"
                :class="['checkbox-image', selectList.find(k => k.id===v.id)?'select':'']"
                v-for="v in list"
                :key="v.id">
                <x-image
                    :preview="false"
                    fit="contain"
                    :src="v.image"
                    width="100%"
                    height="100%">
                </x-image>
            </div>
        </div>
    </div>
</template>

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

.checkbox-image {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1/1;
    border: 1px solid #E5E6EB;
    overflow: hidden;
    transition: 300ms;
    position: relative;

    &::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        width: 14px;
        height: 14px;
        background-color: rgb(var(--arcoblue-6));
        border-top-left-radius: 2px;
        background-image: url("../../../assets/images/Combined.png");
        background-size: 9px 9px;
        background-repeat: no-repeat;
        background-position: 3px 3px;
        transition: 300ms;
        opacity: 0;
    }
}

.select {
    border: 1px solid rgb(var(--arcoblue-6));

    &::after {
        opacity: 1;
    }
}
</style>
