<template>
  <div class="map_view">
    <a class="map_view_action" href="#" @click.prevent.stop="viewAction">
      <img :src="require('../../assets/imgs/ic_yulan.png')" />
    </a>

    <transition name="mask-bg-fade">
      <el-dialog
        class="map_view_dialog"
        title="预览"
        width="1200px"
        :visible.sync="showDialog"
        :before-close="beforeClose"
      >
        <div class="map_view_container">
          <iframe v-if="src" :src="src" frameborder="0"></iframe>
        </div>
      </el-dialog>
    </transition>
  </div>
</template>

<script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
export default {
  name: "map-view",
  data: () => ({
    showDialog: false,
    src: "",
  }),
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  methods: {
    viewAction() {
      this.src = gisServiceUrl + `/portal/apaasplat/viewer/previewMap.html?id=${this.id}`;
      this.showDialog = true;
    },
    beforeClose(done) {
      this.src = "";

      done();
    },
  },
};
</script>

<style scoped>
.map_view_action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
  border-top-left-radius: 40px;
  background-color: #8f93a1;
}
.map_view_container {
  height: 666px;
}
.map_view_container > iframe {
  display: block;
  width: 100%;
  height: 100%;
}
</style>

<style>
.map_view_dialog .el-dialog {
  overflow: hidden;
}
.map_view_dialog .el-dialog__header {
  padding: 18px 20px 17px;
  border-bottom: 1px solid #edf0ff;
  text-align: left;
}
.map_view_dialog .el-dialog__body {
  padding: 0;
}
</style>
