<template>
    <v-container class="login">
        <div class="login-title">登录</div>
        <div class="login-subhead  grey--text">
            心连心服务队-推举系统
        </div>
        <v-form
                @submit="formSubmit"
                v-model="valid"
        >
            <v-row>
                <v-col cols="12" md="12">
                    <v-text-field
                            :counter="11"
                            :rules="usernameRules"
                            clearable
                            label="手机号"
                            prefix="+86"
                            required
                            type="tel"
                            v-model="username"
                    ></v-text-field>
                </v-col>
<!--                <v-col-->
<!--                        class="caption grey&#45;&#45;text"-->
<!--                        cols="12"-->
<!--                        md="12"-->
<!--                >-->
<!--                    点击"下一步"即表示已阅读并同意并自愿遵守-->
<!--                    <span-->
<!--                            @click="ishow(1)"-->
<!--                            class="blue&#45;&#45;text text&#45;&#45;darken-4"-->
<!--                    >《服务使用协议》</span>以及-->
<!--                    <span-->
<!--                            @click="ishow(2)"-->
<!--                            class="blue&#45;&#45;text text&#45;&#45;darken-4"-->
<!--                    >《隐私声明》</span>-->
<!--                </v-col>-->
                <v-col>
                    <v-btn
                            :disabled="!valid"
                            block
                            style="color: #ffffff"
                            color="#1f3c84"
                            large
                            type="submit"
                    >
                        下一步
                    </v-btn>
                </v-col>
            </v-row>
        </v-form>

        <v-dialog
                v-model="dialog"
                width="500"
        >
            <v-card>
                <v-card-title
                        class="grey lighten-2"
                >
                    {{dia.title}}
                </v-card-title>

                <v-card-text class="pt-4" v-html="dia.content">
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn
                            @click="dialog = false"
                            color="#1f3c84"
                            text
                    >
                        已阅读
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

    </v-container>
</template>

<script>
    import router from '@/router'

    export default {
        name: "login",
        data() {
            return {
                valid: false,
                username: '',
                usernameRules: [
                    v => !!v || '手机号必须填写',
                    v => (v && v.length == 11) || '手机号码必须是11位',
                    v => /^1[3-9][0-9]{9}$/.test(v) || '手机号码格式不正确'
                ],
                dialog: false,
                dia: {
                    title: '',
                    content: ''
                },
                agreement: '',
                privacy: '',
            }
        },
        mounted() {
            this.$api.auth.license().then(result => {
                this.agreement = result.agreement;
                this.privacy = result.privacy
            });
        },
        methods: {
            formSubmit(e) {
                e.preventDefault();
                this.$api.auth.code({
                    username: this.username
                }).then(() => {
                    router.push({
                        name: 'AuthVerify',
                        params: {
                            username: this.username
                        }
                    })
                }).catch(err => {
                    this.toast(err.message, 'warning')
                })
            },
            ishow(n) {
                this.dialog = !this.dialog;
                if (n == 1) {
                    this.dia = {
                        title: '用户协议',
                        content: this.agreement
                    }
                } else {
                    this.dia = {
                        title: '隐私声明',
                        content: this.privacy
                    }
                }
            },
            wechatLogin() {
                let uri = window.location.origin + '/auth/wechat';
                this.$api.auth.wechat_url({
                    uri: uri,
                    scope: 'snsapi_base'
                }).then(res => {
                    window.location.href = res.url
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        background-repeat: no-repeat;
        background-image: url("../../assets/logo.png");
        background-size: 200px;
        background-position: center;
        padding: 20vh 60px;
    }

    .login-title{
        position: relative;
        font-size: 28px;
        font-weight: bold;
    }

    .login-subhead{
        padding-bottom: 5vh;
        font-size: 14px;
    }
</style>