<template>
  <transition name="cube-dialog-fade">
    <popup
      type="dialog"
      :z-index="zIndex"
      :mask="true"
      :center="true"
      v-show="isVisible"
      @mask-click="maskClick"
    >
      <div class="cube-dialog-main">
        <span class="cube-dialog-close" v-show="showClose" @click="close"
          ><i class="cubeic-close"></i
        ></span>

        <div :class="containerClass">
          <h2 v-if="title || $slots.title" class="cube-dialog-title">
            <slot name="title">
              <p class="cube-dialog-title-def">{{ title }}</p>
            </slot>
          </h2>

          <div class="cube-dialog-content">
            <slot name="content">
              <div class="cube-dialog-content-def yoho-dialog-content-def">
                <p v-html="content" v-if="content"></p>
              </div>
            </slot>
          </div>

          <div
            class="cube-dialog-btns confirm-dialog-btns-wrapper"
            :class="{ 'border-right-1px': isConfirm }"
          >
            <slot name="btns">
              <a
                :href="_cancelBtn.href"
                class="cube-dialog-btn border-top-1px"
                :style="_cancelBtn.style"
                :class="{
                  'cube-dialog-btn_highlight': _cancelBtn.active,
                  'cube-dialog-btn_disabled': _cancelBtn.disabled
                }"
                v-if="isConfirm"
                @click="cancel"
                >{{ _cancelBtn.text }}</a
              >
              <a
                :href="_confirmBtn.href"
                class="cube-dialog-btn border-top-1px"
                :style="_confirmBtn.style"
                :class="{
                  'cube-dialog-btn_highlight': _confirmBtn.active,
                  'cube-dialog-btn_disabled': _confirmBtn.disabled
                }"
                @click="confirm"
                >{{ _confirmBtn.text }}</a
              >
            </slot>
          </div>
        </div>
      </div>
    </popup>
  </transition>
</template>

<script>
import { Popup } from "cube-ui";
import popupMixin from "cube-ui/src/common/mixins/popup";
import visibilityMixin from "cube-ui/src/common/mixins/visibility";
import localMixin from "cube-ui/src/common/mixins/locale";

const COMPONENT_NAME = "confirm-dialog";
const EVENT_CONFIRM = "confirm";
const EVENT_CANCEL = "cancel";
const EVENT_CLOSE = "close";

const defHref = "javascript:;";

const defConfirmBtn = {
  textType: "ok",
  active: true,
  disabled: false,
  href: defHref
};

const defCancelBtn = {
  textType: "cancel",
  active: false,
  disabled: false,
  href: defHref
};

const parseBtn = function(btn, defBtn) {
  if (typeof btn === "string") {
    btn = { text: btn };
  }
  const text = defBtn && this.$t(defBtn.textType);
  return Object.assign({}, defBtn, { text }, btn);
};

export default {
  name: COMPONENT_NAME,
  mixins: [popupMixin, visibilityMixin, localMixin],
  props: {
    type: {
      type: String,
      default: "confirm"
    },
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    showClose: {
      type: Boolean,
      default: false
    },
    confirmBtn: {
      type: [Object, String],
      default() {
        return { ...defConfirmBtn };
      }
    },
    cancelBtn: {
      type: [Object, String],
      default() {
        return {
          ...defCancelBtn
        };
      }
    }
  },
  components: {
    Popup
  },
  computed: {
    _confirmBtn() {
      return parseBtn.call(this, this.confirmBtn, defConfirmBtn);
    },
    _cancelBtn() {
      return parseBtn.call(this, this.cancelBtn, defCancelBtn);
    },
    isConfirm() {
      return this.type === "confirm";
    },
    containerClass() {
      return `cube-dialog-${this.type}`;
    }
  },
  methods: {
    maskClick(e) {
      this.maskClosable && this.cancel(e);
    },
    confirm(e) {
      if (this._confirmBtn.disabled) {
        return;
      }
      this.hide();
      this.$emit(EVENT_CONFIRM, e);
    },
    cancel(e) {
      if (this._cancelBtn.disabled) {
        return;
      }
      this.hide();
      this.$emit(EVENT_CANCEL, e);
    },
    close(e) {
      this.hide();
      this.$emit(EVENT_CLOSE, e);
    }
  }
};
</script>

<style lang="scss">
.yoho-dialog-content-def {
  color: #000;
}
</style>

<style lang="scss" scoped>
.confirm-dialog-btns-wrapper {
  display: flex;
  flex-direction: row-reverse;
}
</style>