<template>
    <ele-page flex-table>
        <ele-card flex-table header="默认图片设置">
            <div>
                <el-button
                    type="primary"
                    style="width: 200px"
                    @click="handleSetDefault"
                    v-permission="'data:defaultImage:set'"
                    >设置默认图片</el-button
                >

                <el-checkbox-group
                    style="height: calc(100vh - 270px)"
                    v-model="checkList"
                    class="flex flex-wrap items-start content-start overflow-auto"
                    @change="handlecheckboxChange"
                >
                    <el-upload
                        ref="uploadRef"
                        v-model:file-list="form.images"
                        list-type="picture-card"
                        :show-file-list="false"
                        multiple
                        accept="image/*"
                        :http-request="uploadFile"
                        style="margin-right: 14px; margin-top: 12px"
                    >
                        <div class="flex flex-col items-center">
                            <el-icon :size="24"><Plus /></el-icon>
                            <el-text type="info" style="margin-top: 20px"
                                >上传图片</el-text
                            >
                        </div>
                    </el-upload>
                    <div
                        class="pos-relative default-image-item"
                        v-for="item in imageList"
                    >
                        <el-checkbox :value="item.id" class="checkbox-item" />
                        <el-image
                            style="
                                width: 146px;
                                height: 146px;
                                border-radius: 6px;
                            "
                            :src="item.imgUrl"
                            fit="cover"
                        />

                        <div
                            class="mask-error flex items-center justify-center"
                            v-if="item.defaultUse == 1"
                        >
                            <el-text type="primary" size="small"
                                >默认图片</el-text
                            >
                        </div>
                    </div>
                </el-checkbox-group>

                <ele-pagination
                    v-model:current-page="pageParams.pageNum"
                    v-model:page-size="pageParams.pageSize"
                    :total="total"
                    layout="total,prev, pager, next, sizes, jumper"
                    @update:currentPage="handleCurrentChange"
                    @update:pageSize="handlePageSizeChange"
                />
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import CommonUpload from '@/components/CommonUpload/index.vue';
    import ImageUpload from '@/components/ImageUpload/index.vue';
    import { Plus } from '@element-plus/icons-vue';
    import request from '@/utils/request';
    import { ElMessage, ElMessageBox } from 'element-plus';

    const imageList = ref([]);
    const checkList = ref([]);
    const total = ref(0);
    const form = reactive({
        images: []
    });
    const pageParams = ref({ pageNum: 1, pageSize: 50 });
    const getImageList = (data = {}) => {
        request
            .get('/baseinfo/img/pagelist', {
                params: { ...pageParams.value, ...data }
            })
            .then((res) => {
                imageList.value = res.data.rows;
                total.value = res.data.total || 0;
                checkList.value = imageList.value
                    .filter((item) => item.defaultUse == 1)
                    .map((item) => item.id);
            });
    };
    getImageList();

    //页码变化
    const handleCurrentChange = (val) => {
        pageParams.value.pageNum = val;
        getImageList();
    };
    //每页显示多少条
    const handlePageSizeChange = (val) => {
        pageParams.value.pageSize = val;
        getImageList();
    };

    //执行图片上传并新增到列表
    function uploadFile(file) {
        let formData = new FormData();
        formData.append('file', file.file);
        request
            .post('/common/upload', formData, { showTips: false })
            .then((res) => {
                if (res.data.code == 200) {
                    handleAddImage(res.data);
                }
            });
    }
    //添加图片
    const handleAddImage = (res) => {
        request.post('/baseinfo/img/add', { imgUrl: res.url }).then((res) => {
            if (res.data.code == 200) {
                getImageList();
            }
        });
    };

    //选中图片
    const handlecheckboxChange = (value) => {
        let last = value[value.length - 1];
        checkList.value = [last];
    };

    const handleSetDefault = () => {
        if (checkList.value.length == 0) {
            ElMessage({ type: 'warning', message: '请选择图片' });
            return;
        }
        ElMessageBox.confirm('是否将该图片设置默认图片？', '提示').then(() => {
            request
                .post('/baseinfo/img/setDefault?id=' + checkList.value[0])
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({ type: 'success', message: '设置成功' });
                        getImageList();
                    }
                });
        });
    };
</script>

<style lang="scss" scoped>
    .default-image-item {
        margin-right: 14px;
        margin-top: 14px;
        margin-bottom: 0;
        position: relative;
        border-radius: 6px;
        border: 1px solid #e4e7ed;
        &:hover {
            .checkbox-item {
                opacity: 1;
            }
        }
        .checkbox-item {
            position: absolute;
            top: -8px;
            left: 0;
            opacity: 0;
            &.is-checked {
                opacity: 1;
            }
        }
        .mask-error {
            width: 100%;
            height: 26px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            overflow: hidden;
            bottom: 0;
            left: 0;
        }
    }
</style>
