<template>
  <view class="content">
    <view>
      <u-cell-group>
        <u-cell title="姓名/账号" :value="userInfo.userName"></u-cell>
        <u-cell title="手机号" :value="userInfo.phone"></u-cell>
        <u-cell title="身份证" :value="userInfo.idNo"></u-cell>
      </u-cell-group>

      <u-button
        @click="logout"
        type="primary"
        :hairline="false"
        :loading="loading"
        :disabled="loading"
        style="margin-top: 50rpx"
        >退出登录</u-button
      >
      <u-modal
        :show="loading"
        @cancel="cancel"
        :showCancelButton="true"
        :asyncClose="true"
        @confirm="confirm"
      >
        <view class="slot-content">
          <text>退出账号</text>
        </view>
      </u-modal>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
import { getUser, removeToken, removeUser } from "@/utils/auth.js";
export default {
  data() {
    return {
      loading: false,
      userInfo: {},
    };
  },
  mounted() {
    this.userInfo = getUser() || {};
  },
  methods: {
    logout() {
      this.loading = true;
    },
    cancel() {
      this.loading = false;
    },
    confirm() {
      this.$api.login
        .logout()
        .then((res) => {
          removeToken();
          removeUser();
          uni.reLaunch({
            url: "/pages/login/login",
          });
          this.$store.state.current = "index";
          this.loading = false;
        })
        .catch((errors) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.u-cell__body {
  padding: 10px 15px !important;
}
.content {
  height: calc(100vh - 65px);
  /deep/ .u-tabbar-item {
    padding-bottom: 19px;
  }
}
</style>
