<template>
  <Dialog
    ref="dialog"
    width="502px"
    height="300px"
  >
    <div class="bg"/>
    <div class="content">
      cibtebt
    </div>
  </Dialog>
</template>

<script>
import Dialog from '@/components/dialog/index'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
export default {
  components: {
    Dialog,
  },
  filters: {
    filterTime(value) {
      return dayjs(value).format('YYYY-MMMM-DD HH:mm:ss')
    },
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    ...mapState([
      'zoom',
      'userInfo',
    ]),
  },
  watch: {
    visible(value) {
      if (value) {
        this.$refs.dialog.show()
      } else {
        this.$refs.dialog.close()
      }
    },
  },
  methods: {
    confirm() {
      this.$emit('confirm')
      this.visible = false
    },
    show() {
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.bg {
  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop.png);
  background-size: 100% 100%;
}
.close {
  position: absolute;
  right: -20px;
  top: -16px;
  width: 38px;
  z-index: 10;
}
.content {
}
</style>
