<template>
  <view class="user-page">
    <!-- 顶部背景和用户卡片 -->
    <view class="header-bg">
      <view class="user-header">
        <u-avatar class="avatar" mode="aspectFill" :src="userData ? userData.avatar : null"/>
        <view class="user-info">
          <view class="nickname">{{ userData ? userData.nickname : '请登录' }}</view>
          <view class="auth-row" v-if="userData">
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 3" size="mini"
                    @click="navTo('/pages/user/auth')">
              去认证
            </button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 0" size="mini">认证审核中</button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 1" size="mini">认证通过</button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 2" size="mini"
                    @click="navTo('/pages/user/auth')">
              认证拒绝
            </button>
          </view>
        </view>
        <view class="header-icons">
          <view class="icon-btn">
            <text class="iconfont">&#xe60b;</text>
          </view>
          <view class="icon-btn">
            <text class="iconfont">&#xe60c;</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 积分卡片 -->
    <!--    <view class="score-card">-->
    <!--      <view class="score-left">-->
    <!--        <image class="score-icon" src="https://img.icons8.com/color/48/000000/hexagonal-structure.png"/>-->
    <!--        <text class="score-title">我的积分</text>-->
    <!--      </view>-->
    <!--      <view class="score-value">&#45;&#45;-->
    <!--        <text class="score-unit">分</text>-->
    <!--      </view>-->
    <!--    </view>-->

    <!-- 快捷入口 -->
    <view class="quick-entry">
      <view class="entry-item" @click="navTo('/pages/user/my-properties')">
        <image class="entry-img" src="/static/房产.png"/>
        <text class="entry-title">我的房产</text>
      </view>
      <view class="entry-item">
        <image class="entry-img" src="/static/车位信息.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
        <text class="entry-title">我的车位车辆</text>
      </view>
    </view>

    <!-- 功能区 -->
    <view class="func-area">
      <view class="func-item" @click="navTo('/pages/user/my-properties')">
        <image class="entry-img" src="/static/我的家人.png"/>
        <text class="func-text">添加家人</text>
      </view>
      <view class="func-item">
        <image class="entry-img" src="/static/汽车.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
        <text class="func-text">添加车辆</text>
      </view>
      <view class="func-item">
        <image class="entry-img" src="/static/访客.png" @click="jumpWithAuth('/userPages/pages/cars')"/>
        <text class="func-text">访客记录</text>
      </view>
      <view class="func-item" @click="jumpWithAuth('/pages/user/property-bill')">
        <image class="entry-img" src="/static/20-缴费记录.png"/>
        <text class="func-text">我的账单</text>
      </view>
    </view>

    <!-- 列表区 -->
    <!--    <view class="list-area">-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="/static/工单.png"/>-->
    <!--        <text class="list-title">我的工单</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="/static/发布.png"/>-->
    <!--        <text class="list-title">我的发布</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="/static/收藏.png"/>-->
    <!--        <text class="list-title">我的收藏</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="m-20">
      <u-button type="primary" shape="circle" @click="logout" v-if="isLogin">退出登录</u-button>
    </view>
    <Login ref="Login" @done="getUserData"></Login>
  </view>
</template>

<script>
import Login from "@/components/Login.vue";
import {clearUserInfo, getUserInfo} from "@/util/user";
import {userInfoReq} from "@/api/user";

export default {
  components: {Login},
  data() {
    return {
      isLogin: false,
      userInfo: {
        avatar: '',
        mobile: ''
      },
      roleName: '注册用户',
      defaultAvatar: 'https://oss.wsdns.cn/20250627/340ae6bd9c014e75bb1da95e074a027e.png',
      userData: null
    }
  },
  methods: {
    navTo(url) {
      uni.navigateTo({url})
    },
    async getUserData() {
      const res = await userInfoReq()
      if (res) {
        this.userData = res.data
        this.isLogin = true
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.isLogin = false
            this.userData = null
            clearUserInfo()
            this.$refs.Login.open()
          }
        }
      })
    },
    jumpWithAuth(url) {
      if (!this.userData || this.userData.wechatUser.isAuth !== 1) {
        this.$toast('请先完成认证')
        this.$jump('/pages/user/auth')
      } else {
        this.$jump(url)
      }
    }
  },
  onShow() {
    if (!getUserInfo().token) this.$refs.Login.open()
    else {
      this.getUserData()
    }
  },
}
</script>

<style scoped lang="scss">
page {
  background: linear-gradient(to bottom, #e9fff2, #f9fafb);
  min-height: 100vh;
}

.header-bg {
  background: linear-gradient(120deg, #b6e5a6 0%, #e9fff2 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  padding-bottom: 40rpx;
  position: relative;
}

.user-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 180rpx 40rpx 20rpx;
  position: relative;
}

.avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid #e6e6e6;
  margin-right: 24rpx;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nickname {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.auth-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.auth-status {
  font-size: 22rpx;
  color: #4facfe;
  background: #fff;
  border-radius: 10rpx;
  padding: 2rpx 18rpx;
  margin-right: 12rpx;
  border: 1rpx solid #4facfe;
}

.auth-btn {
  font-size: 22rpx;
  color: #fff;
  background: #19b6ff;
  border-radius: 10rpx;
  padding: 2rpx 18rpx;
  border: none;
  line-height: 1.8;
  margin: 0 15rpx;
}

.header-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 30rpx;
  top: 50rpx;
}

.icon-btn {
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

.iconfont {
  font-size: 32rpx;
  color: #7ecb6f;
}

.score-card {
  margin: -40rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx;
  height: 100rpx;
  position: relative;
  z-index: 2;
}

.score-left {
  display: flex;
  align-items: center;
}

.score-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 12rpx;
}

.score-title {
  font-size: 30rpx;
  color: #222;
  font-weight: bold;
}

.score-value {
  font-size: 36rpx;
  color: #ff6f00;
  font-weight: bold;
}

.score-unit {
  font-size: 22rpx;
  color: #999;
  margin-left: 2rpx;
}

.quick-entry {
  display: flex;
  justify-content: space-between;
  margin: 32rpx 24rpx 0 24rpx;
}

.entry-item {
  flex: 1;
  background: #f8fafc;
  border-radius: 20rpx;
  margin-right: 18rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 0 24rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

  &:last-child {
    margin-right: 0;
  }
}

.entry-img {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 12rpx;
}

.entry-title {
  font-size: 26rpx;
  color: #6a7a8c;
  font-weight: 500;
}

.func-area {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 0;
}

.func-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.func-icon {
  font-size: 44rpx;
  margin-bottom: 10rpx;
}

.func-text {
  font-size: 24rpx;
  color: #333;
}

.list-area {
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0 32rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
  color: #333;
  position: relative;

  &:last-child {
    border-bottom: none;
  }
}

.list-icon {
  font-size: 32rpx;
  margin-right: 24rpx;
}

.list-title {
  flex: 1;
}

.arrow {
  font-size: 36rpx;
  color: #c0c0c0;
  margin-right: 32rpx;
}

</style> 