hms/apps/miniprogram/src/pages/mall/index.tsx

import React, { useState, useCallback, useRef } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
import { listProducts } from '../../services/points';
import type { PointsProduct } from '../../services/points';
import { useAuthStore } from '../../stores/auth';
import { usePointsStore } from '../../stores/points';
import Loading from '../../components/Loading';
import { useElderClass } from '../../hooks/useElderClass';
import './index.scss';

const PRODUCT_TYPE_TABS = [
  { key: '', label: '全部' },
  { key: 'physical', label: '实物', char: '物' },
  { key: 'service', label: '服务券', char: '券' },
  { key: 'privilege', label: '权益', char: '权' },
];

const TYPE_BG: Record<string, string> = {
  physical: 'type-physical',
  service: 'type-service',
  privilege: 'type-privilege',
};

export default function Mall() {
  const { currentPatient, loadPatients } = useAuthStore();
  const { account, checkinStatus, refresh: refreshPoints, doCheckin } = usePointsStore();
  const [products, setProducts] = useState<PointsProduct[]>([]);
  const [productType, setProductType] = useState('');
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [checkinLoading, setCheckinLoading] = useState(false);
  const [noProfile, setNoProfile] = useState(false);
  const loadingRef = useRef(false);
  const modeClass = useElderClass();

  const fetchProducts = useCallback(
    async (pageNum: number, type: string, isRefresh = false) => {
      if (loadingRef.current) return;
      loadingRef.current = true;
      setLoading(true);
      try {
        const res = await listProducts({
          page: pageNum,
          page_size: 10,
          product_type: type || undefined,
        });
        const list = res.data || [];
        if (isRefresh) {
          setProducts(list);
        } else {
          setProducts((prev) => [...prev, ...list]);
        }
        setTotal(res.total);
        setPage(pageNum);
      } catch {
        Taro.showToast({ title: '加载失败', icon: 'none' });
      } finally {
        loadingRef.current = false;
        setLoading(false);
      }
    },
    [],
  );

  const loadAll = useCallback(
    async (type?: string) => {
      const t = type !== undefined ? type : productType;
      if (!currentPatient) {
        // 先尝试从服务端加载患者列表
        await loadPatients();
        const updated = useAuthStore.getState().currentPatient;
        if (!updated) {
          setNoProfile(true);
          return;
        }
      }
      setNoProfile(false);
      await Promise.all([refreshPoints(), fetchProducts(1, t, true)]);
    },
    [currentPatient, loadPatients, refreshPoints, fetchProducts, productType],
  );

  useDidShow(() => {
    Taro.setNavigationBarTitle({ title: '积分商城' });
    loadAll();
  });

  usePullDownRefresh(() => {
    loadAll().finally(() => {
      Taro.stopPullDownRefresh();
    });
  });

  useReachBottom(() => {
    if (!loading && products.length < total) {
      fetchProducts(page + 1, productType);
    }
  });

  const handleCheckin = async () => {
    if (checkinLoading || checkinStatus?.checked_in_today) return;
    setCheckinLoading(true);
    try {
      const ok = await doCheckin();
      if (ok) {
        Taro.showToast({ title: '签到成功', icon: 'success', duration: 2000 });
      }
    } catch (err) {
      Taro.showToast({
        title: err instanceof Error ? err.message : '签到失败',
        icon: 'none',
      });
    } finally {
      setCheckinLoading(false);
    }
  };

  const handleTabChange = (key: string) => {
    setProductType(key);
    fetchProducts(1, key, true);
  };

  const handleProductClick = (item: PointsProduct) => {
    if (item.stock <= 0) {
      Taro.showToast({ title: '已兑完', icon: 'none' });
      return;
    }
    Taro.navigateTo({ url: `/pages/pkg-mall/exchange/index?product_id=${item.id}` });
  };

  const balance = account?.balance ?? 0;

  if (noProfile) {
    return (
      <View className={`mall-page ${modeClass}`}>
        <View className='mall-empty-state'>
          <View className='empty-icon'>
            <Text className='empty-char'>档</Text>
          </View>
          <Text className='empty-title'>请先完善个人档案</Text>
          <Text className='empty-hint'>建档后即可使用积分商城、签到等功能</Text>
          <View className='empty-action' onClick={() => Taro.navigateTo({ url: '/pages/pkg-profile/family-add/index' })}>
            <Text className='empty-action-text'>去建档</Text>
          </View>
        </View>
      </View>
    );
  }

  return (
    <View className={`mall-page ${modeClass}`}>
      {/* 积分余额卡片 */}
      <View className='mall-header'>
        <View className='points-card'>
          <View className='points-top'>
            <Text className='points-label'>当前积分</Text>
            <View
              className={`checkin-btn ${checkinStatus?.checked_in_today ? 'checked' : ''}`}
              onClick={handleCheckin}
            >
              <Text className='checkin-btn-text'>
                {checkinLoading ? '...' : checkinStatus?.checked_in_today ? '已签到' : '签到'}
              </Text>
            </View>
          </View>
          <Text className='points-balance'>{balance.toLocaleString()}</Text>
          {checkinStatus && checkinStatus.consecutive_days > 0 && (
            <Text className='points-streak'>
              已连续签到 {checkinStatus.consecutive_days} 天
            </Text>
          )}
        </View>
      </View>

      {/* 商品类型切换 */}
      <View className='type-tabs'>
        {PRODUCT_TYPE_TABS.map((tab) => (
          <View
            key={tab.key}
            className={`type-tab ${productType === tab.key ? 'active' : ''}`}
            onClick={() => handleTabChange(tab.key)}
          >
            <Text className={`type-tab-text ${productType === tab.key ? 'active' : ''}`}>
              {tab.label}
            </Text>
          </View>
        ))}
      </View>

      {/* 商品列表 */}
      {products.length === 0 && !loading ? (
        <View className='mall-empty-state'>
          <View className='empty-icon'>
            <Text className='empty-char'>礼</Text>
          </View>
          <Text className='empty-title'>暂无商品</Text>
          <Text className='empty-hint'>更多好物即将上架</Text>
        </View>
      ) : (
        <View className='product-grid'>
          {products.map((item) => (
            <View className='product-card' key={item.id} onClick={() => handleProductClick(item)}>
              <View className={`product-image ${TYPE_BG[item.product_type] || ''}`}>
                <Text className='product-image-char'>
                  {item.product_type === 'physical' ? '物' : item.product_type === 'service' ? '券' : '权'}
                </Text>
              </View>
              <View className='product-info'>
                <Text className='product-name'>{item.name}</Text>
                <View className='product-bottom'>
                  <View className='product-points'>
                    <Text className='product-points-char'>P</Text>
                    <Text className='product-points-value'>{item.points_cost}</Text>
                  </View>
                  {item.stock <= 0 ? (
                    <Text className='product-stock out'>已兑完</Text>
                  ) : item.stock <= 10 ? (
                    <Text className='product-stock low'>仅剩{item.stock}件</Text>
                  ) : null}
                </View>
              </View>
            </View>
          ))}
          {loading && <Loading />}
          {!loading && products.length >= total && total > 0 && (
            <Loading text='没有更多了' />
          )}
        </View>
      )}
    </View>
  );
}