<template>
  <div class="modal"
       v-if="childShow">
    <div v-if="maskClosable"
         class="modal__mask"
         @click.stop="tapCancel"
         @touchmove.prevent></div>
    <div v-else
         class="modal__mask"
         @touchmove.prevent></div>
    <div class="modal__main">
      <div class="modal__holder">
        <div class="modal__title"
             v-if="title">{{title}}</div>
        <div class="modal__content ost">
          <div class="modal__content-inr"
               :class="[textAlignClass,{'has-title':hasTitle}]">
            <Content v-if="typeof content==='function'"
                     :render="content"></Content>
            <template v-else>
              <slot>
                {{typeof content==='string'?content:content.text}}
              </slot>
            </template>
          </div>
        </div>
      </div>
      <div class="hairlines"></div>
      <div class="modal__btn mui-flex aic">
        <div class="btn mui-flex__cell txt-ovh"
             v-if="showCancel"
             @click="tapCancel">{{cancelText}}</div>
        <div class="hairlines-y"></div>
        <div class="btn mui-flex__cell txt-ovh"
             @click="tapConfirm">{{confirmText}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Content from './content';
export default {
  name: 'Modal',
  components: { Content },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: [String, Object, Function],
      default: ''
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    confirmAutoHide: {
      type: Boolean,
      default: true
    },
    cancelAutoHide: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      childShow: false,
      textAlignClass: '',
      alignMap: {
        center: 'tc',
        left: '',
        right: 'tr'
      }
    };
  },
  created() {
    console.log('modal-created :');
  },
  deactivated() {
    console.log('deactivated');
  },
  destroyed() {
    console.log('destroyed');
  },
  computed: {
    hasTitle() {
      return this.title.trim() !== '';
    }
  },
  watch: {
    show: {
      handler(val, oldVal) {
        this.childShow = val;
      },
      immediate: true
    },
    content: {
      handler(val, oldVal) {
        if (typeof this.content !== 'string') {
          this.textAlignClass = this.alignMap[this.content.textAlign];
        }
      },
      immediate: true
    }
  },
  methods: {
    tapCancel() {
      this.$emit('on-cancel');
      this.callBack({ cancel: true });
      this.cancelAutoHide && this.hideModal();
    },
    tapConfirm() {
      this.$emit('on-confirm');
      this.callBack({ confirm: true });
      this.confirmAutoHide && this.hideModal();
    },
    hideModal() {
      this.childShow = false;
      this.$emit('update:show', false);
    },
    callBack({ confirm = false, cancel = false }) {
      // 关闭模态框
      this.success && this.success({ confirm, cancel });
    }
  }
};
</script>

