<!-- 编辑弹窗 -->
<template>
    <ele-modal :width="700" v-model="visible" title="审核截图">
        <div v-if="imageList.length" class="flex flex-row gap-6 flex-wrap">
            <div
                class="demo-image__preview"
                v-for="(item, index) in imageList"
                :key="index"
            >
                <div class="demo-image__info" style="margin-bottom: 6px">
                    说明：{{ item.remark || '--' }}
                </div>
                <div class="no-pic" v-if="!item.imgInfo.length"> 暂无图片 </div>

                <el-image
                    v-else
                    v-for="(url, idx) in item.imgInfo"
                    :key="idx"
                    style="width: 100px; height: 100px; margin-right: 10px"
                    :src="url"
                    :preview-src-list="item.imgInfo"
                    :initial-index="idx"
                    fit="cover"
                />
            </div>
        </div>
        <el-empty v-else description="暂无审核截图" />

        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, getCurrentInstance, nextTick } from 'vue';
    const { proxy } = getCurrentInstance();

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    //获取审核截图
    const imageList = ref([]);
    function getAuditScreenshot(orderId) {
        proxy.$http
            .get(`/order/orderInfo/getOrderAnnexList?orderId=${orderId}`)
            .then((res) => {
                imageList.value = res.data.data || [];
            });
    }

    /** 弹窗打开事件 */
    const handleOpen = (row) => {
        visible.value = true;
        row.orderId && getAuditScreenshot(row.orderId);
    };

    defineExpose({
        handleOpen
    });
</script>
<style>
    .no-pic {
        width: 100px;
        height: 100px;
        background-color: #f5f7fa;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
