<template>
  <el-dialog
    :visible.sync="dialogVisible"
    class="c-dialog--full"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    v-bind="$attrs"
    @closed="onClosed"
  >
    <camera-detail
      v-if="camera"
      :camera="camera"
    />
    <i
      class="l-flex__none c-dialog--full__close el-icon-close has-active u-bold u-pointer"
      @click="onCloseDialog"
    />
  </el-dialog>
</template>

<script>
export default {
  name: 'CameraDialog',
  inheritAttrs: false,
  data () {
    return {
      dialogVisible: false,
      camera: null
    }
  },
  methods: {
    show (camera) {
      this.camera = camera
      this.dialogVisible = true
    },
    onCloseDialog () {
      this.dialogVisible = false
    },
    onClosed () {
      this.camera = false
      this.$emit('closed')
    }
  }
}
</script>
