<template>
  <div
    :class="key"
    class="dialog"
  >
    <el-dialog
      v-if="showDetail"
      :visible.sync="showDetail"
      custom-class="d-preview"
      :show-close="false"
      :modal-append-to-body="false"
    >
      <slot />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showDetail: false,
      source: null,
      key: ''
    }
  },
  methods: {
    show (key) {
      if (this.showDetail) {
        this.showDetail = false
        return
      }
      this.showDetail = true
      this.key = key
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog{
::v-deep.v-modal{
  opacity:0.85
}
}

::v-deep .d-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
  margin-top: 10vh !important;
  box-shadow: none;
  background-color: transparent;
}
::v-deep .el-dialog__body {
  width: 100%;
  height: 100%;
}
.LinkState {
  ::v-deep .d-preview {
    width: 1115px;
    height: 660px;
    margin-top: 5vh !important;
  }
}
.Sensor {
  ::v-deep .d-preview {
    width: 120vh;
    height: 80vh;
  }
}
.LEDCamera {
  ::v-deep .d-preview {
       min-width: 909px;
    min-height: 580.7px;
  }
}
.Timeline{
  ::v-deep .d-preview {
      min-width: 800px;
    min-height: 460px;
  }
}
.TrafficCamera{
    ::v-deep .d-preview {
      width: 800px;
    height: 560px;
  }
}
.Map{
    ::v-deep .d-preview {
    min-width: 1000px;
    min-height: 600px;
  }
}
// ::v-deep.c-preview ::v-deep.el-dialog__body {
//     width: 100%;
//     height: 100%;
// }
//   ::v-deep.el-dialog__body {
//     width: 80vh;
//     height: 80vh;
//   }
</style>
