@{
    ViewBag.Title = "PersonalSetting";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}

    <script src="~/Content/Scripts/plugins/mui/js/mui.view.js"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="~/Content/Scripts/babel.min.js"></script>
    <script src="~/Content/Scripts/polyfill.min.js"></script>


    <style>

        .mui-views,
        .mui-view,
        .mui-pages,
        .mui-page,
        .mui-page-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #efeff4;
        }

        .mui-pages {
            top: 44px;
            height: auto;
        }

        .mui-scroll-wrapper,
        .mui-scroll {
            background-color: #efeff4;
        }

        .mui-page.mui-transitioning {
            -webkit-transition: -webkit-transform 300ms ease;
            transition: transform 300ms ease;
        }

        .mui-page-left {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .mui-ios .mui-page-left {
            -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
        }

        .mui-navbar {
            position: fixed;
            right: 0;
            left: 0;
            z-index: 10;
            height: 44px;
            background-color: #00aaff;
        }

            .mui-navbar .mui-bar {
                position: absolute;
                background: transparent;
                text-align: center;
            }

        .mui-android .mui-navbar-inner.mui-navbar-left {
            opacity: 0;
        }

        .mui-ios .mui-navbar-left .mui-left,
        .mui-ios .mui-navbar-left .mui-center,
        .mui-ios .mui-navbar-left .mui-right {
            opacity: 0;
        }

        .mui-navbar .mui-btn-nav {
            -webkit-transition: none;
            transition: none;
            -webkit-transition-duration: .0s;
            transition-duration: .0s;
        }

        .mui-navbar .mui-bar .mui-title {
            display: inline-block;
            width: auto;
            color: white;
        }

        .mui-page-shadow {
            position: absolute;
            right: 100%;
            top: 0;
            width: 16px;
            height: 100%;
            z-index: -1;
            content: '';
        }

        .mui-page-shadow {
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
            background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
        }

        .mui-navbar-inner.mui-transitioning,
        .mui-navbar-inner .mui-transitioning {
            -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
            transition: opacity 300ms ease, transform 300ms ease;
        }

        .mui-page {
            display: none;
        }

        .mui-pages .mui-page {
            display: block;
        }

        .mui-page .mui-table-view:first-child {
            margin-top: 15px;
        }

        .mui-page .mui-table-view:last-child {
            margin-bottom: 60px;
        }

        .mui-table-view {
            margin-top: 20px;
        }

            .mui-table-view span.mui-pull-right {
                color: #999;
            }

        .mui-table-view-divider {
            background-color: #efeff4;
            font-size: 14px;
        }

            .mui-table-view-divider:before,
            .mui-table-view-divider:after {
                height: 0;
            }

        .head {
            height: 40px;
        }

        #head {
            line-height: 40px;
        }

        .head-img {
            width: 40px;
            height: 40px;
        }

        #head-img1 {
            position: absolute;
            bottom: 10px;
            right: 40px;
            width: 40px;
            height: 40px;
        }

        .update {
            font-style: normal;
            color: #999999;
            margin-right: -25px;
            font-size: 15px;
        }

        .mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }

        .mui-ios .mui-navbar .mui-bar .mui-title {
            position: static;
        }

        .mui-bar .mui-btn-nav.mui-pull-left {
            color: white;
        }

        .mui-btn-positive, .mui-btn-success, .mui-btn-green {
            color: #fff;
            border: 1px solid #00aaff;
            background-color: #00aaff;
        }
    </style>
    <div id="vue">
        <!--页面主结构开始-->
        <div id="app" class="mui-views">
            <div class="mui-view">
                <div class="mui-navbar">
                </div>
                <div class="mui-pages">
                </div>
            </div>
        </div>
        <div id="Main" class="mui-page">
            <!--页面标题栏开始-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">个人设置</h1>

            </div>
            <!--页面标题栏结束-->
            <div class="mui-page-content">
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a href="#UpdatePassword" class="mui-navigate-right"> 修改密码<i class="mui-pull-right update"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="UpdatePassword" class="mui-page">
            <!--页面标题栏开始-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">修改密码</h1>

            </div>
            <!--页面标题栏结束-->
            <div class="mui-page-content">
                <form class="mui-input-group" style="margin-top:2rem">
                    <div class="mui-input-row">
                        <input v-model="Code" type="password" style="width:60%" class="mui-input" placeholder="请输入验证码">
                        <button v-on:click="GetSMS" v-bind:disabled="SMS!='获取验证码'" type="button" class="mui-btn mui-btn-success" style="margin-top:5px;margin-right:5px;width:110px">{{SMS}}</button>
                    </div>
                    <div class="mui-input-row">
                        <input v-model="password" type="password" class="mui-input-password" placeholder="请输入新密码">
                    </div>
                    <button type="button" style="margin-top: 10px;" class="mui-btn mui-btn-success mui-btn-block btn_2" v-on:click="ModifyPassword">提交</button>
                </form>
            </div>
        </div>
    </div>
    <script type="text/babel"> 
        var vm = new Vue({
            el: '#vue',
            data: {
                Code: '',
                SMS: '获取验证码',
                password: ''
            },
            created () {

            },
            mounted () {
                this.init();
            },
            methods: {
                ///初始化页面
                init: function () {
                    var that = this;
                    mui.init();

                    var defaultPages = '#Main';
                    //初始化单页view
                    that.viewApi = mui('#app').view({
                        defaultPage: defaultPages
                    });
                    mui('.mui-scroll-wrapper').scroll();
                    //处理view的后退与webview后退
                    var oldBack = mui.back;
                    var view = that.viewApi.view;
                    mui.back = function () {
                        if (that.viewApi.canBack()) { //如果view可以后退，则执行view的后退
                            that.viewApi.back();
                        } else { //执行webview后退
                            oldBack();
                        }
                    };

                },
                GetSMS () {
                    var that = this;
                    var validCode = true;
                    var time = 60;
                    if (validCode) {
                        validCode = false;
                        var t = setInterval(function () {
                            time--;
                            that.SMS = '重新获取(' + time + 's)';
                            if (time == 0) {
                                clearInterval(t);
                                that.SMS = '获取验证码';
                                validCode = true;
                            }
                        }, 1000);

                    }

                    $.post("/MobileProblem/GetSMSCodeCurrent", function (data) {
                        if (data.code == "200") {
                            mui.toast('短信发送成功', { duration: 'long', type: 'div' });
                        } else {
                            mui.toast('短信发送失败', { duration: 'long', type: 'div' });
                        }
                    }).error(function (xhr, type, errorThrown) {
                        mui.toast('系统错误', { duration: 'long', type: 'div' });
                    })
                },
                ModifyPassword() {
                    var that = this;
                    if (!this.password || !this.Code) {
                        mui.toast('请填写完整信息', { duration: 'long', type: 'div' });
                        return;
                    }
                    var t = mui.showLoading("修改中..", "div");
                    $.post("/MobileProblem/PasswordModifySubmit", { "Code": that.Code, "password": that.password }, function (data) {
                        mui.hideLoading(t);
                        if (data.code == "200") {
                            mui.toast('修改成功，正在跳转...', { duration: 'long', type: 'div' });
                            mui.later(function () {
                                window.location = "/MobileProblem/My";
                            }, 1000)

                        } else {
                            mui.toast(data.msg, { duration: 'long', type: 'div' });
                        }
                    }).error(function (xhr, type, errorThrown) {
                        mui.hideLoading(t);
                        mui.toast('系统错误', { duration: 'long', type: 'div' });
                    })
                }
            }
        })
    </script>