<template>
    <el-dialog custom-class="event-dialog" v-model="visible" :destroy-on-close="true" fullscreen>
        <div class="detail-dialog-header">
            <img v-if="type === 'route'" src="~@/assets/images/patrolAndRescue/route.png" />
            <img v-else-if="type === 'video'" src="~@/assets/images/patrolAndRescue/video.png" />
            <span class="detail-dialog-title">{{ title }}</span>
        </div>
        <div class="detail-dialog-body" v-loading="loading" element-loading-background="rgba(11, 23, 49, 1)">
            <iframe v-if="showFormPage" :src="src" frameborder="0" allowfullscreen="true"
                class="detail-page-wrapper"></iframe>
            <div v-else class="detail-page-wrapper">
                暂无事件管理权限
            </div>
        </div>
    </el-dialog>
</template>
<script>
import SectionTitle from '@/components/common/sectionTitle.vue'
import { generateKey } from "@/api/operation";
export default {
    name: 'eventRegistration',
    components: { SectionTitle, },
    data() {
        return {
            visible: false,
            title: '事件登记',
            loading: false,
            showFormPage: false,
            src: "http://183.64.175.153:38006/fvue/eventRegistration?tokenKey="
        }
    },
    methods: {
        show() {
            this.loading = true
            this.showFormPage = false
            generateKey().then((res) => {
                if (res.data) {
                    this.src = this.src + res.data;
                    this.showFormPage = true;
                }
            }).finally(() => {
                this.loading = false
            })
            this.visible = true
        },
        hide() {
            this.visible = false
        },
    },
}
</script>
<style lang="scss">
.event-dialog.el-dialog {
    margin-top: 1vh !important;
    width: 98% !important;
    height: 98% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: url('@/assets/images/layout/common/marker-dilog-bg.png') no-repeat;
    background-size: cover;
    background-size: 100% 100%;

    .el-dialog__header {
        padding: 0 !important;
    }

    .el-dialog__headerbtn {
        top: 10px;
        right: 10px;
        z-index: 99;
    }

    .el-icon-close:before {
        font-size: 20px !important;
        color: #fff;
    }

    .el-dialog__body {
        padding: 0 20px 20px 20px !important;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .detail-dialog-header {
        width: 240px;
        height: 60px;
        margin-left: 40px;
        display: flex;
        align-items: center;
        overflow: hidden;

        img {
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }

        .detail-dialog-title {
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
        }
    }

    .detail-dialog-body {
        height: calc(100% - 130px);
        overflow-x: hidden;
        overflow-y: auto;
        margin-top: 32px;


    }

    .detail-page-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
}
</style>
