<template>
    <div class="use">
        <div class="top">
            <img v-if="type=='warning'" src="../assetsPre/wait.png" alt="">
            <img v-else src="../assetsPre/success.png" alt="">
            <div class="text">
                <div class="name">
                    {{title}}
                </div>

                <div class="subTitle">
                    {{subtitle}}
                </div>
            </div>

        </div>
        <el-button v-if="next=='index'" type="primary" class="back" @click="goNext('index')">返回首页</el-button>
        <el-button v-if="next=='login'" type="primary" class="back" @click="goNext('login')">去登录</el-button>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import orderItem from '../components/OrderItem'
export default {
    name: 'systemState',
    props: {
        type: {
            type: String,
            default: 'warning'
        },
        title: {
            type: String,
            default: ''
        },
        subtitle: {
            type: String,
            default: ''
        },
        next: {
            type: String,
            default: 'index'
        }
    },
    data() {
        return {

        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {

    },
    methods: {
        goNext(str) {
            var query = {}
            if (this.$route.name == 'register' || this.$route.name == 'backPassword') {
                query.goIndex = 1
            }
            this.$router.push({
                name: str,
                query: query
            })
        }

    },
    components: {
        orderItem
    }
}
</script>

<style lang="less" scoped>
.use {
    width: 500px;
    .top {
        img {
            display: inline-block;
            width: 80px;
            height: 80px;
            vertical-align: middle;
        }

        .text {
            display: inline-block;
            vertical-align: middle;
            margin-left: 28px;
            .name {
                font-size: 24px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 31px;
            }

            .subTitle {
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(153, 153, 153, 1);
                line-height: 20px;
                margin-top: 7px;
            }
        }
    }

    .back {
        margin-left: 108px;
    }
}
</style>
