<template>
  <view class="page dao-my-page">
    <image class="page-red-bg" :src="config.baseUrl_api + '/fs/static/img/red_bg.png'" mode="scaleToFill"></image>
    <view class="profile-hero">
      <view class="hero-content">
        <view class="profile-row">
          <view class="avatar-wrap">
            <image v-if="state.user.avatar" :src="state.user.avatar" mode="aspectFill"/>
            <image v-else :src="config.baseUrl_api + '/fs/static/nodata.png'" mode="aspectFill"/>
          </view>
          <!-- <view class="profile-main">
            <view class="name-row">
              <view class="dept-name">{{ state.user?.dept?.deptName || deptInfo.deptName || memberInfo.name || '--' }}</view>
              <view class="member-badge">
                <text class="badge-star">◆</text>
                <text>金牌会员</text>
              </view>
            </view>
            <view class="id-row">
              <text>ID：{{ memberInfo.menCode || memberInfo.memberCode || memberInfo.memberNo || state.user?.userName || '--' }}</text>
              <text class="join-days">您已加入{{ joinDays }}天</text>
            </view>
          </view> -->
        </view>
        <view class="motto">每一次的成功都不是偶然，是千锤百炼，永不放弃的结果。{{ state.user?.dept?.deptName || '龙威天成跆拳道馆' }}，以专业铸就辉煌！</view>
        <view class="edit-btn" @click="goPath('/myCenter/teamInfo')">修改资料</view>
      </view>
    </view>

    <view class="menu-panel">
      <image class="menu-bg" :src="config.baseUrl_api + '/fs/static/img/red_bg2.png'" mode="scaleToFill"></image>
      <view class="menu-item" @click="goPath('/myCenter/teamInfo')">
        <view class="menu-left">
          <image class="menu-icon" :src="config.baseUrl_api + '/fs/static/img/user01.png'" mode="aspectFit"></image>
          <text>单位信息</text>
        </view>
        <text class="arrow">></text>
      </view>

      <view class="menu-item" @click="goPath('/myCenter/auth')">
        <view class="menu-left">
          <image class="menu-icon" :src="config.baseUrl_api + '/fs/static/img/user02.png'" mode="aspectFit"></image>
          <text>会员认证</text>
        </view>
        <text class="arrow">></text>
      </view>

      <view class="menu-item" @click="goPath('/myCenter/examPointApplyList')">
        <view class="menu-left">
          <image class="menu-icon" :src="config.baseUrl_api + '/fs/static/img/user02.png'" mode="aspectFit"></image>
          <text>考点认证</text>
        </view>
        <text class="arrow">></text>
      </view>

      <view class="menu-item" @click="goPath('/myCenter/safe')">
        <view class="menu-left">
          <image class="menu-icon" :src="config.baseUrl_api + '/fs/static/img/user03.png'" mode="aspectFit"></image>
          <text>账号安全</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>
    
    <view class="logout-area">
      <button class="logout-btn" @click="loginOut">退出登录</button>
    </view>

    <!-- 底部导航 -->
    <dao-guan-tab-bar :currentIndex="4" @switch="onTabSwitch" />
  </view>
</template>

<script setup>
import * as api from '@/common/api.js';
import * as loginServer from '@/common/login.js';
import config from '@/config.js'
import {
  onLoad,
  onShow,
  onReady,
  onPullDownRefresh
} from '@dcloudio/uni-app';
import {
  ref, reactive, computed,
  getCurrentInstance
} from 'vue';
import DaoGuanTabBar from '@/components/dao-guan-tab-bar.vue'


const {
  proxy
} = getCurrentInstance()
const app = getApp();
const userType = ref('1')
const memberInfo = ref({})
const deptInfo = ref({})
let proId;
const svId = ref(null);
const numData = ref({});

const messageList = ref([])
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})

const joinDays = computed(() => {
  const value = memberInfo.value.createTime || memberInfo.value.joinTime || memberInfo.value.createDate
  if (!value) return '--'
  const start = new Date(String(value).replace(/-/g, '/')).getTime()
  if (!start) return '--'
  const days = Math.floor((Date.now() - start) / (24 * 60 * 60 * 1000)) + 1
  return days > 0 ? days : 1
})
onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    };
  }
})
onLoad(option => {
  if (option.scene) {
    proId = decodeURIComponent(option.scene);
  } else {
    proId = option.proId;
  }
  if (uni.showShareMenu) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  }
});

function loginOut() {
  uni.showModal({
    content: `确认退出吗？`,
    success: function (res) {
      if (res.confirm) {
        loginServer.logout().finally(() => {
          let path = '/login/login';
          uni.reLaunch({
            url: path
          });
        })
      }
    }
  })
}

function getUser() {
  api.getUserProfile().then((response) => {
    state.user = response.data.user
    if (state.user.avatar && state.user.avatar.indexOf('http') == -1) {
      state.user.avatar = config.baseUrl_api + state.user.avatar
    }
    state.roleGroup = response.data.roleGroup
    state.postGroup = response.data.postGroup
    uni.hideLoading();
  })
}

function init() {
  uni.showLoading({
    title: '加载中'
  });
  getUser()
  loginServer.getMyOwnMemberInfo().then(res => {
    userType.value = app.globalData.userType
    memberInfo.value = app.globalData.memberInfo
    deptInfo.value = app.globalData.dept || {}
    uni.hideLoading();
  })
}

function goPath(url) {
  uni.navigateTo({
    url: url
  })
}

function onTabSwitch(index, url) {
  // tab switch handled by component
}

</script>
<style lang="scss" scoped>
.dao-my-page {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: calc(210rpx + env(safe-area-inset-bottom));
  background: #ededf0;
}

.page-red-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 720rpx;
}

.profile-hero {
  position: relative;
  z-index: 4;
  min-height: 460rpx;
}

.hero-content {
  position: relative;
  z-index: 5;
  padding: calc(env(safe-area-inset-top) + 126rpx) 48rpx 0;
  color: #fff;
}

.profile-row {
  display: flex;
  align-items: center;
}

.avatar-wrap {
  width: 132rpx;
  height: 132rpx;
  padding: 6rpx;
  flex: 0 0 132rpx;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8rpx 26rpx rgba(65, 0, 0, 0.28);

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.profile-main {
  flex: 1;
  min-width: 0;
  margin-left: 26rpx;
}

.name-row,
.id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dept-name {
  max-width: 330rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 34rpx;
  font-weight: 700;
}

.member-badge {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #dba12d;
  font-size: 24rpx;
  white-space: nowrap;
}

.badge-star {
  color: #f7c342;
  font-size: 24rpx;
}

.id-row {
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.86);
  font-size: 26rpx;
}

.join-days {
  margin-left: 18rpx;
  white-space: nowrap;
}

.motto {
  margin-top: 52rpx;
  color: rgba(255, 255, 255, 0.86);
  font-size: 24rpx;
  line-height: 1.75;
}

.edit-btn {
  position: relative;
  z-index: 6;
  width: 168rpx;
  height: 48rpx;
  margin: 34rpx 0 0 auto;
  border-radius: 6rpx;
  background: #fff;
  color: #333;
  font-size: 24rpx;
  line-height: 48rpx;
  text-align: center;
}

.menu-panel {
  position: relative;
  z-index: 2;
  min-height: 560rpx;
  margin-top: -72rpx;
  padding: 178rpx 48rpx 0;
  overflow: hidden;
}

.menu-bg {
  position: absolute;
  left: 0;
  top: -400rpx;
  z-index: 0;
  width: 100%;
  height: 1400rpx;
}

.menu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 132rpx;
  color: #111;
  font-size: 31rpx;
  font-weight: 700;
}

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

.menu-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 18rpx;
}

.arrow {
  color: #111;
  font-size: 42rpx;
  font-weight: 400;
  line-height: 1;
}

.logout-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(124rpx + env(safe-area-inset-bottom));
  z-index: 9998;
  padding: 16rpx 48rpx 18rpx;
  background: transparent;
  box-sizing: border-box;
}

.logout-btn {
  height: 76rpx;
  border-radius: 50rpx;
  background: #ad181f;
  color: #fff;
  font-size: 28rpx;
  line-height: 76rpx;
}

.logout-btn::after {
  border: none;
}
</style>