<template>
  <fbg-dialog :custom-class="method === 'confirm'?'fbg-messagebox-confirm':''" :close-on-click-modal="closeOnClickModal" :show-close="showClose" :close-on-press-escape="closeOnPressEscape" :title="title" :modal="modal" width="400px" :visible.sync="dialogVisible">
    <div class="fbg-dialog-body">
      <div v-if="method === 'confirm'" style="display: flex;" >
        <div class="fbg-messagebox-icon">
          <i :class="iconClassName" />
        </div>
        <div class="fbg-messagebox-main">
          <p v-if="dangerouslyUseHTMLString" v-html="message"></p>
          <p v-else class="fbg-messagebox-title">
            <slot name="message">{{message}}</slot>
          </p>
          <p v-if="dangerouslyUseHTMLString" v-html="content" class="fbg-messagebox-content">{{content}}</p>
          <p v-else class="fbg-messagebox-content">
            <slot name="content">{{content}}</slot>
          </p>
        </div>
      </div>
      <div v-else style="display: flex; align-items: center" >
        <div class="fbg-messagebox-icon">
          <i :class="iconClassName" />
        </div>
        <p v-if="dangerouslyUseHTMLString" v-html="message"></p>
        <p v-else class="fbg-messagebox-title">
          <slot name="message">{{message}}</slot>
        </p>
      </div>
      
    </div>
    <template v-if="showFooter">
      <div slot="footer" >
        <el-button v-show="showConfirmButton" style="margin-right: 10px" type="primary" @click="handleConfirm">{{confirmButtonText}}</el-button>
        <el-button v-show="showCancelButton" @click="handleCancel">{{cancelButtonText}}</el-button>
      </div>
    </template>
  </fbg-dialog>
</template>
<script>
import Dialog from '../dialog';
export default {
  components: {
    'fbg-dialog': Dialog
  },
  props: {
    type: {
      type: String,
      default: 'warning'
    },
    method: {
      type: String,
      default: 'confirm'
    },
    title: {
      type: String,
      default: '温馨提示'
    },
    message: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    modal: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    cancelButtonText: {
      type: String,
      default: '取 消'
    },
    confirmButtonText: {
      type: String,
      default: '确 定'
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    dangerouslyUseHTMLString: {
      type: Boolean,
      default: false
    },
    contentSlotRender: {
      type: Function,
      default: null
    },
    messageSlotRender: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: true
    } 
  },
  created() {
    this.updateSlot();
  },
  beforeUpdate() {
    this.updateSlot();
  },
  computed: {
    iconClassName() {
      return (this.type === 'success'?'fbg-icon-success':'fbg-icon-warning')+' fbg-messagebox-'+this.type+'-icon';
    },
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    updateSlot() {
      if (typeof this.contentSlotRender === 'function') {
        this.$slots.content = [this.contentSlotRender(this.$createElement, this)];
      }
      if (typeof this.messageSlotRender === 'function') {
        this.$slots.message = [this.messageSlotRender(this.$createElement, this)];
      }
    }
  }
}
</script>
<style lang="scss">
.fbg {
  &-messagebox {
    &-confirm {
      .el-dialog__header {
        display: none;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.fbg {
  &-messagebox {
    &-title {
      padding: 10px 0px;
      font-size: 14px;
    }
    &-icon {
      display: inline-block;
      padding: 5px 10px;
      i {
        font-size: 60px;
      }
    }
    &-success-icon {
      color: #3CCDA6;
    }
    &-warning-icon {
      color: #F2873B;
    }
    &-main {
      flex: 1;
      vertical-align: top;
    }
    &-content {
      color: #999;
    }
  }
}
</style>