 <template>
	<section class="loader loader--style3" title="2">
        <div class="loader-mask"></div>
        <article class="confirm-content">
            <span class="confirm-content-title">{{confirmTitle}}</span>
            <div class="confirm-content-split"></div>
            <div class="confirm-content-btn">
                <span class="confirm-content-btn-confirm" @click="confirm">{{confirmBtnText}}</span>
                <span class="confirm-content-btn-split"></span>
                <span class="confirm-content-btn-concle" @click="cancle">{{concleBtnText}}</span>
            </div>
        </article>
    </section>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        props: {
            confirmTitle: {
                type: String,
                default: '确认删除所有搜索历史'
            },
            confirmBtnText: {
                type: String,
                default: '删除'
            },
            concleBtnText: {
                type: String,
                default: '再想想'
            }
        },
        methods: {
            confirm() {
                this.$emit('confirm')
            },
            cancle() {
                this.$emit('cancle')
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../style/mixin';
    .loader {
        &-mask {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 100;
            background: rgba(205,205,205, 0.6);
        }
        .confirm-content {
            position: absolute;
            top: px2rem(280px);
            left: px2rem(52.5px);
            z-index: 101;
            width: px2rem(270px);
            height: px2rem(116px);
            border-radius: px2rem(6px);
            text-align: center;
            font-weight: 400;
            background: #fff;
            &-title {
                display: inline-flex;
                height: px2rem(70px);
                line-height: px2rem(70px);             
                font-size: px2rem(17px);
                color: rgba(102,102,102,1);
            }
            &-split {
                border-top: 1px solid #F0F0F0;
            }
            &-btn {
                display: flex;
                padding-top: px2rem(14px);
                justify-content: center;
                font-size: px2rem(15px);
                &-confirm {
                    color: #999;
                }
                &-split {
                    margin: 0 px2rem(50px);
                    border-left: 1px solid #F0F0F0;
                }
                &-concle {
                    color: #4A9E8F;
                }
            }
        }
    }


</style>
