<template>
    <Dialog v-model="dialogVisible" bg-color="#fff" width="1152">
        <div class="flex-col bg-fff round-8 hidden">
            <header class="dialog-header flex-items-center h-56 px-20">
                <h3 class="fs-14 fw-700 color-000">{{ title }}</h3>
            </header>

            <section class="dialog-body flex-1 flex-col hidden px-20 py-14">
                <div class="tab-row flex-items-center mb-20">
                    <div v-for="item in tabs" :key="item.value" class="tab-item h-34 lh-34 px-16 fs-12 fw-700 pointer"
                        :class="{ active: activeTab === item.value }" @click="activeTab = item.value">
                        {{ item.label }}
                    </div>
                </div>

                <div v-if="activeTab === 'library'" class="library-panel flex-1 flex-col hidden">
                    <div class="filter-row flex-between gap-8 mb-12">
                        <div class="flex-items-center flex-wrap gap-8 flex-1">
                            <el-select v-model="firstCategory" class="filter-select" placeholder="全部一级分类">
                                <el-option v-for="item in firstCategories" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-select v-model="secondCategory" class="filter-select" placeholder="全部二级分类">
                                <el-option v-for="item in secondCategories" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-select v-model="tagValue" class="filter-select" placeholder="全部标签">
                                <el-option v-for="item in tags" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-select v-model="statusValue" class="filter-select" placeholder="全部状态">
                                <el-option v-for="item in statuses" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-select v-model="uploaderValue" class="uploader-select" placeholder="全部上传人">
                                <el-option v-for="item in uploaders" :key="item" :label="item" :value="item" />
                            </el-select>
                            <el-input v-model="searchKeyword" class="search-input flex-1" placeholder="搜索图片名称或 ID">
                                <template #prefix>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>
                            <el-checkbox v-model="onlyMine" class="mine-check">仅看我的</el-checkbox>
                        </div>
                    </div>

                    <SeTable class="material-table flex-1" :border="false" :data-list="currentPageImageRows"
                        :total="imageRows.length" :default-page-size="pageSize" :page-sizes="[6, 10, 20, 50]"
                        :height="tableHeight" row-key="id" psize="small" @update:page="handleImagePageChange"
                        @selection-change="handleImageSelectionChange">
                        <el-table-column type="selection" reserve-selection width="46" />
                        <el-table-column label="图片缩略图" width="122">
                            <template #default="{ row }">
                                <img :src="row.image" :alt="row.name" class="thumb-img cover round-4" />
                            </template>
                        </el-table-column>
                        <el-table-column label="文件名称 / ID" min-width="240">
                            <template #default="{ row }">
                                <div class="flex-col">
                                    <span class="fs-12 fw-700 color-333 ellipsis">{{ row.name }}</span>
                                    <span class="fs-10 color-999 mt-4">{{ row.id }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="118">
                            <template #default="{ row }">
                                <span class="status-tag h-22 lh-22 px-10 round-4 fs-10">{{ row.status }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分类 / 标签" min-width="190">
                            <template #default="{ row }">
                                <div class="flex-col">
                                    <span class="fs-12 fw-700 color-333 ellipsis">{{ row.category }}</span>
                                    <span class="fs-10 color-999 mt-4 ellipsis">{{ row.tags }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="uploader" label="上传人" width="112" />
                        <el-table-column prop="resolution" label="分辨率" width="118" />
                        <el-table-column prop="size" label="大小" width="72" />
                    </SeTable>
                </div>

                <div v-else class="flex-1 round-8">
                    <UploadFile v-model="localFiles" list-type="drap" :multiple="true" :limit="6">
                        <template #trigger>
                            <div>
                                <el-icon size="20">
                                    <Upload />
                                </el-icon>
                            </div>
                            <p class="fs-12 color-888 mt-6">点击选择本地图片</p>
                        </template>
                    </UploadFile>
                    <div class="color-888 fs-12 text-center">支持上传本地图片文件，图片格式：jpeg、 png、 webp、 bmp、 tiff、
                        gif，单张图片大小≤30MB。</div>
                    <div class="color-888 fs-12 text-center">图片宽高比需在 (0.4, 2.5) 之间，宽高像素需在 (300px, 6000px) 之间。</div>
                    <div class="color-888 fs-12 text-center">仅支持上传非人脸图，请仔细查看要求并确保上传素材为您原创或已取得合法授权。</div>
                </div>
            </section>

            <footer class="dialog-footer flex-between px-20 py-12">
                <div class="fs-12 color-666">
                    已选 <span class="color-main fw-700">{{ selectedImageIds.length }}</span> 张，还可添加
                    {{ restCount }} 张
                </div>
                <div class="flex-items-center gap-8">
                    <el-button class="h-34 px-18" @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" class="confirm-btn h-34 px-20 border-none" @click="confirmImages">
                        确认选择
                    </el-button>
                </div>
            </footer>
        </div>
    </Dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { UploadUserFile } from 'element-plus';
import { Search, Upload } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog/index.vue';
import UploadFile from '@/components/Upload/index.vue';
import productImg from '@/static/image/huaban.png';
import peopleImg from '@/static/image/meinv.png';

type ImageRow = {
    id: string;
    name: string;
    image: string;
    status: string;
    category: string;
    tags: string;
    uploader: string;
    resolution: string;
    size: string;
};

const props = defineProps<{
    modelValue: boolean;
    dataType: String
}>();

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

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

const title = ref(props.dataType === 'goods' ?'添加商品图':'添加原料')

const tabs = computed(()=>{
    if(props.dataType === 'goods') {
        return [
            { label: '图片管理', value: 'library' },
            { label: '本地上传', value: 'local' },
        ]
    } else {
        return [
            { label: '资源库', value: 'library' },
            { label: '本地上传', value: 'local' },
        ]
    }
})

const firstCategories = ['全部一级分类', '美妆护肤', '服饰内衣', '日用百货', '食品饮料'];
const secondCategories = ['全部二级分类', '商品主图', '模特展示', '效果对比', '资质证明'];
const tags = ['全部标签', '产品实拍', '成分党', '清凉感', '对比实测'];
const statuses = ['全部状态', '审核通过', '待审核', '未审核'];
const uploaders = ['全部上传人', '致上互娱', '汤小真', '徐振', '美妆设计组'];

const activeTab = ref<any>('library');
const firstCategory = ref('全部一级分类');
const secondCategory = ref('全部二级分类');
const tagValue = ref('全部标签');
const statusValue = ref('全部状态');
const uploaderValue = ref('全部上传人');
const searchKeyword = ref('');
const onlyMine = ref(false);
const selectedImageIds = ref<string[]>([]);
const localFiles = ref<UploadUserFile[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const tableHeight = 500;

const imageRows: ImageRow[] = [
    {
        id: 'img-1',
        name: '防晒植物提取精华液展图.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 商品主图',
        tags: '产品实拍、成分党',
        uploader: '致上互娱',
        resolution: '1080x1440',
        size: '2.4 MB',
    },
    {
        id: 'img-2',
        name: '无痕防晒冰丝丝袜场景模特图.png',
        image: productImg,
        status: '待审核',
        category: '服饰内衣 / 模特展示',
        tags: '模特出镜、清凉冰丝',
        uploader: '汤小真',
        resolution: '800x1200',
        size: '1.8 MB',
    },
    {
        id: 'img-3',
        name: '夏日爆款产品盒装主图.jpg',
        image: productImg,
        status: '审核通过',
        category: '日用百货 / 宣发主图',
        tags: '爆款、活动促销',
        uploader: '致上互娱',
        resolution: '1920x1080',
        size: '4.5 MB',
    },
    {
        id: 'img-4',
        name: '草本护肤成分拆解对比展图.png',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 成分展示',
        tags: '对比实测',
        uploader: '汤小真',
        resolution: '1080x1080',
        size: '3.1 MB',
    },
    {
        id: 'img-5',
        name: '防晒霜SPF50权威检测图.jpg',
        image: productImg,
        status: '未审核',
        category: '美妆护肤 / 资质证明',
        tags: '成分党、检测报告',
        uploader: '致上互娱',
        resolution: '1080x1920',
        size: '1.2 MB',
    },
    {
        id: 'img-6',
        name: '补水面膜水分提升对比实验图.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 效果对比',
        tags: '对比实测',
        uploader: '徐振',
        resolution: '1080x1440',
        size: '2.9 MB',
    },
    {
        id: 'img-7',
        name: '夏日清凉草本展示图.jpg',
        image: productImg,
        status: '待审核',
        category: '食品饮料 / 商品主图',
        tags: '清凉夏日、产品实拍',
        uploader: '美妆设计组',
        resolution: '2000x2000',
        size: '5.4 MB',
    },
    {
        id: 'img-8',
        name: '高奢护肤瓶身渲染特写.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 商品主图',
        tags: '高端质感、3D渲染',
        uploader: '汤小真',
        resolution: '1440x1920',
        size: '3.8 MB',
    },
    {
        id: 'img-9',
        name: '高奢护肤瓶身渲染特写.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 商品主图',
        tags: '高端质感、3D渲染',
        uploader: '汤小真',
        resolution: '1440x1920',
        size: '3.8 MB',
    },
    {
        id: 'img-10',
        name: '高奢护肤瓶身渲染特写.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 商品主图',
        tags: '高端质感、3D渲染',
        uploader: '汤小真',
        resolution: '1440x1920',
        size: '3.8 MB',
    },
    {
        id: 'img-11',
        name: '高奢护肤瓶身渲染特写.jpg',
        image: peopleImg,
        status: '审核通过',
        category: '美妆护肤 / 商品主图',
        tags: '高端质感、3D渲染',
        uploader: '汤小真',
        resolution: '1440x1920',
        size: '3.8 MB',
    },
];

const restCount = computed(() => Math.max(0, 6 - selectedImageIds.value.length));
const currentPageImageRows = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return imageRows.slice(start, start + pageSize.value);
});

const handleImagePageChange = (page: number, size: number) => {
    currentPage.value = page;
    pageSize.value = size;
};

const handleImageSelectionChange = (selection: ImageRow[]) => {
    selectedImageIds.value = selection.map((item) => item.id);
};

const confirmImages = () => {
    emit('confirm', selectedImageIds.value);
    dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.dialog-header {
    flex: 0 0 56px;
    border-bottom: 1px solid #edf2f7;
}

.dialog-body,
.library-panel,
.material-table {
    min-height: 0;
}

.dialog-footer {
    flex: 0 0 58px;
    border-top: 1px solid #edf2f7;
}

.tab-row {
    border-bottom: 1px solid #dfe7f2;
}

.tab-item {
    color: #536883;
    border-bottom: 2px solid transparent;

    &.active {
        color: #7d28ff;
        border-bottom-color: #7d28ff;
    }
}

.filter-select {
    width: 130px;
}

.uploader-select {
    width: 124px;
}

.search-input {
    min-width: 220px;
}

.mine-check {
    white-space: nowrap;
}

.thumb-img {
    width: 48px;
    height: 48px;
}

.status-tag {
    color: #61738c;
    background: #eef3f8;
}

.confirm-btn {
    background: #7d28ff;
}

:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #dce6f2 inset;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    border-color: #7d28ff;
    background: #7d28ff;
}
</style>
