<template>
  <view class="register-page">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <view class="avatar-container">
        <image
          :src="formData.avatar_url || defaultAvatar"
          class="avatar-image"
          mode="aspectFill"
          @tap="previewAvatar(formData.avatar_url || defaultAvatar)"
        />
      </view>
      <view class="change-avatar-btn" @click="changeAvatar">
        <text class="change-avatar-text">上传头像</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <nut-form ref="formRef" :model-value="formData">
      <view class="form-container">
        <!-- 昵称 -->
        <nut-form-item label="昵称" prop="nickname" required :rules="[{ required: true, message: '请输入昵称' }]">
          <nut-input
            v-model="formData.nickname"
            placeholder="请输入昵称"
            input-align="right"
            clearable
          />
        </nut-form-item>

        <!-- 手机号 -->
        <nut-form-item label="手机号" prop="phone" required :rules="phoneRules">
          <view class="phone-input-container">
            <nut-input
              v-model="formData.phone"
              placeholder="请输入手机号"
              type="tel"
              maxlength="11"
              input-align="right"
              clearable
              class="phone-input"
            />
            <nut-button
              size="small"
              :disabled="codeCountdown > 0 || !isPhoneValid"
              @click="sendCode"
              class="code-btn"
            >
              {{ codeCountdown > 0 ? `${codeCountdown}s` : '获取验证码' }}
            </nut-button>
          </view>
        </nut-form-item>

        <!-- 验证码 -->
        <nut-form-item label="验证码" prop="sms_code" required :rules="[{ required: true, message: '请输入验证码' }]">
          <nut-input
            v-model="formData.sms_code"
            placeholder="请输入验证码"
            type="number"
            maxlength="6"
            input-align="right"
            clearable
          />
        </nut-form-item>

        <!-- 性别 -->
        <nut-config-provider :theme-vars="themeVars">
          <nut-form-item label="性别" prop="gender" body-align="right" required :rules="[{ required: true, message: '请选择性别' }]">
            <nut-radio-group v-model="formData.gender" direction="horizontal">
              <nut-radio :label="0">男</nut-radio>
              <nut-radio :label="1">女</nut-radio>
            </nut-radio-group>
          </nut-form-item>
        </nut-config-provider>

        <!-- 生日 -->
        <!-- <nut-form-item label="生日" prop="birthday" label-position="top">
          <view class="birthday-item" @click="showDatePicker">
            <text class="birthday-value">{{ formData.birthday || '请选择生日' }}</text>
            <Right class="arrow-icon" />
          </view>
        </nut-form-item> -->

        <!-- 所在学校 -->
        <nut-form-item label="所在学校" prop="school" required :rules="[{ required: true, message: '请选择学校' }]" label-position="top">
          <view class="school-item" @click="showSchoolPicker">
            <text class="school-value">{{ formData.school || '请选择学校' }}</text>
            <Right class="arrow-icon" />
          </view>
        </nut-form-item>

        <!-- 微信号 -->
        <nut-form-item label="微信号" prop="wechat_id" required :rules="[{ required: true, message: '请输入微信号' }]">
          <nut-input
            v-model="formData.wechat_id"
            placeholder="请输入微信号"
            input-align="right"
            clearable
          />
        </nut-form-item>
      </view>
    </nut-form>

    <!-- 注册按钮 -->
    <view class="register-section">
      <nut-button
        color="#f97316"
        size="large"
        block
        @click="handleRegister"
        :loading="isRegistering"
      >
        {{ isRegistering ? '保存中...' : '保存' }}
      </nut-button>
    </view>

    <!-- 日期选择器 -->
    <nut-popup v-model:visible="datePickerVisible" position="bottom">
      <nut-date-picker
        v-model="dateValue"
        title="选择生日"
        @confirm="onDateConfirm"
        @cancel="datePickerVisible = false"
      />
    </nut-popup>

    <!-- 学校选择器 -->
    <nut-popup v-model:visible="schoolPickerVisible" position="bottom">
      <nut-picker
        v-model="schoolValue"
        :columns="schoolOptions"
        title="选择学校"
        @confirm="onSchoolConfirm"
        @cancel="schoolPickerVisible = false"
      />
    </nut-popup>

    <!-- 头像预览 -->
    <nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" @close="closePreview" />

    <!-- 成功提示 -->
    <nut-toast
      v-model:visible="toastVisible"
      :msg="toastMessage"
      :type="toastType"
    />
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Right } from '@nutui/icons-vue-taro'
import './index.less'
import BASE_URL from '@/utils/config';
import { updateProfileAPI, sendSmsCodeAPI } from '@/api/index';
import { useUserStore } from '@/stores/user';

// 用户状态管理
const userStore = useUserStore()

// 主题配置
const themeVars = {
  radioLabelFontActiveColor: '#f97316'
}

// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

// 表单数据
const formData = reactive({
  avatar_url: '',
  nickname: '',
  phone: '',
  sms_code: '',
  gender: '',
  // birthday: '',
  school: '',
  school_id: '',
  wechat_id: ''
})

// 弹框控制
const datePickerVisible = ref(false)
const schoolPickerVisible = ref(false)
const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

// 图片预览相关
const previewVisible = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)

const closePreview = () => {
    previewVisible.value = false
}

// 验证码相关
const codeCountdown = ref(0)
const isRegistering = ref(false)

// 日期选择
const dateValue = ref(new Date())

// 学校选择
const schoolValue = ref([])
const schoolOptions = ref([
  [
    { text: '上海理工大学', value: '上海理工大学' },
    { text: '上海大学', value: '上海大学' },
    { text: '华东理工大学', value: '华东理工大学' },
    { text: '上海交通大学', value: '上海交通大学' },
    { text: '复旦大学', value: '复旦大学' },
    { text: '同济大学', value: '同济大学' },
    { text: '华东师范大学', value: '华东师范大学' },
    { text: '上海财经大学', value: '上海财经大学' }
  ]
])

// 手机号验证规则
const phoneRules = [
  { required: true, message: '请输入手机号' },
  {
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的手机号格式'
  }
]

// 计算属性：手机号是否有效
const isPhoneValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(formData.phone)
})

/**
 * 更换头像
 */
const changeAvatar = () => {
  Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
            const tempFilePath = res.tempFilePaths[0]
            uploadImage(tempFilePath)
        },
        fail: function () {
            Taro.showToast({
                title: '选择图片失败',
                icon: 'none'
            })
        }
    })
}

/**
 * 上传图片到服务器
 * @param {String} filePath - 图片文件路径
 */
const uploadImage = (filePath) => {
    // 显示上传中提示
    Taro.showLoading({
        title: '上传中',
        mask: true
    })

    // 获取上传URL
    wx.uploadFile({
        url: BASE_URL + '/admin/?m=srv&a=upload',
        filePath,
        name: 'file',
        header: {
            'content-type': 'multipart/form-data',
        },
        success: function (res) {
            let upload_data = JSON.parse(res.data);
            Taro.hideLoading({
                success: () => {
                    if (res.statusCode === 200) {
                        formData.avatar_url = upload_data.data.src;
                        Taro.showToast({
                            title: '上传成功',
                            icon: 'success'
                        })
                    } else {
                        Taro.showToast({
                            icon: 'error',
                            title: '服务器错误,稍后重试！',
                            mask: true
                        })
                    }
                },
            });
        },
        fail: function (res) {
            Taro.hideLoading({
                success: () => {
                    Taro.showToast({
                        icon: 'error',
                        title: '上传失败,稍后重试！',
                        mask: true
                    })
                }
            })
        }
    });
}

/**
 * 预览头像
 */
const previewAvatar = (imageUrl) => {
  if (!imageUrl) {
    Taro.showToast({
      title: '暂无图片可预览',
      icon: 'none'
    })
    return
  }
  previewImages.value = [{ src: imageUrl }]
  previewIndex.value = 0
  previewVisible.value = true
}

/**
 * 发送验证码
 */
const sendCode = async () => {
  if (!isPhoneValid.value) {
    Taro.showToast({
      title: '请输入正确的手机号',
      icon: 'error'
    })
    return
  }

  // 如果正在倒计时，不允许重复发送
  if (codeCountdown.value > 0) {
    return
  }

  try {
    // 发送验证码API请求
    await sendSmsCodeAPI({ mobile: formData.phone })
    Taro.showToast({
      title: '验证码已发送',
      icon: 'success'
    })

    // 开始倒计时
    codeCountdown.value = 60
    const timer = setInterval(() => {
      codeCountdown.value--
      if (codeCountdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)

  } catch (error) {
    Taro.showToast({
      title: error.message || '发送验证码失败，请重试',
      icon: 'error'
    })
  }
}

/**
 * 显示日期选择器
 */
// const showDatePicker = () => {
//   datePickerVisible.value = true
// }

/**
 * 确认日期选择
 */
const onDateConfirm = ({ selectedValue }) => {
  formData.birthday = `${selectedValue[0]}-${String(selectedValue[1]).padStart(2, '0')}-${String(selectedValue[2]).padStart(2, '0')}`
  datePickerVisible.value = false
}

/**
 * 显示学校选择器
 */
const showSchoolPicker = () => {
  schoolPickerVisible.value = true
}

/**
 * 确认学校选择
 */
const onSchoolConfirm = ({ selectedOptions }) => {
  formData.school = selectedOptions[0].text
  formData.school_id = selectedOptions[0].value
  schoolPickerVisible.value = false
}

/**
 * 显示提示信息
 */
const showToast = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  toastVisible.value = true
}

/**
 * 表单验证
 */
const validateForm = () => {
  if (!formData.nickname.trim()) {
    showToast('请输入昵称', 'error')
    return false
  }

  if (!isPhoneValid.value) {
    showToast('请输入正确的手机号', 'error')
    return false
  }

  if (!formData.sms_code.trim()) {
    showToast('请输入验证码', 'error')
    return false
  }

  if (formData.gender === '') {
    showToast('请选择性别', 'error')
    return false
  }

  if (!formData.school_id) {
    showToast('请选择学校', 'error')
    return false
  }

  if (!formData.wechat_id) {
    showToast('请输入微信号', 'error')
    return false
  }

  return true
}

/**
 * 处理注册
 */
const handleRegister = async () => {
  if (!validateForm()) {
    return
  }

  isRegistering.value = true

  try {

    const result = await updateProfileAPI(formData)

    if (!result.code) {
      Taro.showToast({
        title: result.msg || '注册失败',
        icon: 'error'
      })
      return
    }

    // 更新用户状态
    userStore.updateUserInfo({
      ...formData,
      avatar: formData.avatar_url
    })
    userStore.isAuthenticated = true

    Taro.showToast({
      title: '保存成功',
      icon: 'success',
      complete: () => {
        // 获取页面栈信息
        const pages = Taro.getCurrentPages()

        // 如果页面栈中有多于1个页面，说明是从其他页面跳转过来的
        if (pages.length > 1) {
          // 返回上一页，权限状态已更新，用户可以正常使用功能
          Taro.navigateBack()
        } else {
          // 如果是直接访问注册页面，跳转到首页
          Taro.reLaunch({
            url: '/pages/index/index'
          })
        }
      }
    })

  } catch (error) {
    Taro.showToast({
      title: '保存失败，请重试',
      icon: 'error'
    })
  } finally {
    isRegistering.value = false
  }
}

// 初始化
onMounted(() => {
  // 可以在这里进行初始化操作
})
</script>

<script>
export default {
  name: 'RegisterPage'
}
</script>