<template>
  <Modal :mask-closable="false" :width="modalWidth" v-model="shouldShowModal">
    <div class="modal-content">
      <Icon :type="iconType"></Icon>
      <span style="margin-left: 2px;">{{alertMsg}}</span>
    </div>
    <div slot="footer">
      <Button @click="onCancel">{{cancalName}}</Button>
      <Button :loading="confirmLoading" @click="onConfirm" type="primary">{{confirmName}}</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'AlertModal',
  data () {
    return {}
  },
  props: {
    modalWidth: {
      type: [Number, String],
      default: 360
    },
    iconType: {
      type: String,
      default: 'md-alert'
    },
    alertMsg: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    cancalName: {
      type: String,
      default: '取消'
    },
    confirmName: {
      type: String,
      default: '确定'
    }
  },
  computed: {
    shouldShowModal: {
      get () {
        return this.showModal
      },
      set (val) {
        console.log('val', val)
      }
    }
  },
  methods: {
    onCancel () {
      this.$emit('on-cancel')
    },

    onConfirm () {
      this.$emit('on-confirm')
    }
  }
}
</script>

<style lang="less" scoped>
.modal-content {
  display: flex;
  text-align: center;
  font-size: 16px;
  justify-content: center;
  align-items: center;
}
</style>
