<template>
  <transition name="bx-animate-fade">
    <div
      class="bx-modal"
      v-if="value"
      :class="className"
      >
      <div class="bx-modal-body">
        <div
          class="bx-modal-title"
          v-if="title"
          >
          {{ title }}
        </div>
        <slot>
          <div class="bx-modal-content">
            <div
              class="bx-modal-message"
              v-html="message"
              :style="{'text-align': messageAlign}"
              />
            <div
              class="bx-modal-tips"
              v-if="tips"
              >
              {{ tips }}
            </div>
          </div>
        </slot>
      </div>
      <div class="bx-modal-footer bx-hairline--top">
        <a
          class="bx-modal-btn bx-hairline--left"
          v-if="showCancel"
          :style="cancelButtonStyle"
          @click="handleAction('cancel')"
          >
          {{ cancelButtonText }}
        </a>
        <a
          class="bx-modal-btn bx-hairline--left"
          v-if="showConfirm"
          :style="confirmButtonStyle"
          @click="handleAction('confirm')"
          >
          {{ confirmButtonText }}
        </a>
      </div>
    </div>
  </transition>
</template>
<script>
import { create } from '../utils/index'
import Popup from '../mixins/popup/index'

const onlyValues = values => str => values.indexOf(str) !== -1
export default create({
  name: 'message-box',
  mixins: [Popup],
  props: {
    title: String,
    message: String,
    tips: String,
    className: [String, Object, Array],
    messageAlign: {
      type: String,
      default: 'center',
      validator: onlyValues(['left', 'right', 'center', 'justify']),
    },
    cancelButtonText: {
      type: String,
      default: '取消',
    },
    confirmButtonText: {
      type: String,
      default: '确定',
    },
    cancelButtonColor: {
      type: String,
      default: '',
    },
    confirmButtonColor: {
      type: String,
      default: '#508cee',
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showConfirm: {
      type: Boolean,
      default: true,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    cancelButtonStyle() {
      const style = {}
      if (this.cancelButtonColor) {
        style.color = this.cancelButtonColor
      }
      return style
    },
    confirmButtonStyle() {
      const style = {}
      if (this.confirmButtonColor) {
        style.color = this.confirmButtonColor
      }
      return style
    },
  },
  methods: {
    handleAction(action) {
      this.$emit('before-close', action, state => {
        if (state !== false) {
          this.closeModal(action)
        }
      })
      if (this.callback) {
        this.callback(action)
      }
    },
    closeModal(action) {
      this.$emit('input', false)
      this.$emit(action)
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
@import '../../src/style/animate.css';
</style>
