<template>
    <div>
        <div class="dependant-login">
            <el-image :src="require('../../assets/bg_main_new3.png')" />
            <div style="font-size: 18px;margin-top: 5vh;">民政巡访远程查询系统</div>
            <div style="margin-top: 2%">——赡养人查询入口</div>
            <el-form :rules="rules" ref="loginForm" :model="formData" class="login_form">
                <el-form-item prop="number">
                    <el-input
                            v-model="formData.number"
                            autocomplete="off"
                            prefix-icon="el-icon-user"
                            placeholder="请输入老人身份证"
                            clearable
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" @click="login" class="lzm_bottom_button">绑定账号</el-button>
    </div>
</template>

<script>
    import { detailsLogin, detailsCheck } from "../../api";
    // import {mapMutations} from 'vuex';
    import openId from "../../util/getOpenId";

    export default {
        name: "Login",
        data() {
            let checkIdNumber = (rule, value, callback) => {
                if (!value) {
                    callback(new Error("身份证号不能为空"));
                } else {
                    if (value.length !== 18) {
                        callback(new Error("请输入十八位身份证号"));
                    } else {
                        let cIdNum1 = this.newTime - 60 * 10000;
                        let cIdNum2 = this.newTime - 210 * 10000;
                        let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                        if (!reg.test(value)) {
                            callback(new Error("请输入正确身份证号"));
                        } else if (cIdNum1 < window.parseInt(value.substr(6, 8))) {
                            callback(new Error("老人年龄不能小于60周岁"));
                        } else if (cIdNum2 > window.parseInt(value.substr(6, 8))) {
                            callback(new Error("请输入正确身份证号"));
                        } else {
                            callback();
                        }
                    }
                }
            };
            return {
                rules: {
                    //数据校验规则
                    number: [{ required: true, validator: checkIdNumber, trigger: "blur" }]
                },
                formData: {
                    number: "",
                    openId: ""
                }
            };
        },
        methods: {
            login() {
                this.$refs["loginForm"].validate(v => {
                    if (v) {
                        this.loginDetails();
                    }
                });
            },
            async check(openId) {
                console.log(openId);
                let result = await detailsCheck({ openId: openId });
                console.log(result);
                if (result.code === 0) {
                    this.$router.replace("/dependant/message");
                }
            },
            async loginDetails() {
                let result = await detailsLogin(this.formData);
                console.log(result);
                if (result.code === 0) {
                    this.$router.replace("/dependant/message");
                }
            }
            // ...mapMutations(['changeOldInfo'])
        },
        mounted() {
            if (!window.localStorage.getItem("count1")) {
              window.localStorage.setItem("count1", 1);
              window.localStorage.setItem("openId", "");
            }
            openId.getOpenId(() => {
              this.formData.openId = window.localStorage.getItem("openId");
              this.check(window.localStorage.getItem("openId"));
            });
            // window.localStorage.setItem("openId", "oQDnHw0z8nuxg8zGdzcRP56CLEAw");
            // openId.getOpenId(() => {
            //     this.formData.openId = window.localStorage.getItem("openId");
            //     this.check(window.localStorage.getItem("openId"));
            // });
        }
    };
</script>


<style scoped>
    .dependant-login {
        text-align: center;
        font-size: 16px;
    }

    .login_form {
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10%;
    }

    .lzm_bottom_button {
        width: 80%;
        margin-left: 10%;
    }
</style>
