<template>
    <div class="app-container">
        <div style="padding-top: 100px;"></div>

        <p id="loginTitle"> 登 录 </p>

        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="username"
                label="账号"
                placeholder="请输入账号"
                :rules="rules.username"
                clearable
            />
            <van-field
                v-model="password"
                :type="showPwd ? 'text' : 'password'"
                name="password"
                label="密码"
                placeholder="请输入密码"
                :rules="rules.password"
                clearable
            >
                <template #right-icon>
                    <van-icon :name="showPwd ? 'eye-o' : 'closed-eye'" @click="showPwd = !showPwd" />
                </template>
            </van-field>
            <div style="margin: 26px;">
                <van-button round block type="info" size="small" native-type="submit">登录</van-button>
            </div>
            <!-- 注册，团体卡牌用户无需注册 -->
            <div style="text-align:center;" v-if="allowRegist">
                没有账号?
                <router-link to="register">
                    <span style="color:#2196f3;margin-left:5px">前往注册</span>
                </router-link>
            </div>
            <p v-else style="text-align:center;">团体卡牌用户无需注册，账号密码请咨询发卡人。</p>
            <!-- 忘记密码 -->
            <div style="text-align:center;padding-top:15px;">
                忘记密码?
                <router-link to="reset_pwd">
                    <span style="color:#2196f3;margin-left:5px">前往重置</span>
                </router-link>
            </div>
        </van-form>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog,Icon,Form,Field,Button } from 'vant';

Vue.use(Dialog);
Vue.use(Form);
Vue.use(Field);
Vue.use(Icon);
Vue.use(Button);

export default {
    data() {
        return {
            allowRegist: true, // 允许注册
            showPwd: false,
            username: '',
            password: '',
            rules: {
                username: [
                    { required: true, message: '请输入账号' },
                    { trigger: 'onBlur', pattern: /^[-_a-zA-Z0-9]{6,18}$/, message: '账号格式错误' },
                ],
                password: [
                    { required: true, message: '请输入密码' },
                    { trigger: 'onBlur', pattern: /^[-_a-zA-Z0-9]{6,16}$/, message: '密码格式错误' },
                ],
            },
        };
    },
    created() {
        let userType = localStorage.getItem('userType');
        let deviceType = localStorage.getItem('deviceType');
        if (userType == 'group' && deviceType == 'card') {
            this.allowRegist = false;
        }
    },
    mounted() {
        let userType = localStorage.getItem('userType');
        let deviceType = localStorage.getItem('deviceType');

        // if (!userType && !deviceType) {
        //     Dialog.confirm({
        //         title: '提醒',
        //         message: '未选择用户类型，前往选择。',
        //         showCancelButton: false,
        //     })
        //     .then(() => {
        //         this.$router.replace('first')
        //     })
        //     .catch(() => {
        //         console.log('canc');
        //     })
        // }
    },
    methods: {
        /**
         * 登录
         */
        onSubmit(values) {

            //  let openid ='2222222';//测试用
            let openid = this.getOpenid();
            
            // if (!openid) {
            //     Dialog.confirm({
            //         title: '提醒',
            //         message: '未授权，请关闭当前页面，重新进入并授权。',
            //         showCancelButton: false,
            //     })
            //     return;
            // }

            let postData = {
                username: values.username,
                password: values.password,
            }
            this.$http.post('login&openid='+openid, JSON.stringify(postData))
                .then(resp => {
                    if (!resp.data.success) {
                        this.$notify(resp.data.message || '登录失败');
                        return;
                    }

                    let data = resp.data.data || {};
                    
                    if (!data.id) {
                        this.$notify('获取用户信息失败');
                        return;
                    }

                    localStorage.setItem('userid', data.id);
                    localStorage.setItem('userinfo', JSON.stringify(data));
                    
                    this.$notify({ 
                        type: 'success',
                        message: resp.data.message || '登录成功',
                    });
                    // 跳转首页
                    this.$router.push('/location');
                }).catch(err =>{
                    console.error(err);
                })
        },
        /**
         * 获取openid
         */
        getOpenid() {
            let openid = localStorage.getItem('openid') ;
            if (openid) {
                return openid;
            }
            openid = this.$route.query.openid || '';
            if (openid) {
                localStorage.setItem('openid', openid); 
            }
            return openid;
        }

    },
}
</script>

<style lang="scss" scoped>
#loginTitle {
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
}
</style>