<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/logo.png" style="width: 1.25rem;" alt="">
        </div>
        <div class="bandSection">
            <div class="school">
                {{ dataList.schoolName }}
            </div>
            <div class="phoneSection">
                <i class="man_icon"></i>
                <input type="number" v-model="dataList.phoneNumber" class="phone" pattern="[0-9]" placeholder="请输入手机号报名或查询进度">
            </div>
        </div>

        <div class="btn-group">
            <van-button size="large" @click="onSubmit" class="btn">{{ dataList.status == 2 ? '缴费' : '报名 / 查询进度' }}</van-button>
            <!-- <van-button size="large" class="btn">查询进度</van-button> -->
        </div>

        <van-popup class="popup" v-model="popupStatus">
            <div class="pContainer">
                <i class="message_icon"></i>
                <div class="content">
                    <p class="status">{{ statusList(popupText) }}</p>
                    <p class="dec" v-if="popupText == 0">请您耐心等待</p> 
                </div>
            </div>
            <div class="pGroup">
                <van-button class="button" @click="popupStatus = false">取消</van-button>
                <van-button class="button" @click="popupStatus = false">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Button, Popup, Toast, Dialog } from 'vant'
import qs from 'qs'
export default {
    name: 'login',
    components: { Button, Popup, Toast, Dialog },
    data() {
        return {
            popupStatus: false,
            popupText: '',
            dataList: {
                status: null,
                schoolName: '', // 乐团名称
                phoneNumber: '', // 手机号
                branchId: '', // 分部编号
            }
        }
    },
    mounted() {
        let route = this.$route.query
        let params = {
            clazzId: route.classId,
            schoolId: route.schoolId
        }
        axios.post(`/user/getClassDetail`,qs.stringify(params)).then((response) => {
            let result = response.data
            this.dataList.schoolName = result.data.name
            this.dataList.branchId = result.data.branchId
            this.dataList.status = result.data.status
        })
    },
    methods: {
        onSubmit() {
            let dataStatus = this.dataList.status

            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.dataList.phoneNumber))){ 
                Toast('手机号输入有误')
                return false; 
            }
            let params = this.$route.query
            axios.get(`/user/getUserDetailByPhone?clazzId=${params.classId}&phone=${this.dataList.phoneNumber}&cityId=${params.cityId}`).then((res) => {
                let result = res.data
                // 判断是否有数据
                if(result.status) {
                    if(result.data) {
                        if(parseInt(result.data.pushStatus) == 1) {
                            Dialog.alert({
                                title: '提示',
                                message: '恭喜您，报名成功',
                                confirmButtonColor: '#269a93'
                            })
                        } else if(parseInt(result.data.pushStatus) == 2 && parseInt(result.data.status)  == 0) {
                            this.$router.push({
                                path: 'home',
                                query: {
                                    branchId: result.data.branchId,
                                    stuId: result.data.id,
                                    classId: result.data.classId
                                }
                            })
                        }
                        
                    } else {
                        if(dataStatus >= 2) {
                            Dialog.alert({
                                title: '提示',
                                message: '报名已截止，请联系教务老师',
                                confirmButtonColor: '#269a93'
                            })
                        } else {
                            this.$router.push({
                                path: 'register',
                                query: {
                                    phone: this.dataList.phoneNumber,
                                    cityId: params.cityId,
                                    classId: params.classId,
                                    schoolId: params.schoolId,
                                    branchId: this.dataList.branchId
                                }
                            })
                        }
                        
                    }
                } else {
                    Dialog.alert({
                        title: '提示',
                        message: result.msg,
                        confirmButtonColor: '#269a93'
                    })
                }
            })
        },
        statusList(index) {
            let statusText
            switch(index) {
                case 0: 
                    statusText = '报名中'
                break;
                case 1: 
                    statusText = '缴费中'
                break;
            }
            return statusText
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: #14928A;
}
.logo {
    padding-top: .6rem;
    text-align: center
}
.bandSection {
    padding: .5rem .28rem 0;
    .school {
        color: #fff;
        font-size: .16rem;
        font-weight: bold;
        border-bottom: 2px solid #fff;
        padding-bottom: .08rem;
        margin-bottom: .2rem;
    }

    .phoneSection {
        background:rgba(0,0,0,0.25);
        border-radius:5px;
        display: flex;
        align-items: center;
        height: .45rem;
    }
    .man_icon {
        background: url('../assets/man_icon.png') no-repeat center;
        background-size: contain;
        width: .15rem;
        height: .21rem;
        margin-left: .15rem;
    }

    .phone {
        flex: 1;
        border: 0;
        background-color: transparent;
        color: #fff;
        padding-left: .12rem;
        font-size: .14rem;
        &::placeholder{
            color: #FFFFFF;
        }
    }
}
.btn-group {
    padding: .3rem .35rem 0;
}
.btn {
    border-radius: 1rem;
    background-color: #fff;
    color: #269a93;
    font-size: .16rem;
    margin-bottom: .2rem;
}
.popup {
    width: 75%;
    padding: .2rem .2rem .1rem;
    border-radius: .05rem;
}
.pContainer {
    display: flex;
    .message_icon {
        display: inline-block;
        background: url('../assets/message_icon.png') no-repeat center;
        background-size: contain;
        width: .32rem;
        height: .32rem;
        margin-top: .05rem;
    }
    .content {
        display: flex;
        color: #444;
        flex-direction: column;
        padding-left: .16rem;
        .status {
            font-size: .2rem;
            padding-bottom: .05rem;
        }
        .dec {
            font-size: .16rem;
        }
    }
}
.pGroup {
    display: flex;
    justify-content: space-between;
    padding-top: .15rem;
    .button {
        border: 0;
        color: #009688;
        font-size: .14rem;
        &:active::before {
            opacity: 0;
        }
    }
}
</style>