<template>
  <div class="map_view">
    <a
      v-if="showView"
      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">
          <workflows-view
            :zoom="0.8"
            :id="id"
            :hideDetail="true"
          ></workflows-view>
        </div>
      </el-dialog>
    </transition>
  </div>
</template>

<script>
import workflowsView from "@/components/work-flow/workflows-view";
export default {
  name: "map-view",
  components: {
    workflowsView
  },
  data: () => ({
    showDialog: false,
    showView: false
  }),
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  methods: {
    viewAction() {
      this.showDialog = true;
    },
    beforeClose(done) {
      done();
    }
  },
  mounted() {
    this.showView =
      window.serviceConfig && window.serviceConfig.state == "needLogin";
  }
};
</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>
