<template>
    <el-dialog v-model="dialogVisible" width="672" align-center append-to-body class="quick-media-dialog">
        <div class="media-dialog hidden round-12">
            <div class="flex-between px-18 py-16">
                <div class="flex-items-center gap-8">
                    <el-icon class="color-main fs-18">
                        <Picture />
                    </el-icon>
                    <h3 class="fs-16 lh-24 color-000">选择参考素材</h3>
                </div>
                <el-button class="close-btn wh-28 p-0 border-none bg-none color-888 pointer" circle
                    @click="dialogVisible = false">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button>
            </div>

            <div class="flex-between px-14 pb-14">
                <div class="media-tabs flex-items-center h-32 p-4 round-4">
                    <el-button v-for="item in mediaTabs" :key="item" class="h-26 px-16 round-4 border-none bg-none"
                        :class="{ active: mediaTab === item }" text @click="mediaTab = item">
                        {{ item }}
                    </el-button>
                </div>
                <div class="flex-items-center gap-8">
                    <div class="search-mini flex-items-center h-32 w-194 px-10 round-4 bg-fff">
                        <el-icon class="color-888">
                            <Search />
                        </el-icon>
                        <el-input v-model="mediaKeyword" class="media-search flex-1 minw-0 ml-8"
                            placeholder="搜索资产..." />
                    </div>
                    <el-button class="upload-local flex-center gap-6 h-32 px-14">
                        <el-icon>
                            <Upload />
                        </el-icon>
                        <span>本地上传</span>
                    </el-button>
                </div>
            </div>

            <el-radio-group v-model="selectedId" class="material-list flex flex-wrap gap-12 px-14 pt-14 minh-300">
                <el-radio v-for="item in filteredMaterials" :key="item.id"
                    class="media-card relative round-8 hidden border-none pointer text-left h-150"
                    :class="{ selected: selectedId === item.id }" :value="item.id">
                    <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full cover" />
                    <span v-else class="video-placeholder flex-center w-full h-full color-888">VIDEO</span>
                    <span v-if="item.kind === '视频'"
                        class="video-tag absolute top-8 right-8 h-18 lh-18 px-6 round-4 color-fff fs-10">VIDEO</span>
                    <span class="media-mask absolute bottom-0 left-0 w-full px-8 py-8 color-fff">
                        <div class="lh-18 ellipsis fs-12 fw-400">{{ item.name }}</div>
                        <div class="fs-10 fw-400">{{ item.size }}</div>
                    </span>
                </el-radio>
            </el-radio-group>

            <div class="media-footer flex justify-end px-18 py-16 mt-18">
                <div class="flex-items-center">
                    <el-button class="h-32 px-16 fs-12" @click="dialogVisible = false">取消</el-button>
                    <el-button class="h-32 px-16 fs-12" type="primary" @click="handleConfirm">
                        确认选择
                    </el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { Close, Picture, Search, Upload } from '@element-plus/icons-vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';
import detailImg from '@/static/image/long.png';
import type { MaterialItem } from '../types';

const props = defineProps<{
    modelValue: boolean;
    selected: MaterialItem[];
}>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    'update:selected': [value: MaterialItem[]];
    confirm: [value: MaterialItem[]];
}>();

const mediaTabs = ['全部', '图片', '视频'];
const mediaTab = ref('全部');
const mediaKeyword = ref('');
const selectedId = ref(props.selected[0]?.id ?? '');

const materials: MaterialItem[] = [
    { id: 'm1', name: '雅诗兰黛精华空瓶主图主体.png', kind: '图片', size: '1.2 MB', image: productImg },
    { id: 'm2', name: '智能蓝牙音箱白色高对比展示.jpg', kind: '图片', size: '980 KB', image: detailImg },
    { id: 'm3', name: '模特红裙走秀素材_原画.mp4', kind: '视频', size: '18.4 MB', image: '' },
    { id: 'm4', name: '七夕美妆礼盒_烫礼场景成片.mp4', kind: '视频', size: '42.6 MB', image: '' },
    { id: 'm5', name: 'AI生成 精华液晨间护肤场景.jpg', kind: '图片', size: '2.3 MB', image: peopleImg },
];

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value),
});

const selectedMaterials = computed(() => {
    const current = materials.find((item) => item.id === selectedId.value);
    return current ? [current] : [];
});

const filteredMaterials = computed(() => {
    const keyword = mediaKeyword.value.trim().toLowerCase();
    return materials.filter((item) => {
        const matchTab = mediaTab.value === '全部' || item.kind === mediaTab.value;
        const matchKeyword = !keyword || item.name.toLowerCase().includes(keyword);
        return matchTab && matchKeyword;
    });
});

const handleConfirm = () => {
    emit('confirm', selectedMaterials.value);
    dialogVisible.value = false;
};

watch(
    () => props.selected,
    (value) => {
        const id = value[0]?.id ?? '';
        if (id !== selectedId.value) {
            selectedId.value = id;
        }
    },
    { deep: true }
);

watch(selectedId, () => {
    const propId = props.selected[0]?.id ?? '';
    if (selectedId.value !== propId) {
        emit('update:selected', selectedMaterials.value);
    }
});
</script>

<style lang="scss" scoped>
:deep(.media-search .el-input__wrapper) {
    padding: 0;
    box-shadow: none;
    background: transparent;
}

:deep(.media-search .el-input__inner) {
    height: 30px;
    font-size: 12px;
}

:deep(.material-list .el-radio__input) {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

:deep(.material-list .el-radio__label) {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 0;
}

.soft-pill,
.media-tabs {
    background: #f3f7fc;
}

.search-mini {
    border: 1px solid #dfe7f2;
}

.media-tabs button.active {
    color: #183151;
    background: #fff;
    box-shadow: 0 1px 4px rgba(17, 36, 62, .08);
}

.upload-local
{
    color: #fff;
    background: rgba(var(--main-color), 1);
}

.material-list {
    align-items: stretch;
}

.media-card {
    flex: 0 0 calc((100% - 36px) / 4);
    aspect-ratio: 1 / 1;
    margin: 0;
    background: #eef3f8;
}

.media-card.selected {
    box-shadow: 0 0 0 2px rgba(var(--main-color), 1);
}

.video-placeholder {
    background: linear-gradient(180deg, #f4f7fb 0%, #dce5ee 100%);
}

.video-tag {
    background: rgba(34, 44, 58, .72);
}

.media-mask {
    background: linear-gradient(180deg, transparent 0%, rgba(18, 25, 38, .72) 35%, rgba(18, 25, 38, .9) 100%);
}

.media-footer {
    border-top: 1px solid #edf2f7;
}
</style>

<style lang="scss">
.quick-media-dialog {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;

    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0;
    }
}
</style>
