<template>
  <q-dialog v-model="visible" full-width ref="dialog" seamless  :content-class="visible?'has-mask':''" @hide="onDialogHide">
    <q-card>
      <q-card-section class="text-center">
        <img v-if="icon" :src="icon" width="60%" class="q-my-sm" />
        <div v-if="title" class="text-h6 text-center">{{title}}</div>
        {{text}}
      </q-card-section>
      <q-card-actions v-if="ok" :vertical="true" class="q-px-md q-pb-md">
        <q-btn v-bind="ok" @click="onOKClick" />
      <q-btn  icon="close" flat round dense @click="onCancelClick" class="absolute-top-right q-ma-sm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name:"PermissionDialog",
  props:{
    "title":{},
    "text":{},
    "icon":{},
    "ok":{},
  },
  data: function() {
    return {
      visible:false
    }
  },
  methods: {
    // 以下方法是必需的
    // (不要改变它的名称 --> "show")
    show() {
      this.visible = true
    },
    // (不要改变它的名称 --> "hide")
    hide() {
      this.visible = false
    },
    onOKClick() {
      // 按OK，在隐藏QDialog之前
      // 发出“ok”事件（带有可选的有效负载）
      // 是必需的
      // 或带有有效负载：this.$emit('ok', { ... })
      this.$emit('ok')
      // 然后隐藏对话框
      this.hide()
    },
    onCancelClick() {
      // 我们只需要隐藏对话框
      this.hide()
    },
    onDialogHide(){
      this.$emit('hide')
    },
  }
}
</script>
