<template>
  <div>
    <nav-bar title="个人中心" :style="{ 'background-color': '#F7F7FA' }" />
    <!-- 头像 -->
    <div
      class="
        px-5
        py-3
        flex
        justify-between
        items-center
        border-b border-gray-200
      "
    >
      <span class="text-sm font-semibold">头像</span>
      <img :src="avatarUrl" class="w-12 h-12 rounded-full object-contain" />
    </div>
    <!-- 手机号码 -->
    <div
      class="
        px-5
        py-5
        flex
        justify-between
        items-center
        border-b border-gray-200
      "
    >
      <span class="text-sm font-semibold">手机号码</span>
      <span class="text-sm">{{ getPhone }}</span>
    </div>
    <!-- 登陆密码 -->
    <div class="px-5 py-2 items-center border-b border-gray-200">
      <div class="flex justify-between items-center">
        <div>
          <div class="text-sm font-semibold">设置密码</div>
          <div class="text-xs text-gray-400 pt-1">保障账户登录安全</div>
        </div>
        <div
          class="flex items-center text-xs h-1 text-right"
          @click="pushRouter"
        >
          <span>设置</span>
          <IconVue
            name="icon-gengduo"
            color="#8E92A3"
            size="12"
            class="inline-block align-text-bottom"
          />
        </div>
      </div>
    </div>
  </div>
  <div
    @click="clickLogout"
    class="logout-btn flex items-center justify-center fixed"
  >
    退出登录
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import IconVue from "@/components/common/Icon.vue";
import { eAccountType } from "@/views/Auth/Login/types";
import {
  deleteUserMsg,
  getCurrentUserAvatarUrl,
  getUserMsg,
} from "@/utils/userMsg";
import filter from "@/filter";
import router from "@/router";
import { userLogout } from "@/service/UserManagementService";
export default defineComponent({
  components: { NavBar, IconVue },
  data() {
    return {
      role: "",
    };
  },
  computed: {
    hasPassword(): eAccountType {
      return eAccountType.REG_NOPD;
    },
    getPhone() {
      const phone = getUserMsg()?.userInfo.phone + "";
      var newphone = phone.replace(phone.substr(3, 5), "*****");
      return newphone;
    },
  },
  setup() {
    const avatarUrl = getCurrentUserAvatarUrl();
    const clickLogout = () => {
      userLogout();
      deleteUserMsg();
      router.push({
        name: "Home",
      });
    };
    return {
      userMsg: getUserMsg(),
      filter,
      clickLogout,
      avatarUrl,
    };
  },
  methods: {
    pushRouter() {
      this.$router.push({
        name: "PwdSetting",
        query: {
          phone: this.userMsg?.userInfo.phone,
        },
      });
    },
  },
});
</script>

<style scoped>
.logout-btn {
  width: 295px;
  height: 40px;
  background: #4e61c9;
  border-radius: 20px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;

  margin-left: 40px;
  bottom: 50px;
}
</style>
