<!--
 * @Date: 2025-08-27 17:43:45
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-06 21:59:10
 * @FilePath: /lls_program/src/pages/Welcome/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="min-h-screen flex flex-col bg-white">
    <!-- Main content -->
    <view class="flex-1 flex flex-col px-4 pb-20">
      <!-- Hero Image -->
      <view class="w-full mb-6">
        <view class="w-full h-48 rounded-2xl overflow-hidden">
          <image :src="welcomeHomeImg" alt="家庭在上海外滩散步" class="w-full h-full object-cover" />
        </view>
      </view>
      <!-- Steps Section -->
      <view class="mb-8">
        <h2 class="text-xl font-bold mb-6">简单三步，开启健康生活</h2>
        <view class="space-y-6">
          <!-- Step 1 -->
          <view class="flex items-center">
            <view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
              1
            </view>
            <view>
              <h3 class="font-bold">创建家庭</h3>
              <p class="text-gray-600 text-sm">
                家长创建家庭，设置专属口令
              </p>
            </view>
          </view>
          <!-- Step 2 -->
          <view class="flex items-center">
            <view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
              2
            </view>
            <view>
              <h3 class="font-bold">邀请家人</h3>
              <p class="text-gray-600 text-sm">分享口令，邀请家人加入</p>
            </view>
          </view>
          <!-- Step 3 -->
          <view class="flex items-center">
            <view class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 flex-shrink-0">
              3
            </view>
            <view>
              <h3 class="font-bold">同步步数，兑换好礼</h3>
              <p class="text-gray-600 text-sm">
                每日同步微信步数，兑换抵用券
              </p>
            </view>
          </view>
        </view>
      </view>
      <!-- Action Buttons -->
      <view class="space-y-4 mt-auto">
        <view @tap="handleNavigate('/pages/CreateFamily/index')" class="w-full py-3.5 bg-blue-500 text-white text-lg font-medium rounded-full text-center">
          创建家庭
        </view>
        <view @tap="handleNavigate('/pages/JoinFamily/index')" class="w-full py-3.5 bg-white text-gray-800 text-lg font-medium rounded-full border border-gray-300 text-center" style="margin-bottom: 1rem;">
          加入家庭
        </view>
      </view>
    </view>
    <!-- Bottom Navigation -->
    <BottomNav />

    <!-- Dialog Components -->
    <!-- 个人信息收集说明弹窗 -->
    <nut-dialog
      v-model:visible="showPrivacyDialog"
      title="个人信息收集说明"
    >
      <template #default>
        <view class=" text-gray-700 leading-loose text-sm text-left break-words">
          {{ privacyContent }}
        </view>
      </template>
      <template #footer>
        <nut-row :gutter="10">
          <nut-col :span="12">
            <nut-button
              @click="onPrivacyCancel"
              type="default"
              size="normal"
              block
            >
              取消操作
            </nut-button>
          </nut-col>
          <nut-col :span="12">
            <nut-button
              @click="onPrivacyConfirm"
              type="primary"
              size="normal"
              color="#007AFF"
              block
            >
              同意搜集
            </nut-button>
          </nut-col>
        </nut-row>
      </template>
    </nut-dialog>

    <!-- 年龄限制提示弹窗 -->
    <nut-dialog
      v-model:visible="showAgeDialog"
      title="温馨提示"
    >
      <template #default>
        <view class="text-center text-gray-700 text-sm leading-loose">
          您需要年满60岁才能创建家庭
        </view>
      </template>
      <template #footer>
        <nut-row>
          <nut-col :span="24">
            <nut-button
              @click="onAgeConfirm"
              type="primary"
              size="normal"
              color="#007AFF"
              block
            >
              了解
            </nut-button>
          </nut-col>
        </nut-row>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue'; // 假设BottomNav组件已转换
// 获取接口信息
import { getUserProfileAPI } from '@/api/user';

const welcomeHomeImg = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_home.png';

const userAge = ref(null);
const userInfo = ref({});
const canCreateFamily = ref(true);
const hasProfile = ref(false);

// Dialog相关响应式数据
const showPrivacyDialog = ref(false);
const showAgeDialog = ref(false);
const pendingNavigateUrl = ref('');

// 个人信息收集说明内容
const privacyContent = `为了提供更好的服务，我们需要收集您的基本信息：\n1.头像和昵称：用于家庭成员识别 \n2.出生年月：验证年龄资格，60岁以上可创建家庭。\n我们承诺严格保护您的个人隐私，仅用于家庭功能和活动服务。`;

const navigateTo = (url) => {
  Taro.navigateTo({ url });
};

useDidShow(async () => {
  // 获取用户的个人信息
  const { code, data } = await getUserProfileAPI();
  if (code) {
    userInfo.value = data?.user?.nickname ? data.user : {
      avatar_url: null,
      nickname: null,
      birthday: null,
      wheelchair: null,
      wheelchair_text: null,
      phone: null,
    };
    // userInfo.birthday 是年月日的形式需要转成年龄
    userInfo.value.birthday = new Date().getFullYear() - new Date(userInfo.value.birth_date).getFullYear();
    // 检查用户是否完善了个人信息
    hasProfile.value = userInfo.value.nickname && userInfo.value.birth_date && userInfo.value.wheelchair_needed !== null;
    userAge.value = userInfo.value.birthday;
  }
});

const handleNavigate = (url) => {
  if (!hasProfile.value) {
    // 显示个人信息收集说明弹窗
    pendingNavigateUrl.value = '/pages/AddProfile/index';
    showPrivacyDialog.value = true;
    return;
  }

  if (url === '/pages/CreateFamily/index') {
    if (!canCreateFamily.value) {
      // 显示年龄限制提示弹窗
      showAgeDialog.value = true;
      return;
    }
  }

  navigateTo(url);
};

// Dialog事件处理方法
const onPrivacyCancel = () => {
  showPrivacyDialog.value = false;
  pendingNavigateUrl.value = '';
};

const onPrivacyConfirm = () => {
  showPrivacyDialog.value = false;
  if (pendingNavigateUrl.value) {
    navigateTo(pendingNavigateUrl.value);
    pendingNavigateUrl.value = '';
  }
};

const onAgeConfirm = () => {
  showAgeDialog.value = false;
};
</script>