<template>
  <Modal
    v-model="show"
    :title="title"
    :mask="mask"
    :mask-closable="maskClosable"
    :footer-hide="true"
    v-bind="$attrs"
  >
    <template slot="header">
      <slot name="header" v-if="$slots.header"></slot>
    </template>
    <div class="dialog-content">
      <div class="dialog-body">
        <slot />
      </div>

      <DialogFooter
        v-if="!footerHide"
        :on-cancel="handleCancel"
        :on-confirm="handleConfirm"
      />
      <slot name="footer"/>
    </div>
  </Modal>
</template>

<script>
  import DialogFooter from './dialog-footer.vue';

  export default {
    name: 'CommonModal',

    components: {
      DialogFooter,
    },

    model: {
      prop: 'visible',
      event: 'change',
    },

    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      mask: {
        type: Boolean,
        default: true,
      },
      maskClosable: {
        type: Boolean,
        default: false,
      },
      footerHide: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '提示',
      },
      disabledConfirm: {
        type: Boolean,
        default: false,
      },
      onCancel: {
        type: Function,
        default: () => { },
      },
      onConfirm: {
        type: Function,
        default: () => { },
      },
    },

    watch: {
      visible: {
        handler(val) {
          this.show = val;
        },
        immediate: true
      },

      show(val) {
        this.$emit('change', val);
      },
    },

    data() {
      return {
        show: false,
      };
    },

    mounted() { },

    methods: {
      handleCancel() {
        this.onCancel();
        this.$emit('change', false);
      },

      handleConfirm() {
        this.onConfirm();
      },
    },
  };
</script>

<style lang="less" scoped></style>
