<template>
  <div>
    <!--标题-->
    <div class="top-bar">
      <div @click="_back">
        <img src="../../../../static/image/back.png">
      </div>
      <div>{{title}}</div>
      <div @click="_save">完成</div>
    </div>
    <!--提示信息-->
    <div class="result-cont" style="margin-top: 60px">
      <div class="phone_edit">
        <group>
          <x-input title="用户名" v-model="username" placeholder="请输入用户名称"></x-input>
        </group>
      </div>
    </div>
  </div>
</template>

<script>
  import {XInput, Group} from 'vux'
  import Global from '../../../api/config'

  export default {
    components: {
      XInput,
      Group,
    },
    data() {
      return {
        title: '修改用户名',
        id: this.$route.query.id,
        username: this.$route.query.data.username,
      }
    },
    methods: {
      _ok() {
        let that = this;
        this.$vux.confirm.show({
          title: '提示',
          content: '用户名已被修改成 ' + this.username + ' ，请重新登录！',
          theme: 'ios',
          showCancelButton: false,
          onConfirm() {
            that._exit(); //退出重新登录
          }
        });
      },
      //保存信息
      _save() {
        if (this.username) {
          let data = {
            username: this.username
          };
          this.$store.dispatch('SystemManage/userEdit', {id: this.id, obj: data}).then(() => {
            if (this.$store.state.SystemManage.success) {
              this._ok();
            }
          });
        } else {
          this._msg('用户名不能为空！');
        }
      },
      //提示
      _msg(msg) {
        this.$vux.toast.show({
          type: 'text',
          width: '10em',
          text: msg,
          time: 1000
        });
      },
      //退出
      _exit() {
        Global.logout();
        localStorage.setItem('username', this.username); //设置用户名
        this.$navigation.cleanRoutes(); //清空路由了，但是浏览器中的路由仍在
        this.$router.replace('/login');

      },
      _back() {
        this.$router.go(-1);
      },
    }
  }
</script>
