<!-- 编辑弹窗 -->
<template>
    <ele-modal :width="560" v-model="visible" title="审核截图">
        <template v-if="imageList.length">
            <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>
                <el-image
                    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>
        </template>
        <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(data) {
        let params = {
            orderId: data.orderId,
            isbn: data.isbn,
            annexType: 2
        };
        proxy.$http
            .get(`/order/orderInfo/getOrderBookAnnexList`, { params })
            .then((res) => {
                imageList.value = res.data;
            });
    }

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

    defineExpose({
        handleOpen
    });
</script>
