<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="showModalConfirm"
      :closable="false"
      :mask-closable="false"
      :width="420"
      class="modal-confirm zIndex-1200">
      <div class="modal-confirm-flex">
        <div><i class="ivu-icon ivu-icon-help-circled"></i></div>
        <div><p class='content-p'>{{content}}</p></div>
      </div>
      <div slot="footer">
        <Button :type="item.type === '' ? 'text' : 'primary' " v-for="(item,index) in btnModalList" :key="index"
                @click="_btnModal(item.name,index)" :loading="isLoading !== undefined &&loading === true && currentIndex === index"
                style="margin:0 3px;" size="large">
          {{item.name}}
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
/**
 * modal 确认弹框提示（底部多个按钮）
 *
 **/
export default {
  name: 'ModalConfirm',
  props: {
    btnModalList: null,
    content: null,
    isLoading: null // 是否显示loading
  },
  data() {
    return {
      showModalConfirm: false,
      modalTitle: '提示',
      // 用于区别modal
      modalName: '',
      // 临时数据存储
      tempObj: {},
      loading: false,
      currentIndex: -1
    }
  },
  methods: {
    _openModal(name, tempObj) {
      this.showModalConfirm = true
      this.currentIndex = -1
      this._isLoading(false)
      this.loading = false
      if (name === undefined) {
        this.modalName = 'confirmModal'
      } else {
        this.modalName = name
      }
      this.tempObj = tempObj || {}
    },
    _closeModal() {
      this.showModalConfirm = false
      this._isLoading(false)
    },
    // loading 显示与否
    _isLoading(msg) {
      if (this.isLoading !== undefined) {
        this.loading = msg
      }
    },
    _btnModal(name, index) {
      this.currentIndex = index
      if (name === '取消') {
        this._closeModal()
      }
      this.$emit('on-result-change', name, this.modalName, this.tempObj)
    },
    // 取消loading
    _cancelLoading() {
      this.isLoading = false
    }
  }
}
</script>
<style scoped>
.modal-confirm .ivu-modal-header {
  border-bottom: none !important;
}

.modal-confirm .ivu-modal-body {
  padding: 20px !important;
}

.modal-confirm .ivu-modal-footer {
  border-top: none !important;
}

.modal-confirm i {
  color: #f90 !important;
}

.modal-confirm i {
  font-size: 36px !important;
}

.modal-confirm .modal-confirm-flex {
  display: flex;
  justify-content: flex-start;
  text-align: center;
}

.modal-confirm-flex div {
  margin-right: 10px;
}

.content-p {
  margin-top: 5px;
  margin-bottom: 0;
}
</style>
