<template>
    <Modal
        :visible="visible"
        :onCancel="onCancel"
        :mask="mask"
        :afterClose="afterClose"
        :maskClosable="maskClosable"
        :keyborad="keyborad"
        :onOk="onOk"
        :centered="centered"
        :width="width"
        :class="bem('modal')"
    >
        <div :class="bem()">
            <Icon  :class="bem('icon')" :name="type"/>
            <div v-if="title" :class="bem('title')">{{title}}</div>
            <div v-if="subTitle" :class="bem('sub-title')">{{subTitle}}</div>
            <div v-if="content">{{content}}</div>
            <div :class="bem('buttons')" v-if="okText || cancelText">
                <Button rect type="primary" v-if="okText" @click="onOk">
                    {{okText}}
                </Button>
                <Button rect @click="onCancel" v-if="cancelText">
                    {{cancelText}}
                </Button>
            </div>
        </div>
    </Modal>
</template>

<script>
import Modal from '../Modal';
import Button from '../Button';
import Icon from '../Icon';
import { createComponentName, componentMixin } from '../_utils/component';

export default {
    name: createComponentName('confirm'),
    components: {
        Modal,
        Button,
        Icon,
    },
    mixins: [componentMixin],
    props: {
        onCancel: {
            type: Function,
        },
        afterClose: {
            type: Function,
        },
        title: {
            type: String,
            default: '',
        },
        subTitle: {
            type: String,
            default: '',
        },
        width: {
            type: String,
            default: '453px',
        },
        content: {
            type: [String, Object],
            default: '',
        },
        keyborad: {
            type: Boolean,
            default: false,
        },
        mask: {
            type: Boolean,
            default: false,
        },
        maskClosable: {
            type: Boolean,
            default: false,
        },
        // 居中
        centered: {
            type: Boolean,
            default: true,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        onOk: {
            type: Function,
        },
        type: {
            type: String,
            default: 'success',
        },
        okText: {
            type: String,
        },
        // 取消按钮文字
        cancelText: {
            type: String,
        },
        time: {
            type: Number
        }
    },
    mounted() {
        if (this.time) {
            setTimeout(() => {
                this.onCancel();
            }, this.time);
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-confirm';

.@{b} {
    text-align: center;

    &__icon {
        height: 83px;
        width: auto;
        margin-bottom: 18px;
    }

    &__title {
        font-size:24px;
        color: black;
        text-align: center;
        margin-bottom: @margin-xsm;
    }

    &__sub-title {
        font-size:14px;
        color:rgba(102,102,102,1);
        margin-bottom: @margin-xsm;
    }

    &__buttons {
        display: block;
        text-align: center;
        margin-top: @margin-xxxlg;
    }
}

.@{b}__modal {
    .@{modal} {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       height: 370px;
       padding-bottom: 40px;
    }
}

</style>
