<template>
    <es-modal
        headerHide
        footerHide
        :closable="closable"
        :show-modal="_showModal"
        :mask-closable="maskClosable"
        :height="height"
        :width="width"
        :title="title"
        :ok-text="okText"
        :cancel-text="cancelText"
        @on-ok="clickOk"
        @on-cancel="clickCancel"
        @on-visible-change="visibleChange"
        class="fixed-height es-confirm-modal"
        ref="esConfirmModal"
    >
        <div slot="body" class="confirm-body">
            <div class="ivu-modal-confirm-head">
                <div :class="headIconClass">
                    <i :class="iconClass"></i>
                </div>
                <div class="ivu-modal-confirm-head-title">{{ title }}</div>
            </div>
            <span class="content">{{ content }}</span>
            <div class="btn-bar">
                <Button size="large" class="mr-8" @click="clickCancel(true)">{{
                    cancelText
                }}</Button>
                <Button type="primary" size="large" @click="clickOk">{{
                    okText
                }}</Button>
            </div>
        </div>
    </es-modal>
</template>
<script>
export default {
    name: 'es-confirm-modal',
    props: {
        // 四种类型的确认框，info/success/warning/error
        type: {
            type: String,
            default: 'warning'
        },
        showModal: {
            type: Boolean,
            default: false
        },
        width: {
            type: [String, Number],
            default: 500
        },
        height: {
            type: [String, Number],
            default: 200
        },
        okText: {
            type: String,
            default: '确定'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        // 标题
        title: {
            type: String,
            default: '询问'
        },
        // 内容
        content: {
            type: String,
            default: ''
        },
        maskClosable: {
            type: Boolean,
            default: false
        },
        closable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    methods: {
        clickOk(value) {
            this.$emit('on-ok', value);
        },
        clickCancel(value) {
            this.$emit('on-cancel', value);
        },
        visibleChange(value) {
            this.$emit('on-visible-change', value);
        }
    },
    computed: {
        _showModal: {
            get() {
                return this.showModal;
            },
            set(value) {}
        },
        headIconClass: {
            get() {
                return (
                    'ivu-modal-confirm-head-icon ivu-modal-confirm-head-icon-' +
                    this.type
                );
            },
            set() {}
        },
        iconClass: {
            get() {
                // ivu-modal-confirm-head-icon ivu-modal-confirm-head-icon-warning
                let cls = '';
                switch (this.type) {
                    case 'info':
                        cls = 'ivu-icon ivu-icon-ios-information-circle';
                        break;
                    case 'success':
                        cls = 'ivu-icon ivu-icon-ios-checkmark-circle';
                        break;
                    case 'warning':
                        cls = 'ivu-icon ivu-icon-ios-alert';
                        break;
                    case 'error':
                        cls = 'ivu-icon ivu-icon-ios-close-circle';
                        break;
                    default:
                        cls = 'ivu-icon ivu-icon-ios-alert';
                        break;
                }
                return cls;
            },
            set() {}
        }
    }
};
</script>
<style lang="scss" scoped>
.confirm-body {
    position: relative;
    height: 100%;
    width: 100%;
}
.btn-bar {
    position: absolute;
    bottom: 0;
    right: 0;
}
.content {
    font-size: 14px;
    margin-left: 45px;
}
</style>
