<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one"> <span>修改密码</span> </el-col>
        <el-col :span="12">
          <data-form :span="24" :fields="fields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave"> </data-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: admins } = createNamespacedHelpers('admins');

export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      fields: [
        { label: '名称', model: 'name', readonly: true },
        { label: '密码', model: 'password', type: 'password' },
      ],
      rules: {},
      form: {},
      roleList: [],
    };
  },
  computed: {
    ...mapState(['user']),
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapMutations(['deleteUser']),
    ...admins([, 'fetch', 'update']),
    //执行查询
    async search() {
      const res = await this.fetch(this.user.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    // 保存
    async toSave({ data }) {
      const res = await this.update(data);
      this.$checkRes(res, '操作成功', '操作失败');
      this.logout();
    },
    // 退出登录
    logout() {
      this.deleteUser();
      // 路由也得删除,但是没有删除路由的API,所以用replace来替换下
      const base = _.get(this.$router, 'options.base', '');
      window.location.replace(`/${base}/login`);
      // this.$router.push('/login');
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    margin: 0 0 10px 0;
  }
}
</style>
