<script lang="ts" setup>
import { useUserStore, ClientType, CLIENT_TYPE_CONFIG } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'
import { login, sendCode } from '@/api/auth'

definePage({
  style: {
    navigationBarTitleText: '登录',
    navigationBarBackgroundColor: '#ffffff',
  },
})

const userStore = useUserStore()

// 状态
const phone = ref('13800138000')
const code = ref('')
const loading = ref(false)
const countdown = ref(0)
const timer = ref<any>(null)

// 客户端类型选择
const selectedClientType = ref<ClientType>(ClientType.USER)
const clientTypes = [
  { type: ClientType.USER, ...CLIENT_TYPE_CONFIG[ClientType.USER] },
  { type: ClientType.MERCHANT, ...CLIENT_TYPE_CONFIG[ClientType.MERCHANT] },
  { type: ClientType.BANK, ...CLIENT_TYPE_CONFIG[ClientType.BANK] },
  { type: ClientType.GOVERNMENT, ...CLIENT_TYPE_CONFIG[ClientType.GOVERNMENT] },
  { type: ClientType.INSURANCE, ...CLIENT_TYPE_CONFIG[ClientType.INSURANCE] },
]

// 选择客户端类型
function selectClientType(type: ClientType) {
  selectedClientType.value = type
}

// 发送验证码
async function handleSendCode() {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  if (countdown.value > 0) return
  
  try {
    await sendCode(phone.value)
    uni.showToast({ title: '验证码已发送', icon: 'none' })
    
    countdown.value = 60
    timer.value = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer.value)
      }
    }, 1000)
  } catch (error) {
    uni.showToast({ title: '发送失败', icon: 'none' })
  }
}

// 登录
async function handleLogin() {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  
  loading.value = true
  try {
    const res: any = await login({ phone: phone.value, code: code.value })
    
    // 更新用户信息和客户端类型
    userStore.userInfo = res.data.user
    userStore.isLogin = true
    userStore.setClientType(selectedClientType.value)
    
    // 根据客户端类型切换 tabbar
    tabbarStore.setTabbarByClientType(selectedClientType.value)
    
    const config = CLIENT_TYPE_CONFIG[selectedClientType.value]
    uni.showToast({ title: `${config.label}登录成功`, icon: 'success' })
    
    // 跳转到对应首页
    setTimeout(() => {
      uni.reLaunch({ url: config.homePage })
    }, 1500)
  } catch (error) {
    uni.showToast({ title: '登录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

onUnload(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<template>
  <view class="login-page">
    <view class="logo-wrapper">
      <view class="logo">
        <image src="/static/logo4.png" class="logo-image"></image>
      </view>
    </view>
    
    <!-- 客户端类型选择 -->
    <view class="client-type-section">
      <view class="section-title">选择登录端</view>
      <view class="client-type-list">
        <view
          v-for="item in clientTypes"
          :key="item.type"
          class="client-type-item"
          :class="{ active: selectedClientType === item.type }"
          :style="{ '--theme-color': item.color }"
          @click="selectClientType(item.type)"
        >
          <view class="type-icon" :style="selectedClientType === item.type ? { background: item.color } : {}">
            <text :class="item.icon"></text>
          </view>
          <view class="type-info">
            <text class="type-label">{{ item.label }}</text>
            <text class="type-desc">{{ item.description }}</text>
          </view>
          <view class="type-check" v-if="selectedClientType === item.type" :style="{ color: item.color }">
            <text class="i-carbon-checkmark-filled"></text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="form">
      <view class="input-group">
        <text class="i-carbon-phone icon"></text>
        <input
          v-model="phone"
          class="input"
          type="number"
          placeholder="请输入手机号"
          :maxlength="11"
        />
      </view>
      
      <view class="input-group">
        <text class="i-carbon-security icon"></text>
        <input
          v-model="code"
          class="input"
          type="number"
          placeholder="请输入验证码"
          :maxlength="6"
        />
        <view
          class="code-btn"
          :class="{ disabled: countdown > 0 }"
          @click="handleSendCode"
        >
          {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
        </view>
      </view>
      
      <wd-notice-bar text="演示使用,直接点击登录~" prefix="warn-bold" custom-class="space" color="#34D19D" background-color="#f0f9eb" />
      
      <view 
        class="submit-btn" 
        :style="{ background: CLIENT_TYPE_CONFIG[selectedClientType].color }"
        @click="handleLogin"
      >
        <text v-if="!loading">{{ CLIENT_TYPE_CONFIG[selectedClientType].label }}登录</text>
        <text v-else>登录中...</text>
      </view>
      
      <view class="tips">
        <text>未注册手机号验证后自动创建账号</text>
        <p>&nbsp;</p>
        <p><text>©2025  数字广东网络建设有限公司</text></p>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.logo-image {
  width: 80px;
  height: 78px;
}

.login-page {
  min-height: 100vh;
  background: #fff;
  padding: 60rpx;
  display: flex;
  flex-direction: column;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
  
  .logo {
    width: 320rpx;
    height: 116rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 客户端类型选择区域
.client-type-section {
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
  }
  
  .client-type-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }
  
  .client-type-item {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    background: #f8f9fa;
    border-radius: 16rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
    
    &.active {
      background: #fff;
      border-color: var(--theme-color);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    }
    
    .type-icon {
      width: 72rpx;
      height: 72rpx;
      border-radius: 16rpx;
      background: #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      transition: all 0.3s ease;
      
      text {
        font-size: 36rpx;
        color: #666;
      }
    }
    
    &.active .type-icon text {
      color: #fff;
    }
    
    .type-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4rpx;
      
      .type-label {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
      
      .type-desc {
        font-size: 22rpx;
        color: #999;
      }
    }
    
    .type-check {
      font-size: 36rpx;
    }
  }
}

.form {
  .input-group {
    display: flex;
    align-items: center;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 50rpx;
    padding: 0 40rpx;
    margin-bottom: 24rpx;
    
    .icon {
      font-size: 40rpx;
      color: #999;
      margin-right: 20rpx;
    }
    
    .input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
    }
    
    .code-btn {
      font-size: 26rpx;
      color: #008ef7;
      padding-left: 20rpx;
      border-left: 1rpx solid #ddd;
      line-height: 1;
      
      &.disabled {
        color: #999;
      }
    }
  }
  
  .submit-btn {
    height: 100rpx;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    margin-top: 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    
    &:active {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
  
  .tips {
    text-align: center;
    margin-top: 30rpx;
    font-size: 24rpx;
    color: #999;
  }
}
</style>

