<template>
  <transition name="qf-fade">
    <qf-dialog-def class="qf-msgbox" :class="['qf-msgbox-' + type]" :title="title" :showCancel="showCancel" autofocus
               :showConfirm="showConfirm"
               :cancelText="cancelText" :confirmText="confirmText" @cancel="onCancel" @confirm="onConfirm">
      <qf-font-icon slot="icon" :name="'ic-ic_' + type" class="qf-msgbox-icon" v-if="type !== 'confirm'"></qf-font-icon>
      <div class="qf-msgbox-body" v-show="msg" v-html="msg"></div>
    </qf-dialog-def>
  </transition>
</template>

<script>
import QfDialogDef from '../dialog/def';
import QfFontIcon from '../font-icon';
import LocaleMixin from '../locale/mixin';
import { t } from '../locale';

export default {
  mixins: [LocaleMixin],
  components: {
    QfFontIcon,
    QfDialogDef
  },
  data() {
    return {
      title: '',
      msg: '',
      type: 'confirm',
      cancelText: t('qf.messagebox.cancelText'),
      confirmText: t('qf.messagebox.confirmText'),
      showConfirm: true,
      showCancel: false,
      doConfirm: Function,
      doCancel: Function
    };
  },

  methods: {
    onCancel() {
      this.$parent.hide();
      if (this.doCancel) {
        this.doCancel();
      }
    },

    onConfirm() {
      this.$parent.hide();
      if (this.doConfirm) {
        this.doConfirm();
      }
    }
  }
};
</script>

