<template>
  <a-modal
    :title="title"
    :visible="visible"
    :width="width"
    :centered="centered"
    :destroyOnClose="true"
    :maskClosable="false"
    :footer="footer"
    :closable="closable"
    :dialog-style="{ top: centered ? null : '46px' }"
    @cancel="$emit('on-cancel')"
  >
    <slot />

    <template slot="footer">
      <a-space size="small">
        <a-button icon="close-square" v-if="hasCancel" @click="$emit('on-cancel')">
          {{ cancelText }}
        </a-button>
        <!-- 用于底部有多个按钮或者其他组件,位置不要改变 -->
        <slot name="footer" />
        <a-button type="primary" icon="check-square" :loading="loading" @click="$emit('on-confirm')">
          {{ confirmText }}
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'AdminModal',
  props: {
    width: {
      type: String,
      required: false,
      default: '80%'
    },
    title: {
      type: String,
      required: false,
      default: '标题'
    },
    visible: {
      type: Boolean,
      required: false,
      default: false
    },
    loading: {
      type: Boolean,
      required: false,
      default: false
    },
    confirmText: {
      type: String,
      required: false,
      default: '确 认'
    },
    cancelText: {
      type: String,
      required: false,
      default: '取 消'
    },
    centered: {
      type: Boolean,
      required: false,
      default: false
    },
    hasCancel: {
      type: Boolean,
      required: false,
      default: true
    },
    footer: {
      type: [Object],
      required: false
    },
    closable: {
      type: Boolean,
      required: false,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-modal {
  &-title {
    font-size: 18px;
  }

  &-content {
    /* border-radius: 20px; */
    border-radius: 4px;
    overflow: hidden;
  }

  &-body {
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
    /* padding: ; */
  }
}
</style>
