<template>
  <view class="person-dashboard">
    <view class="hero">
      <image class="hero-bg" :src="config.baseUrl_api + '/fs/static/img/red_bg.png'" mode="aspectFill"></image>

      <view class="hero-nav">
        <view>
          <view class="brand-cn">中国跆拳道协会</view>
          <view class="brand-en">CHINESE TAEKWONDO ASSOCIATION</view>
        </view>
        <view class="page-title">
          <text>人员管理</text>
          <view class="title-line"></view>
        </view>
      </view>

      <view class="member-card">
        <view class="member-content">
          <view class="member-left">
            <view class="hello">您好!</view>
            <view class="member-name">{{ memberName }}</view>
            <view class="member-desc">您已经是中国跆拳道协会的金牌会员了</view>
            <view class="name-line"></view>
          </view>
          <view class="level-box" @click="goPath('/myCenter/reviewList')">
            <image class="star" :src="config.baseUrl_api + '/fs/static/img/star.png'" mode="aspectFit"></image>
            <view class="level-title">晋级考点</view>
            <view class="detail-btn">查看详情</view>
          </view>
        </view>
      </view>
    </view>

    <view class="main-actions">
      <image class="actions-bg" :src="config.baseUrl_api + '/fs/static/img/red_bg2.png'" mode="aspectFill"></image>
      <view class="member-bottom">
        <view class="info-item">
          <view class="info-label">单位会员编号</view>
          <view class="info-value">{{ memberInfo.memCode }}</view>
        </view>
        <view class="info-item">
          <view class="info-label">有效期</view>
          <view class="info-value">{{ validityDate }}</view>
        </view>
      </view>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn01.png'" mode="widthFix" @click="goPath('/myCenter/examPointApplyList')"></image>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn02.png'" mode="widthFix" @click="goAuthPayV2"></image>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn03.png'" mode="widthFix" @click="goPath('/personalVip/addVip')"></image>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn04.png'" mode="widthFix" @click="goPath('/personalVip/payment')"></image>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn05.png'" mode="widthFix" @click="goPath('/personalVip/list')"></image>
      <image class="action-card" :src="config.baseUrl_api + '/fs/static/img/btn06.png'" mode="widthFix" @click="goPath('/personalVip/mobilize')"></image>
    </view>

    <dao-guan-tab-bar :currentIndex="0" @switch="onTabSwitch" />

    <uni-popup ref="authPayPopup" :mask-click="false" type="center">
      <view class="dialog-wrapper">
        <view class="dialog-title">提示</view>
        <view class="dialog-message">{{ authPayPopupMsg }}</view>
        <view class="dialog-footer">
          <button class="dialog-btn confirm" @click="closeAuthPayDialog">确定</button>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="examPointPopup" :mask-click="false" >
      <view class="dialog-wrapper">
        <view class="dialog-title">申请成为考点</view>
        <view class="dialog-message">
          <text>恭喜您成为中国跆拳道协会单位会员！</text>
          <text>根据协会考点管理办法，需成为考点单位才能进行考级业务的办理。</text>
          <text>是否现在申请成为考点。</text>
        </view>
        <view class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeExamPointDialog">取消</button>
          <button class="dialog-btn confirm" @click="goExamPointApply">去申请</button>
        </view>
        <view class="no-display" @click="handleNoDisplay">不再显示</view>
      </view>
    </uni-popup>

    <uni-popup ref="passwordTipPopup" :mask-click="false" type="center">
      <view class="dialog-wrapper">
        <view class="dialog-title">温馨提示</view>
        <view class="dialog-message">密码长期未更新，请及时更新</view>
        <view class="dialog-footer">
          <button class="dialog-btn confirm" @click="closePasswordTipDialog">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

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

const app = getApp()
const userType = ref('1')
const memberInfo = ref({})
const deptInfo = ref({})
const numData = ref({})
const isBlack = ref(0)
const authPayDisabled = ref(true)
const authPayPopup = ref(null)
const authPayPopupMsg = ref('')
const passwordTipPopup = ref(null)
const examPointPopup = ref(null)
const showDirectlyForAuthPay = ref(false)
const directUnderFlagForAuthPay = ref(0)
const associateIdForAuthPay = ref(0)

const memberName = computed(() => {
  return memberInfo.value.name || deptInfo.value.deptName || app.globalData?.dept?.deptName || '--'
})

const memberCode = computed(() => {
  return memberInfo.value.menCode || memberInfo.value.memberCode || memberInfo.value.memberNo || '--'
})

const validityDate = computed(() => {
  const value = memberInfo.value.validityDate || memberInfo.value.validityEndDate || memberInfo.value.expireTime
  return value ? String(value).slice(0, 10) : '--'
})

onLoad((option) => {
  const userName = uni.getStorageSync('userName')
  if (!userName) {
    app.globalData.isLogin = false
    uni.reLaunch({ url: '/login/login' })
    return
  }

  if (option.scene) {
    decodeURIComponent(option.scene)
  }

  if (uni.showShareMenu) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  }
})

onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    }
  }
})

function init() {
  api.getMyOwnMemberInfo().then(res => {
    const data = res && res.data ? res.data : {}
    app.globalData.authenticationStatus = data.authenticationStatus
    app.globalData.memberInfo = data.memberInfo || {}
    app.globalData.dept = data.dept || app.globalData.dept || {}
    app.globalData.isExam = data.memberInfo?.isPoints

    userType.value = app.globalData.userType
    memberInfo.value = data.memberInfo || app.globalData.memberInfo || {}
    deptInfo.value = data.dept || app.globalData.dept || {}

    updateAuthPayDisabled(data)
    updateAuthPayRule(data)
    handleAccountStatus()
    checkDialogs()
  })

  api.getRemindCount().then(res => {
    numData.value = res.data || {}
  })

  api.getBlack().then(res => {
    isBlack.value = res.data
  })
}

function handleAccountStatus() {
  console.log('handleAccountStatus22',userType.value , app.globalData.authenticationStatus)
  if (userType.value != '1' && app.globalData.authenticationStatus != '2' && app.globalData.authenticationStatus != '4') {
    uni.navigateTo({ url: '/pages/index/perfect' })
    return
  }

  if (app.globalData.authenticationStatus == '5') {
    const content = app.globalData.genFlag == 1 ? '您的会员已过期' : '会员已过期，请及时续费'
    uni.showModal({
      title: '提示',
      content,
      success: (res) => {
        if (res.confirm && app.globalData.genFlag != 1) {
          uni.navigateTo({ url: '/myCenter/auth' })
        }
      }
    })
    return
  }

  if (app.globalData.authenticationStatus == '4') {
    uni.showModal({
      title: '提示',
      content: '你的会员即将过期,将会影响你的业务，请及时续费'
    })
  }

  if (app.globalData.memberInfo?.activeStatus == 0) {
    uni.showModal({
      content: '账号未激活，请前去激活',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/myCenter/auth' })
        }
      }
    })
  }
}

function goPath(path) {
  if (isBlack.value == '1') {
    uni.showModal({
      title: '提示',
      content: '您的账号已被拉黑，请联系中跆协！'
    })
    return
  }

  if (app.globalData.authenticationStatus == '5') {
    if (app.globalData.genFlag == 1) {
      uni.showModal({
        title: '提示',
        content: '您的会员已过期'
      })
    } else {
      uni.showModal({
        title: '提示',
        content: '会员已过期，请及时续费',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({ url: '/myCenter/auth' })
          }
        }
      })
    }
    return
  }

  if (app.globalData.memberInfo?.activeStatus == 0) {
    uni.showModal({
      title: '提示',
      content: '账号未激活，请前去激活',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/myCenter/auth' })
        }
      }
    })
    return
  }

  uni.navigateTo({ url: path })
}

function updateAuthPayDisabled(data = {}) {
  const authStatus = data.authenticationStatus
  const resultNoProvince = data.resultNoProvince2
  if (authStatus == 0) {
    authPayDisabled.value = false
  } else if (authStatus == 1) {
    authPayDisabled.value = true
  } else {
    const canPay = resultNoProvince === true || resultNoProvince == 1
    authPayDisabled.value = !canPay
  }
}

function updateAuthPayRule(data = {}) {
  const memberInfoData = data.memberInfo || {}
  const associateId = Number(memberInfoData.associateId || 0)
  showDirectlyForAuthPay.value = !associateId
  directUnderFlagForAuthPay.value = Number(memberInfoData.directUnderFlag || 0)
  associateIdForAuthPay.value = associateId
}

function canAuthPayByAccountStatus() {
  return showDirectlyForAuthPay.value &&
    directUnderFlagForAuthPay.value === 0 &&
    associateIdForAuthPay.value === 0
}

function showAuthPayDialog(message) {
  authPayPopupMsg.value = message
  authPayPopup.value?.open()
}

function closeAuthPayDialog() {
  authPayPopup.value?.close()
}

function closePasswordTipDialog() {
  passwordTipPopup.value?.close()
}

function goAuthPayV2() {
  if (!canAuthPayByAccountStatus()) {
    showAuthPayDialog('当前账号状态暂无法办理缴费业务')
    return
  }
  if (authPayDisabled.value) {
    showAuthPayDialog('您有一笔缴费正在审核中，请勿重复缴费。您可前往【认证详情】查看审核进度。')
    return
  }
  goPath('/myCenter/perfect')
}

function closeExamPointDialog() {
  examPointPopup.value?.close()
}

function goExamPointApply() {
  closeExamPointDialog()
  uni.navigateTo({ url: '/myCenter/examPointApplyList' })
}

async function handleNoDisplay() {
  await api.noDisplay()
  await getInfo()
  closeExamPointDialog()
}

function checkDialogs() {
  const user = app.globalData.userInfo || {}
  const memberInfoData = app.globalData.memberInfo || {}

  if (app.globalData.changePassFlag == '1' &&
    app.globalData.memberInfo?.activeStatus == '1' &&
    app.globalData.authenticationStatus == 2) {
    const hasShown = uni.getStorageSync('passwordTipShown')
    if (!hasShown) {
      uni.setStorageSync('passwordTipShown', true)
      passwordTipPopup.value?.open()
    }
  }
console.log('checkDialogs',app.globalData.memberInfo?.activeStatus,app.globalData.authenticationStatus,app.globalData.deptType,memberInfoData.isPoints)
  if (app.globalData.memberInfo?.activeStatus == 1 &&
    app.globalData.authenticationStatus == 2 &&
    app.globalData.deptType == 6 &&
    memberInfoData.isPoints == 1 ) {
    examPointPopup.value?.open()
  }
}

const onTabSwitch = () => {
  // tab switch handled by component
}
</script>

<style lang="scss" scoped>
.person-dashboard {
  min-height: 100vh;
  background: #ededf0;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 610rpx;
  padding: calc(env(safe-area-inset-top) + 62rpx) 28rpx 0;
  overflow: hidden;
  padding-top: 150rpx;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 18rpx;
  color: #fff;
}

.brand-cn {
  font-size: 38rpx;
  letter-spacing: 2rpx;
}

.brand-en {
  margin-top: 8rpx;
  font-size: 16rpx;
  opacity: 0.55;
}

.page-title {
  color: #f4b536;
  font-size: 34rpx;
  font-weight: 500;
  text-align: right;
}

.title-line {
  width: 54rpx;
  height: 6rpx;
  margin: 12rpx 0 0 auto;
  background: #f4b536;
  border-radius: 10rpx;
}

.member-card {
  position: relative;
  z-index: 1;
  height: 460rpx;
  margin-top: 47rpx;
  border-radius: 22rpx;
  overflow: hidden;
  background: #E2CECF;
}

.member-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 48rpx 46rpx 0;
}

.hello {
  color: #ff6d40;
  font-size: 52rpx;
  line-height: 1;
}

.member-name {
  margin-top: 28rpx;
  color: #181818;
  font-size: 34rpx;
  font-weight: 700;
}

.member-desc {
  margin-top: 10rpx;
  color: #8f817f;
  font-size: 22rpx;
}

.name-line {
  width: 112rpx;
  height: 6rpx;
  margin-top: 14rpx;
  background: #111;
  border-radius: 8rpx;
}

.level-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8rpx;
}

.star {
  width: 100rpx;
  height: 82rpx;
}

.level-title {
  margin-top: 12rpx;
  color: #d99b1d;
  font-size: 28rpx;
  font-weight: 700;
}

.detail-btn {
  margin-top: 8rpx;
  padding: 4rpx 14rpx;
  border-radius: 4rpx;
  background: rgba(255, 255, 255, 0.8);
  color: #5a5552;
  font-size: 20rpx;
  font-weight: 600;
}

.member-bottom {
  position: relative;
  z-index: 12;
  display: flex;
  gap: 76rpx;
  grid-column: 1 / -1;
  padding: 98rpx 46rpx 34rpx;
  padding-bottom: 50px;
}

.info-label {
  color: #e55f73;
  font-size: 24rpx;
  font-weight: 600;
}

.info-value {
  margin-top: 6rpx;
  color: #343434;
  font-size: 25rpx;
}

.main-actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8rpx 10rpx;
  margin-top: -255rpx;
  padding: 0 28rpx 0;
  overflow: hidden;
}

.actions-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 596rpx;
  z-index: 9;
}

.action-card {
  position: relative;
  z-index: 10;
  width: 100%;
  border-radius: 8rpx;
}

.dialog-wrapper {
  width: 610rpx;
  padding: 42rpx 34rpx 32rpx;
  border-radius: 22rpx;
  background: #fff;
  box-sizing: border-box;
}

.dialog-title {
  text-align: center;
  color: #222;
  font-size: 34rpx;
  font-weight: 700;
}

.dialog-message {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-top: 26rpx;
  color: #555;
  font-size: 28rpx;
  line-height: 1.6;
  text-align: center;
}

.dialog-footer {
  display: flex;
  gap: 24rpx;
  margin-top: 36rpx;
}

.dialog-btn {
  flex: 1;
  height: 76rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  line-height: 76rpx;
}

.dialog-btn.cancel {
  color: #666;
  background: #f2f2f2;
}

.dialog-btn.confirm {
  color: #fff;
  background: #ad181f;
}

.no-display {
  margin-top: 24rpx;
  color: #999;
  font-size: 24rpx;
  text-align: center;
}
</style>