<template>
  <view class="page-bg">
    <!-- <view class="nav-bar" style="margin-top:-30px">
      <view class="back-btn" @click="goBack">
        <uni-icons color="#fff" size="20" type="left"></uni-icons>
      </view>
    </view> -->
    <image :src="config.baseUrl_api+'/fs/static/dg/home_bg.png'" class="ren1"/>
    <!-- 登录 -->
    <view class="retop">
      <image :src="config.baseUrl_api+'/fs/static/login/logo@2x.png'" class="logotop"></image>
      <view class="loginbox">
        <view class="loginNav">
          <!-- 激活背景：全屏宽 -->
          <image
            v-if="isActive === 0"
            :src="config.baseUrl_api+'/fs/static/lg/tab01.png'"
            class="tab-active"
          />
          <image
            v-if="isActive === 1"
            :src="config.baseUrl_api+'/fs/static/lg/tab02.png'"
            class="tab-active"
          />
          
          <!-- 未激活：小图、顶部10rpx、边距10rpx -->
          <image
            v-if="isActive === 1"
            :src="config.baseUrl_api+'/fs/static/lg/tab01_dwn.png'"
            class="tab-inactive-left"
          />
          <image
            v-if="isActive === 0"
            :src="config.baseUrl_api+'/fs/static/lg/tab02_dwn.png'"
            class="tab-inactive-right"
          />
          
          <!-- 文字层：居中、不平均分配 -->
          <view class="tab-text-wrap">
            <view :class="{active:isActive===0}" class="text-item text-left" @click="changeActive(0)">
              密码登录
            </view>
            <view :class="{active:isActive===1}" class="text-item text-right" @click="changeActive(1)">
              短信登录
            </view>
          </view>
        </view>
        
        <!-- 密码登录 -->
        <view class="formbox">
          <form v-if="isActive==0">
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag01.png'" class="icon"></image>
              <uni-easyinput v-model="form.username" :styles="inputstyle" placeholder="账号"/>
            </view>
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag02.png'" class="icon"></image>
              <uni-easyinput v-model="form.password" :styles="inputstyle"
                             placeholder="初次登录请联系省级协会获取初始密码"
                             type="password"/>
            </view>
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag03.png'" class="icon"></image>
              <uni-easyinput v-model="form.code" :styles="inputstyle" placeholder="请填入计算结果"/>
              <image :src="codeUrl" class="code-img" @click="getCode"/>
            </view>
          </form>
          <!-- 短信登录 -->
          <form v-if="isActive==1">
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag01.png'" class="icon"></image>
              <uni-easyinput v-model="form2.telNo" :styles="inputstyle" placeholder="请输入手机号"/>
            </view>
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag03.png'" class="icon"></image>
              <uni-easyinput v-model="form2.captcha" :styles="inputstyle" placeholder="图形验证码"/>
              <image :src="codeUrl" class="code-img" @click="getCode"/>
            </view>
            <view class="round-input-item">
              <image :src="config.baseUrl_api+'/fs/static/lg/tag02.png'" class="icon"></image>
              <uni-easyinput v-model="form2.code" :styles="inputstyle" placeholder="短信验证码"/>
              <text v-if="!countDown.start" @click="getCaptchaSms">获取验证码</text>
              <uni-countdown v-if="countDown.start" :second="countDown.second" :show-day="false" :show-hour="false"
                             :start="countDown.start" color="#014A9F"
                             @timeup="timeup"></uni-countdown>
            </view>
          </form>
          
          <view class="flex-item"></view>
          <view class="btn-group">
            <button class="btn btn-register" @click="goRegister">注册</button>
            <button class="btn btn-login" @click="login">登录</button>
          </view>
          <view class="text-center mt20 f26">仅供中国跆拳道协会会员单位登录使用</view>
        
        </view>
        <!-- <view class="wNumber">
          技术服务热线：
          <text @click="call('15606190026')">15606190026</text>
          /
          <text @click="call('15305299762')">15305299762</text>
        </view> -->
      </view>
    </view>
    <view class="fixedagree">
      <!-- <text>仅供中国跆拳道协会会员单位登录使用</text> -->
      <view class="wNumber">
        技术服务热线：
        <text @click="call('15606190026')">15606190026</text>
        /
        <text @click="call('15305299762')">15305299762</text>
      </view>
    </view>
    
    <!-- 注册提示弹框 -->
    <uni-popup ref="registerPopup" :mask-click="false" type="center">
      <view class="register-popup">
        <view class="popup-title">系统提示</view>
        <view class="popup-content">
          <view class="popup-text">尊敬的用户，您好！</view>
          <view class="popup-text">在开始注册团体会员前，请您提前准备好以下材料，以便顺利完成申请：</view>
          <view class="popup-item">
            <text class="popup-num ml10">1.</text>
            单位营业执照
          </view>
          <view class="popup-desc">请提供清晰的营业执照原件照片或扫描件（加盖公章更佳）</view>
          <view class="popup-item">
            <text class="popup-tip">!</text>
            <text class="popup-num"> 2.</text>
            法人身份证正反面照片
          </view>
          <view class="popup-desc">请分别上传身份证正面及反面清晰照片</view>
          <view class="popup-desc">确保信息完整、无遮挡、无模糊</view>
          <view class="popup-item">
            <text class="popup-num ml10">3.</text>
            机构照片
          </view>
          <view class="popup-desc">请提供体现单位实际经营或办公环境的照片1-2张</view>
          <view class="popup-desc">如门头、办公场所、活动场地等（能展示机构真实存在即可）</view>
        </view>
        <view class="popup-btns">
          <view class="popup-btn cancel" @click="closeRegisterPopup">取消</view>
          <view class="popup-btn confirm" @click="confirmRegister">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import {onLoad, onReady} from '@dcloudio/uni-app';
import {ref, nextTick} from 'vue'
import config from '@/config.js'
import {getCodeImg, getSmsCodeImg, pcLogin, loginByPhone} from '@/common/login.js'

const isActive = ref(0)
const agree = ref(false)
const isRember = ref(true)
const loading = ref(false)
const codeUrl = ref(null)
const registerPopup = ref(null)
const inputstyle = ref({
  borderColor: 'transparent',
  fontSize: '30rpx'
})
const form = ref({
  username: null,
  password: null,
  code: null,
  uuid: null
})
const form2 = ref({
  telNo: null,
  captcha: null,
  code: null,
  uuid: null
})
const countDown = ref({
  start: false,
  second: 60
})

const app = getApp()

onLoad(() => {
  getCode()
  if (uni.showShareMenu) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  }
})

onReady(() => {
  console.log('registerPopup ready:', registerPopup.value)
})

function goBack() {
  uni.navigateBack()
}

function changeActive(n) {
  isActive.value = n
}

function login() {
  if (isActive.value == 0) {
    if (!form.value.username) {
      uni.showToast({title: '账号不能为空', icon: 'none'})
      return
    }
    if (!form.value.password) {
      uni.showToast({title: '密码不能为空', icon: 'none'})
      return
    }
    if (!form.value.code) {
      uni.showToast({title: '验证码不能为空', icon: 'none'})
      return
    }
    if (loading.value) return;
    loading.value = true
    pcLogin(form.value).then((res) => {
      app.globalData.isLogin = true
      uni.redirectTo({url: '/pages/index/home'})
    }).finally(() => {
      loading.value = false
    })
  } else if (isActive.value == 1) {
    if (!form2.value.telNo) {
      uni.showToast({title: '手机号不能为空', icon: 'none'})
      return
    }
    var pattern = /^1[3456789]\d{9}$/;
    if (!pattern.test(form2.value.telNo)) {
      uni.showToast({title: '请输入正确的手机号', duration: 2000, icon: 'none'})
      return
    }
    if (!form2.value.code) {
      uni.showToast({title: '短信验证码不能为空', icon: 'none'})
      return
    }
    if (loading.value) return;
    loading.value = true
    loginByPhone(form2.value.telNo, form2.value.code)
      .then(() => {
        loading.value = false
        app.globalData.isLogin = true
        uni.redirectTo({url: '/pages/index/home'})
      }).finally(() => {
      loading.value = false
    })
  }
}

function goRegister() {
  nextTick(() => {
    if (registerPopup.value) {
      registerPopup.value.open()
    }
  })
}

function closeRegisterPopup() {
  registerPopup.value.close()
}

function confirmRegister() {
  registerPopup.value.close()
  uni.navigateTo({url: '/login/register'})
}

function getCode() {
  uni.hideLoading()
  getCodeImg().then((res) => {
    codeUrl.value = 'data:image/gif;base64,' + res.data.img
    form.value.uuid = res.data.uuid
    form2.value.uuid = res.data.uuid
  })
}

function getCaptchaSms() {
  if (!form2.value.telNo) {
    uni.showToast({title: '手机号不能为空', icon: 'none'})
    return
  }
  var pattern = /^1[3456789]\d{9}$/;
  if (!pattern.test(form2.value.telNo)) {
    uni.showToast({title: '请输入正确的手机号', duration: 2000, icon: 'none'})
    return
  }
  if (!form2.value.captcha) {
    uni.showToast({title: '图形验证码不能为空', icon: 'none'})
    return
  }
  
  getSmsCodeImg({
    uuid: form2.value.uuid,
    telNo: form2.value.telNo,
    code: form2.value.captcha
  }).then(res => {
    uni.showToast({title: res.data.msg, icon: 'none'})
    countDown.value.start = true
  })
}

function timeup() {
  countDown.value.start = false
  countDown.value.second = 60
  getCode()
}

function call(num) {
  uni.makePhoneCall({phoneNumber: num})
}
</script>

<style lang="scss" scoped>
.wNumber {
  position: absolute;
  width: 100%;
  bottom: -50rpx;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
  margin: 20rpx 0 0;
}

.logotop {
  width: 510rpx;
  height: 215rpx;
  margin: 5vh auto 40rpx;
  display: block;
}

.ren1 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.ren2 {
  width: 456rpx;
  height: 600rpx;
  position: relative;
  top: 20rpx;
}

.retop {
  position: relative;
  z-index: 1;
  top: 100rpx;
}

.loginbox {
  position: relative;
}

/* ====================== 最终精准版 ====================== */
.loginNav {
  width: 700rpx;
  height: 133rpx;
  margin: 30rpx auto -53rpx;
  position: relative;
  overflow: visible;
  
  // 选中：全屏宽
  .tab-active {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
  }
  
  // 未选中-左侧：顶部10rpx
  .tab-inactive-left {
    position: absolute;
    left: 10rpx;
    top: 10rpx;
    width: 300rpx;
    height: 109rpx;
    z-index: 2;
  }
}

// 未选中-右侧：顶部10rpx + 右侧留10rpx边距
.tab-inactive-right {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  width: 300rpx;
  height: 113rpx;
  z-index: 2;
}

// 文字层：不flex平分，绝对定位居中
.tab-text-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.text-item {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
  pointer-events: auto;
}

// 密码登录：靠左区域居中
.text-left {
  left: 0;
  width: 30%;
  height: 100rpx;
  transform: translateX(15%);
}

// 短信登录：靠右区域居中
.text-right {
  right: 0;
  width: 30%;
  height: 100rpx;
  transform: translateX(-12%);
}

// 选中文字颜色
.text-item.active {
  color: #AD181F;
  font-weight: 500;
  width: 50%;
}

/* ======================================================= */

.formbox {
  background: #fff;
  width: 700rpx;
  padding: 50rpx;
  box-sizing: border-box;
  margin: auto;
  border-radius: 40rpx;
}

.flex-item {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0;
  font-size: 28rpx;
  
  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 16rpx;
  }
}

.member {
  color: #4C5359;
  display: flex;
  align-items: center;
}

.center-item {
  text-align: center;
  margin: 30rpx 0 0;
  font-size: 30rpx;
  
  .btn-red {
    border-radius: 20rpx;
    width: 600rpx;
    line-height: 80rpx;
    font-size: 36rpx;
  }
}

.btn-red {
  background: #AD181F;
  color: #fff;
}

.text-red {
  color: #AD181F;
}

/* 输入框样式 */
.round-input-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 80rpx;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  background: transparent;
  padding: 0;
  
  .icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
    flex-shrink: 0;
  }
  
  uni-easyinput {
    flex: 1;
  }
  
  // 图形验证码
  .code-img {
    width: 160rpx;
    height: 60rpx;
    margin-left: 16rpx;
    flex-shrink: 0;
  }
  
  text {
    font-size: 28rpx;
    color: #014A9F;
    padding-left: 20rpx;
    flex-shrink: 0;
  }
}

.fixedagree {
  position: fixed;
  bottom: 100rpx;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  font-size: 24rpx;
  width: 100vw;
  justify-content: center;
  
  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
}

.btn-register {
  border-radius: 40rpx;
  width: 600rpx;
  line-height: 80rpx;
  font-size: 36rpx;
  background: #fff;
  color: #AD181F;
  border: 1rpx solid #AD181F;
  margin: 0;
}

.register-popup {
  width: 700rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
}

.popup-title {
  color: #333;
  font-size: 28rpx;
  font-weight: 600;
  margin: 30rpx auto 20rpx;
  text-align: center;
}

.popup-content {
  padding: 0 30rpx 30rpx;
}

.popup-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 1.6;
}

.popup-item {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-top: 24rpx;
  margin-bottom: 10rpx;
}

.popup-tip {
  color: #C4121B;
  font-weight: bold;
  font-size: 32rpx;
  width: 6rpx;
}

.popup-desc {
  font-size: 24rpx;
  color: #888;
  padding-left: 16rpx;
  line-height: 1.5;
  margin-bottom: 8rpx;
}

.popup-list {
  display: flex;
  column-gap: 16rpx;
  padding-left: 10rpx;
}

.popup-list text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.popup-btns {
  display: flex;
  padding: 0 30rpx 30rpx;
  gap: 24rpx;
}

.popup-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  border-radius: 40rpx;
}

.popup-btn.cancel {
  background: #fff;
  color: #AD181F;
  border: 2rpx solid #AD181F;
}

.popup-btn.confirm {
  background: #AD181F;
  color: #fff;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-top: 50rpx;
  
  .btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 20rpx;
    border: none;
    
    &::after {
      border: none;
    }
  }
  
  .btn-register {
    background: #D4B87A;
    color: #fff;
  }
  
  .btn-login {
    background: #AD181F;
    color: #fff;
  }
}
</style>