<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.select.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="container container-small">
            <h1>登录
                <small>忘记密码？<a href="" onclick="return false;" data-toggle="modal"
                        data-target="#myModal">修改密码</a></small>
            </h1>
            <form method="post" action="/login/">
                <div class="form-group">
                    <label for="user1">用户名</label>
                    <input type="text" class="form-control" id="user1" name="user_name" autocomplete="off">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" v-model="pswd" name="pwd">
                </div>
                <div class="form-group">
                    <!-- <button type="submit" class="btn btn-primary submit" @click="login">登录</button> -->
                    <button type="submit" class="btn btn-primary submit">登录</button>
                </div>
            </form>
        </div>
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 65%;">
                    <div class="modal-header">
                        <div class="modal-title" id="uppswd">修改密码</div>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="user2">用户名</label>
                            <input type="text" class="form-control upinput" id="user2" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="pswd">旧密码</label>
                            <input type="password" class="form-control upinput" id="pswdold" v-model="pswd_old">
                        </div>
                        <div class="form-group">
                            <label for="pswd">新密码</label>
                            <input type="password" class="form-control upinput" v-model="pswd_new">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" data-dismiss="modal" @click="changepswd()">确定</button>
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                up_time: '',
                user_1: '',
                user_2: '',
                pswd: '',
                pswd_old: '',
                pswd_new: '',
            },
            methods: {
                login() {
                    console.log($("#user1").val())
                    this.user_1 = $("#user1").val()
                    axios.post('/login/', {
                        params: {
                            user_1: this.user_1,
                            pswd: this.pswd,
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data
                            console.log(res.request)
                            // if (data1["code"] == 200) {
                            //     alert("登录成功")
                            //     self.location = '/index/';
                            // }
                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                        })
                },
                changepswd() {
                    // console.log($("#user2").val())
                    this.user_2 = $("#user2").val()
                    axios.put('/login/', {
                        params: {
                            user_2: this.user_2,
                            pswd_old: this.pswd_old,
                            pswd_new: this.pswd_new,
                        }
                    })
                        .then(res => {
                            // alert(res.data)
                            var data1 = res.data
                            console.log(data1)

                        })
                        .catch(err => {
                            alert(err.response["data"] + err.response["status"])
                            // console.log(err.response["data"] + err.response["status"])
                            // console.log(err.response["data"] + err.response["status"])
                        })
                },
            },
            created() {
            }
        });

        $(function () {
            // 开始写 jQuery 代码...
            var timer = null;
            // 定义一个公用的搜索接口
            function getStr(n, url, field, clickif) {
                //n为搜索的参数 url为请求的路由，filed是定位表单的id,
                //clickif用于判断是否是第一次加载，如果不是第一次加载则需要模拟点击
                var search = n
                // 配置路由
                if (typeof search === 'undefined') {
                    search = ''
                };
                // console.log(search)
                axios.get(url, {
                    params: {
                        search_no: search
                    }
                })
                    .then(res => {
                        // alert(res.data)
                        var data1 = res.data.data
                        datas = data1
                        // console.log(datas)
                        if (datas.length == 0) {
                            alert("没有搜索到数据")
                            return
                        }
                        $.selectSuggest(field, datas);
                        // 是否第一次进入
                        if (clickif !== 1) {
                            // 触发点击
                            $("#" + field).trigger("click");
                        }
                    })
                    .catch(err => {
                        console.log('error:' + err)
                    })
            };

            //登录时获取用户信息
            $("#user1").bind("input propertychange", function (event) {
                var search = $("#user1").val()
                // console.log($("#user1").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/logininformation/', 'user1');
                }, 2000);
            });
            getStr('', '/logininformation/', 'user1', 1);
            //修改密码时获取用户信息
            $("#user2").bind("input propertychange", function (event) {
                var search = $("#user2").val()
                // console.log($("#user2").val())
                timer && clearTimeout(timer);
                timer = setTimeout(function () {
                    getStr(search, '/logininformation/', 'user2');
                }, 1000);
            });
        });
    </script>
</body>

</html>