<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <user-card :dataForm="dataForm" @onUploadHeader="onUploadHeader" />
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本信息" name="account">
              <account :dataForm="dataForm" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="pasword">
              <PasswordConfirm />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserCard from "./components/UserCard";
import PasswordConfirm from "./components/PasswordConfirm";
import Account from "./components/Account";
import { getCurrentUserInfo } from "@/api/api";
import { updateProfile } from "@/api/admin";
export default {
  name: "Profile",
  components: { UserCard, PasswordConfirm, Account },
  data() {
    return {
      loading: false,
      user: {},
      activeTab: "account",
      dataForm: {
        header: this.avatar,
        code: "",
      },
    };
  },
  created() {
    this.initUser();
  },
  methods: {
    initUser() {
      let _this = this;
      this.loading = true;
      getCurrentUserInfo({})
        .then((res) => {
          if (res.status != 200) return;
          _this.dataForm = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    onUploadHeader(e) {
      this.dataForm.header = e;
      this.loading = true;
      updateProfile(this.dataForm)
        .then((res) => {
          if (res.status != 200) {
            this.$message(res.message);
            return;
          }
          this.$message("用户头像更新成功");
          location.reload();
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
