<template>
    <div class="box">
        <el-dialog
            :model-value="props.isVisible"
            align-center
            title="插入图片"
            width="720"
            @close="closeDialog"
            :close-on-click-modal="false"
        >
            <div class="image-box">
                <div class="input-box">
                    <el-input
                        v-model="imageInput"
                        class="image-input"
                        style="width: 300px; line-height:30px;"
                        placeholder="请输入图片名称查询"
                    ></el-input>
                    <el-date-picker
                        v-model="dateRange"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择日期"
                    ></el-date-picker>
                </div>
                <div>
                    <el-button @click="onClickReset">重置</el-button>
                    <el-button type="primary" @click="onClickInquire">搜索</el-button>
                </div>
            </div>
            <div class="alternative-image">
                <div v-for="(item, index) in imageList" :key="item.id" class="image_list">
                    <img
                        :src="inductIP + item.url"
                        alt=""
                        class="image-"
                        :class="{bordered: selected === index}"
                        @click="toggleActive(item, index)"
                        @mouseenter="showTooltip(index)"
                        @mouseleave="hideTooltip(index)"
                    >
                    <div v-show="tooltipIndex === index" class="tooltip">{{ item.name }}</div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="closeDialog">取消</el-button> -->
                    <slot name="button"></slot>
                    <el-button type="primary" @click="onClickPrevious">上一页</el-button>
                    <el-button type="primary" @click="onClickNext">下一页</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, PropType } from "vue";
import useUserStore from '@/store/modules/user';
import { throttle } from "lodash-es";
import {
    getImageList,
} from "@/api/imageManagement/index";

const props = defineProps({
    isVisible: Boolean,
    onValueUpdate: Function as PropType<(value: any) => void>,
});
const emits = defineEmits(['update:isVisible','onValueUpdate']);

const userStore = useUserStore();
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotalCount = ref(0);
const imageList = ref<any>([]);
const imageInput = ref();
const dateRange = ref();
const tooltipIndex = ref(-1);
// const inductIP = sessionStorage.getItem('minioUrl');
const inductIP = import.meta.env.VITE_APP_BASE_API;

function fetchTableList() {
    getImageList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        status: 'Y',
        oneself: 2,
        createUser: useUserStore().userInfo.userId,
        name: imageInput.value,
        createTimeStr: dateRange.value,
    }).then((res: any) => {
        imageList.value = res.rows;
        pageTotalCount.value = res.total;
    });
};

// 上一页
const onClickPrevious = () => {
    if (pageNum.value === 1) {
        return alert('已经第一页了！！！');
    } else {
        pageNum.value = pageNum.value - 1;
        fetchTableList();
    }
};
// 下一页
const onClickNext = () => {
    const totalFloor = Math.floor(pageTotalCount.value / 10);
    if (pageNum.value > totalFloor) {
        return alert('已经到底了！！！');
    } else {
        pageNum.value = pageNum.value + 1;
        fetchTableList();
    }
};

// 重置图片列表
const resetList = () => {
    imageInput.value = '';
    dateRange.value = '';
    pageNum.value = 1;
    fetchTableList();
    selected.value = null;
};

const closeDialog = () => {
    emits("update:isVisible", false);
    selected.value = null;
    resetList();
};
// 节流函数
// const throttledHandleInput = throttle((value) => {
//     getImageList({
//         pageNum: pageNum.value,
//         pageSize: pageSize.value,
//         status: 'Y',
//         // userName: userStore.userInfo.userName,
//         oneself: 2,
//         name: value,
//     }).then((res: any) => {
//         imageList.value = res.rows;
//         pageTotalCount.value = res.total;
//     });
// }, 2000, {leading: false});
// const onInputInquire = () => {
//     throttledHandleInput(imageInput.value);
// };

const onClickReset = () => {
    imageInput.value = '';
    dateRange.value = '';
    fetchTableList();
};

const onClickInquire = () => {
    getImageList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        status: 'Y',
        createUser: useUserStore().userInfo.userId,
        oneself: 2,
        name: imageInput.value,
        createTimeStr: dateRange.value,
    }).then((res: any) => {
        imageList.value = res.rows;
        pageTotalCount.value = res.total;
    });
};

const selectImage = ref('');
const selected = ref(null);
function toggleActive(row: any, index:any) {
    selected.value = index;
    selectImage.value = row.url;
    emits('onValueUpdate', selectImage.value);
}

const showTooltip = (index: any) => {
    tooltipIndex.value = index;
    console.log();

};
const hideTooltip = (index:any) => {
    tooltipIndex.value = -1;
};

defineExpose({
    resetList,
});

onMounted(async () => {
    await fetchTableList();
});
</script>

<style scoped lang="scss">
    .alternative-image {
        display: flex;
        flex-wrap: wrap;
    }
    .image_list {
        position: relative;
        width: 150px;
        height: 100px;
        margin: 10px;
        img {
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .tooltip {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            color:#fff;
            background-color: rgba(0,0,0,0.6);
            padding: 5px 10px;
            font-size: 14px;
        }
    }
    .alternative-image {
        margin-bottom: 15px;
    }
    .select-image {
        margin-top: 15px;
        img {
            margin: 10px;
        }
    }
    .bordered {
        border: solid 3px #006ce7;
    }
    .dialog-footer {
        position: relative;
    }
    .image-input {
        width: 250px !important;
        margin-right: 10px;
        :deep(.el-input__wrapper) {
            height: 32px;
            width: 250px;
        }
    }
    :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
        width: 250px;
        height: 32px !important;
        .el-input__wrapper {
            height: 32px;
            width: 250px;
        }
    }
    .image_list:hover .tooltip {
        display: block;
    }
    .image-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #dddddd;
    }
    .input-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    :deep(.el-dialog__body) {
        padding: 0;
        margin: 10px 20px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
    }
</style>
