taro/src/_health/pages/move.tsx

import { View, Text, Image } from "@tarojs/components";
import './move.scss'
import { useDispatch, useSelector } from "react-redux";
import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
import { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { checkStart, setResult } from "@/store/action_results";
import RequestType, { thirdPartRequest } from "@/services/thirdPartRequest";
import { setAuth } from "@/features/trackSomething/hooks/werun";
import { useTranslation } from "react-i18next";
import { getActiveMoves, getActiveMovesCurrent, uploadActiveMoves } from "@/services/health";
import dayjs from "dayjs";
import { TimeFormatter } from "@/utils/time_format";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { rpxToPx } from "@/utils/tools";
import { IconActive, IconMore, IconSit } from "@/components/basic/Icons";
import NewHeader, { NewHeaderType } from "../components/new_header";
import NewButton, { NewButtonType } from "../base/new_button";
import { MainColorType } from "@/context/themes/color";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import showActionSheet from "@/components/basic/ActionSheet";
import ListFooter from "../components/list_footer";
import StickyDateList from "../components/sticky_date_list";

let timer
let myScrollTop = 0
export default function Move() {
    const health = useSelector((state: any) => state.health);
    const [allowRun, setAllowRun] = useState(false)
    const [loaded, setLoaded] = useState(false)
    const [loadAuth, setLoadAuth] = useState(false)
    const [count, setCount] = useState(0)
    const [data, setData] = useState<any>(null)
    const [list, setList] = useState<any>([])
    const [total, setTotal] = useState(0)
    const [index, setIndex] = useState(1)
    const [hideCurrentRecent, setHideCurrentRecent] = useState(false)
    const [moreActive, setMoreActive] = useState(false)
    const [hours, setHours] = useState<any>([])
    const [startDate, setStarteDate] = useState('')
    const [btnDisable,setBtnDisable] = useState(false)

    const [isPulling, setIsPulling] = useState(false)
    const [itemLayouts, setItemLayouts] = useState<any>([])
    const [showDate, setShowDate] = useState(false)
    const [date, setDate] = useState('')
    const [page, setPage] = useState(1)
    const [loading, setLoading] = useState(false)


    let navigation, showActionSheetWithOptions;
    const { t } = useTranslation()
    const dispatch = useDispatch()

    useEffect(() => {
        getMovesCurrent()
        getMovesHistory(1)
        checkAuth()
        timer = setInterval(() => {
            setCount((index) => index + 1)
            const date = new Date()
            if (date.getMinutes() == 10 && date.getSeconds() == 0) {
                getMovesCurrent()
                getMovesHistory(1)
            }
        }, 1000)

        return () => {
            myScrollTop = 0
            clearInterval(timer)
        }
    }, [])

    useEffect(() => {
        if (list.length > 0) {
            setTimeout(() => {
                measureItemLayouts()
            }, 500)
        }
    }, [list])

    function measureItemLayouts() {
        const query = Taro.createSelectorQuery()
        list.forEach((item, index) => {
            query.select(`#history-${index}`).boundingClientRect()
        });
        query.exec((res) => {
            var layouts: any = []
            res.forEach((rect, index) => {
                if (rect) {
                    layouts[index] = rect.top + myScrollTop
                }
            });
            setItemLayouts(layouts)
        })
    }

    function checkAuth() {
        Taro.getSetting({
            success: res => {
                //第一步，检测是否有授权 - 没有授权
                if (!res.authSetting['scope.werun']) {
                    setAllowRun(false)
                    Taro.setStorage({ key: 'auth', data: false })
                }
                else {
                    setAllowRun(true)
                    Taro.setStorage({ key: 'auth', data: true })
                }
                setLoadAuth(true)
            }
        })
    }

    useDidShow(() => {
        checkAuth()
        getMovesCurrent()
        getMovesHistory(1)
    })

    global.updateMove = () => {
        getMovesCurrent()
        getMovesHistory(1)
    }

    function getMovesCurrent() {
        getActiveMovesCurrent().then(res => {
            setLoaded(true)
            setData(res)
            setStarteDate((res as any).start_date)
            var array = (res as any).hours
            var temps: any = []
            for (var i = array.length - 1; i >= 0; i--) {
                var obj = array[i]
                if (obj.status != 'WFS') {
                    temps.push(obj)
                }
            }
            setHours(temps)

            // setHours((res as any).hours.reverse())
        })
    }

    function getMovesHistory(page) {
        setIndex(page)
        // setIsPulling(true)
        setLoading(true)
        getActiveMoves({
            page: page,
            limit: 10,
        }
        ).then(res => {
            if (page == 1) {
                setList((res as any).data)
                setTotal((res as any).total)
            }
            else {
                setList([...list, ...(res as any).data])
            }
            setIsPulling(false)
            setLoading(false)

        }).catch(e => {
            setLoading(false)
        })
    }

    function more() {
        if (loading) return;
        if (total == list.length) return;
        var index = page;
        index++;
        setPage(index)
        getMovesHistory(index)
    }

    function onScroll(e) {
        var top = e.detail.scrollTop
        myScrollTop = top
        if (e.detail.scrollTop > 70) {
            Taro.setNavigationBarTitle({
                title:'Move Every Hour'
            })
        }
        else {
            Taro.setNavigationBarTitle({
                title:''
            })
        }

        if (itemLayouts.length > 0) {
            var i = -1
            var date = ''
            list.forEach((item, index) => {
                if (top >= itemLayouts[index] - 50) {
                    i = index
                    var currentDate = (list[index].date + '').substring(0, 6)

                    date = currentDate.substring(0, 4) + '年' + currentDate.substring(4, 6) + '月'
                }
            })

            setShowDate(i != -1)
            setDate(date)
        }
        else {
            setShowDate(false)
            setDate('')
        }
    }


    function tapLog() {
        // if (getStatus() != 'open') {
        //     return
        // }
        if (isExtra()) {
            return;
        }
        if (allowRun) {
            checkout()
        }
        else {
            setAuth(successAuth, refuseAuth, t)
        }
    }

    function successAuth() {
        Taro.setStorage({ key: 'auth', data: true })
        setAllowRun(true)
    }

    function refuseAuth() {
        Taro.setStorage({ key: 'auth', data: false })
        setAllowRun(false)
    }

    function checkout() {
        dispatch(checkStart());
        getWeRunData(false)
    }

    function getWeRunData(autoCheck = false) {
        if (autoCheck) {
            return
        }
        else {
            dispatch(checkStart());
        }

        // setTitle('打卡');
        setAllowRun(true)

        let schedule_id = null
        const hour = currentHourPeriod()
        data.hours.map(item => {
            if (item.hour == hour) {
                schedule_id = item.schedule_id
            }
        })

        if (btnDisable) return

        setBtnDisable(true)

        thirdPartRequest(RequestType.RequestTypeWXRunData).then(res => {
            console.log(res)
            uploadActiveMoves({
                wechat_run: {
                    encryptedData: (res as any).encryptedData,
                    iv: (res as any).iv,
                },
                start_date: startDate,
                date: dayjs().format('YYYYMMDD'),
                hour: hour,
                timestamp: new Date().getTime(),
                schedule_id: schedule_id
            }).then(res => {
                if ((res as any).error_code == 'WX_STEP_PARSE_FAIL') {
                    retry(hour, schedule_id)
                    return
                }
                // Taro.showToast({
                //     title: '上报成功',
                //     icon: 'none'
                // })
                // console.log(res)
                // console.log('move result')
                jumpPage('./post_result?data=' + JSON.stringify((res as any).post_result))
                getMovesCurrent()
                getMovesHistory(1)
                setBtnDisable(false)
            }).catch(e=>{
                setBtnDisable(false)
            })
        }).catch(_ => {
            dispatch(setResult({ isSuccess: false }) as any)
            setBtnDisable(false)
        })
    }

    function retry(hour, schedule_id) {
        Taro.login().then(res0 => {
            thirdPartRequest(RequestType.RequestTypeWXRunData).then(res => {
                uploadActiveMoves({
                    code: res0.code,
                    wechat_run: {
                        encryptedData: (res as any).encryptedData,
                        iv: (res as any).iv,
                    },
                    start_date: startDate,
                    date: dayjs().format('YYYYMMDD'),
                    hour: hour,
                    timestamp: new Date().getTime(),
                    schedule_id: schedule_id
                }).then(res => {
                    if ((res as any).error_code == 'WX_STEP_PARSE_FAIL') {
                        Taro.showToast({
                            title: '获取失败',
                            icon: 'none'
                        })
                        return
                    }
                    jumpPage('./post_result?data=' + JSON.stringify((res as any).post_result))
                    getMovesCurrent()
                    getMovesHistory(1)
                })
            }).catch(_ => {
                dispatch(setResult({ isSuccess: false }) as any)
            })
        })
    }

    function currentCheckHour() {
        let currentHour = new Date().getHours()
        const minute = new Date().getMinutes()
        if (minute < 10) {
            currentHour -= 1;
            if (currentHour < 0) {
                currentHour = 23
            }
        }
        return currentHour
    }

    function currentHourChecked() {
        const currentHour = currentCheckHour()
        var isChecked = false
        data.hours.map((item) => {
            if (item.hour == currentHour && item.status != 'WFS') {
                isChecked = true
            }
        })
        return isChecked;
    }

    function getStatus() {
        const minute = new Date().getMinutes()
        if (minute >= 50 || minute < 10) {
            var isChecked = currentHourChecked()
            if (isChecked) {
                return 'upcoming'
            }

            return 'open'
        }
        return 'upcoming'
    }

    function getDuration() {
        let now = new Date()
        let pre = new Date().getTime()
        if (now.getMinutes() < 10) {
            pre -= 3600 * 1000
        }
        let next = pre + 3600 * 1000
        if (currentHourChecked()) {
            pre = next
            next = pre + 3600 * 1000
        }
        return dayjs(pre).format('HH:00') + '-' + dayjs(next).format('HH:00')
    }

    function getCurrentTarget() {
        let now = new Date()
        let pre = new Date().getTime()
        if (now.getMinutes() < 10) {
            pre -= 3600 * 1000
        }

        if (currentHourChecked()) {
            pre += 3600 * 1000
        }
        const hour = new Date(pre).getHours()
        for (var i = 0; i < data.hours.length; i++) {
            if (data.hours[i].hour == hour) {
                return `${data.hours[i].target_steps}`//`${data.hours[i].real_steps}/${data.hours[i].target_steps}`
            }
        }
    }

    function process() {
        return `${data.stat.active_hours} / ${data.stat.waking_hours}`
    }

    function currentHourPeriod() {
        const time = new Date()
        let hour = time.getHours()
        //假如00:09,则为23小时
        if (time.getMinutes() < 10) {
            hour--;
        }
        if (hour < 0) {
            hour = 23
        }
        return hour
    }

    function isExtra() {
        const hour = currentHourPeriod()
        var isFind = false
        data.hours.map((item) => {
            if (item.hour == hour) {
                isFind = true
            }
        })
        return !isFind
    }

    function currentHistory(item) {
        var start = item.hour
        var isYesterday = start > new Date().getHours()
        var end = start + 1
        start = (start + '').padStart(2, '0')
        end = (end + '').padStart(2, '0')
        return <View className="current_history_item">
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <Text className="h24" style={{ color: MainColorType.g02, lineHeight: rpxToPx(36) + 'px' }}>{start}:00-{end}:00</Text>
                {
                    item.is_extra && <Text style={{ color: getThemeColor('SLEEP') }}>is Extra</Text>
                }
                <Text className="h24 bold"><Text className="h34 bold">{item.real_steps}</Text> / {item.target_steps} steps</Text>
                <View style={{
                    height: rpxToPx(18), flexShrink: 0,

                }} />
            </View>

            {
                item.status == 'MISSED' && <Text className="missed">Missed</Text>
            }
            {
                item.status == 'SEDENTARY' && <IconSit width={rpxToPx(44)} color={MainColorType.g02} />
            }
            {
                item.status == 'ACTIVE' && <IconActive width={rpxToPx(44)} color={MainColorType.active} />
            }
            <View className="border_footer_line" />
        </View>
    }


    function activeHour() {


        return <View className="summary">
            <View className="summary_header">
                <Text className="h34 bold">Last {hours.length} Hour{hours.length == 1 ? '' : 's'}</Text>
                <View className="border_footer_line" />
            </View>
            {
                !hideCurrentRecent && <View className="summary_content2">
                    {
                        hours.map((item, index) => {
                            if (index >= 3 && !moreActive) return <View key={index} />
                            return <View key={index}>
                                {
                                    currentHistory(item)
                                }
                            </View>
                        })
                    }
                    {
                        hours.length > 3 && <View className="recent_btn_bg">
                            <View style={{ height: rpxToPx(68), minWidth: rpxToPx(200), display: 'flex' }}>
                                <NewButton
                                    onClick={() => {
                                        setMoreActive(!moreActive)
                                    }}
                                    type={NewButtonType.link}
                                    fontSize={rpxToPx(24)}
                                    title={moreActive ? '收起' : `展开剩余${hours.length - 3}条`}
                                    btnStyle={{ minWidth: rpxToPx(170) }}
                                />
                            </View>
                            <View className="border_footer_line" />
                        </View>
                    }
                </View>
            }
            {
                hours.length == 0 && <View className="no_current">
                    <Text>No Active Hours Yet.</Text>
                    <View className="border_footer_line" />
                </View>
            }


        </View>
    }

    function formatTimeInterval(startTimestamp, endTimestamp) {
        // 计算时间间隔（以秒为单位）
        const intervalSeconds = Math.floor((endTimestamp - startTimestamp) / 1000);

        // 处理负值的情况
        if (intervalSeconds < 0) {
            throw new Error("End timestamp must be greater than start timestamp");
        }

        // 如果时间间隔大于1小时
        if (intervalSeconds >= 3600) {
            const hours = Math.floor(intervalSeconds / 3600);
            const minutes = Math.floor((intervalSeconds % 3600) / 60);
            const seconds = intervalSeconds % 60;

            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        } else {
            // 如果时间间隔小于1小时
            const minutes = Math.floor(intervalSeconds / 60);
            const seconds = intervalSeconds % 60;

            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
    }

    function consoleFooter() {
        if (isExtra()) {
            var now = new Date()
            var target = new Date()
            target.setHours(data.hours[0].hour)
            target.setMinutes(50)
            target.setSeconds(0)
            target.setMilliseconds(0)
            var timestamp = target.getTime()
            if (now.getTime() > timestamp) {
                timestamp += 24 * 3600 * 1000
            }
            return <Text className="console_footer">{formatTimeInterval(new Date().getTime(), timestamp)}</Text>
        }
        if (getStatus() == 'open') {
            if (new Date().getMinutes() < 10) {
                let time = new Date()
                time.setMinutes(10)
                time.setSeconds(0)
                time.setMilliseconds(0)

                // 获取总秒数
                const totalSeconds = Math.floor((time.getTime() - new Date().getTime()) / 1000);

                // 计算小时、分钟和秒
                // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
                const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
                const seconds = String(totalSeconds % 60).padStart(2, '0');

                return <Text className="console_footer" style={{ color: getThemeColor('ACTIVE') }}>Ending soon {minutes}:{seconds}</Text>
            }

            const pre = new Date().getTime()
            const next = new Date().getTime() + 3600 * 1000
            return <Text className="console_footer">Check In available {dayjs(pre).format('HH:50')}-{dayjs(next).format('HH:10')}</Text>
        }

        const minute = new Date().getMinutes()
        var isChecked = currentHourChecked()
        if (isChecked && (minute < 10 || minute >= 50)) {
            debugger
            let time = new Date()
            time.setMinutes(50)
            time.setSeconds(0)
            time.setMilliseconds(0)

            // 获取总秒数
            const totalSeconds = Math.floor((time.getTime() + 3600 * 1000 - new Date().getTime()) / 1000);

            // 计算小时、分钟和秒
            // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
            const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
            const seconds = String(totalSeconds % 60).padStart(2, '0');

            // return `${hours}:${minutes}:${seconds}`;
            return <Text className="console_footer">Opening soon {minutes}:{seconds}</Text>
        }

        let time = new Date()
        time.setMinutes(50)
        time.setSeconds(0)
        time.setMilliseconds(0)

        // 获取总秒数
        const totalSeconds = Math.floor((time.getTime() - new Date().getTime()) / 1000);

        // 计算小时、分钟和秒
        // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
        const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
        const seconds = String(totalSeconds % 60).padStart(2, '0');
        return <Text className="console_footer">Opening soon {minutes}:{seconds}</Text>
    }

    function hourIndex() {
        const { time_slots } = data.period
        const str = getDuration()
        const hour = parseInt(str.substring(0, 2))

        var selItem: any = null

        time_slots.map((item) => {
            if (item.hour == hour) {
                selItem = item;
            }
        })

        return <View className="summary_status_bg">
            <StatusIndicator
                type={StatusType.normal}
                color={selItem.type == 'SLEEP' ? getThemeColor('SLEEP') : getThemeColor('ACTIVE')}
                text={`${selItem.type == 'SLEEP' ? 'SLEEP HOUR ' : 'WAKING HOUR '}${selItem.index}`}
            // fontSize={}
            // fontColor={}
            />
            {/* <View className="summary_status_point" style={{ backgroundColor: selItem.type == 'SLEEP' ? getThemeColor('SLEEP') : getThemeColor('ACTIVE') }} /> */}
            {/* <Text className="summary_status_text">{selItem.type == 'SLEEP' ? 'SLEEP HOUR ' : 'WAKING HOUR '}{selItem.index}</Text> */}
        </View>

    }

    function becomeTime() {
        var hour = new Date().getHours()
        var tHour = parseInt(getDuration().substring(0, 2))
        if (isExtra()) {
            tHour = data.hours[0].hour
        }
        if (hour > tHour) {
            return `Check in begins at ${getDuration().substring(0, 2)}:50 tomorrow`
        }
        return `Check in begins at ${getDuration().substring(0, 2)}:50`
    }

    function consolePanel() {

        if (!allowRun) {
            return <View className="move_console move_console_auth">
                <Text className="console_duration" style={{ color: '#000', fontSize: rpxToPx(34) }}>你还没有开启步数授权</Text>
                <Text className="console_open_tip">体验Move More需要您开启微信运动授权，点击下方按钮进行授权</Text>
                <View className="console_checkbtn"
                    onClick={tapLog}
                    style={{ color: '#fff', backgroundColor: getThemeColor('ACTIVE') }}>去授权</View>
            </View>
        }

        return <View className="move_console">
            <View style={{ flex: 1 }} />
            {hourIndex()}
            <Text className={isExtra() ? 'h24' : 'h34'} style={{
                color: MainColorType.g01,
                lineHeight: isExtra() ? rpxToPx(28) + 'px' : rpxToPx(42) + 'px'
            }}>{getDuration()}</Text>
            <View style={{ height: rpxToPx(12) }} />
            <Text className={isExtra() ? 'bold h50' : 'bold h34'} style={{
                color: isExtra() ? getThemeColor('SLEEP') : getThemeColor('ACTIVE'),
                lineHeight: isExtra() ? rpxToPx(60) + 'px' : rpxToPx(42) + 'px'
            }}>{
                    isExtra() ? 'Sleep well.' : getStatus() == 'open' ? `Think you've hit ${getCurrentTarget()} steps this hour?` : `Hit ${getCurrentTarget()} steps within the hour`
                }</Text>
            <View style={{ height: rpxToPx(48), }} />

            {
                isExtra() ? <NewButton type={NewButtonType.gray}
                    width={rpxToPx(502)}
                    height={rpxToPx(96)}
                    fontSize={rpxToPx(26)}
                    bold
                    // disable
                    title={becomeTime()}
                /> : getStatus() == 'open' ?
                    <NewButton type={NewButtonType.fill}
                        onClick={tapLog}
                        width={rpxToPx(502)}
                        height={rpxToPx(96)}
                        fontSize={rpxToPx(26)}
                        title="I Think So!"
                        bold
                        color={getThemeColor('ACTIVE')}
                    />
                    :
                    <NewButton type={NewButtonType.gray}
                        onClick={tapLog}
                        width={rpxToPx(502)}
                        height={rpxToPx(96)}
                        fontSize={rpxToPx(26)}
                        bold
                        // disable
                        title={becomeTime()}
                    />
                // <View className="console_checkbtn" onClick={tapLog}>{becomeTime()}</View>
            }
            {
                consoleFooter()
            }
            <View style={{ height: rpxToPx(48) }} />


        </View>
    }

    function toolBtnText() {
        return `Upcoming (${data.hours.length - hours.length > 0 ? data.hours.length - hours.length : ''})`
    }

    function showMore() {
        showActionSheet({
            showActionSheetWithOptions: showActionSheetWithOptions,
            title: t('health.more_actions'),
            itemList: [t('health.change_step_goal')],
            success: (res) => {
                if (res == 0) {
                    jumpPage('./move_setting_time')
                }
            }
        });

    }

    function tools() {
        return <View className="tools">
            <View style={{ width: rpxToPx(74) }} />
            <NewButton type={NewButtonType.link}
                title={toolBtnText()}
                onClick={() => {
                    jumpPage(`/_health/pages/move_schedule?hours=${JSON.stringify(data.hours)}`)
                }}
            >
                <Image className="calendar" src={require('@assets/_health/calendar.png')} />
            </NewButton>
            <NewButton type={NewButtonType.more} onClick={() => {
                showMore()
            }} />
        </View>
    }

    function summary() {
        return <View className="move_summary">

            <View className="summary_header">
                <Text className="h34 bold">Summary</Text>
                <View style={{ flex: 1 }} />
                {
                    data.last_updated && <Text style={{ color: '#b2b2b2', fontSize: 10, fontWeight: 'normal' }}>最近更新于 {dayjs(data.last_updated).format('HH:mm')}</Text>
                }

                <View className="border_footer_line" />
            </View>
            <View className="summary_content">
                <View className="summary_footer">
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Sedentary</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.sedentary_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Active</Text>
                        <Text style={{ color: getThemeColor('ACTIVE'), fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.active_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Missed</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.missed_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                </View>
                <View className="summary_footer" style={{ marginTop: rpxToPx(48) }}>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Steps</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_steps}</Text> / {data.stat.target_steps}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Calories</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_calories}</Text> / {data.stat.target_calories}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Distance</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_distance}</Text> / {data.stat.target_distance}</Text>
                    </View>
                </View>
            </View>

        </View>
    }

    function goDetail(item) {
        jumpPage('./move_detail?id=' + item.id)
    }

    function historyDate(item, index) {
        if (index == 0) {
            if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
                return '今天'
            }
            if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
                return '昨天'
            }
            return dayjs(item.timestamp).format('DD')
        }
        if (dayjs(item.timestamp).format('MM-DD') ==
            dayjs(list[index - 1].timestamp).format('MM-DD')) {
            return ''
        }
        if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
            return '今天'
        }
        if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
            return '昨天'
        }
        return dayjs(item.timestamp).format('DD')
    }

    function historyMonth(item, index) {
        if (index == 0) {
            if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
                return ''
            }
            if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
                return ''
            }
            return dayjs(item.timestamp).format('MMM')
        }
        if (dayjs(item.timestamp).format('MM-DD') ==
            dayjs(list[index - 1].timestamp).format('MM-DD')) {
            return ''
        }
        if (global.language == 'zh' && TimeFormatter.isToday(item.timestamp)) {
            return ''
        }
        if (global.language == 'zh' && TimeFormatter.isYesterday(item.timestamp)) {
            return ''
        }
        return dayjs(item.timestamp).format('MMM')
    }

    if (!loaded || !loadAuth) return <View />
    return <StickyDateList onRefresherRefresh={() => {
        setIsPulling(true)
        setPage(1)
        getMovesHistory(1)
    }} isPulling={isPulling}
        onScroll={onScroll}
        showDate={showDate}
        date={date}
        loadMore={more}>

        <View style={{ display: 'flex', flexDirection: 'column' }}>
            <NewHeader type={NewHeaderType.left} title="Move Every Hour" />
            {
                consolePanel()
            }
            {
                tools()
            }
            {
                summary()
            }
            {
                activeHour()
            }

            {
                list.length > 0 && <View className="history">
                    <View className="history_header">
                        <Text className="h50 bold">{t('health.recents')}</Text>
                    </View>
                    {
                        list.map((item, index) => {
                            return <View key={index} id={`history-${index}`} className="history_item" onClick={() => goDetail(item)}>
                                {/* <Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text> */}
                                <View className="cell_date" >
                                    <View className="h42 bold" style={{ lineHeight: rpxToPx(60) + 'px' }}>{historyDate(item,index)}</View>
                                    <View className="h24 bold" style={{ marginLeft: rpxToPx(6), marginTop: rpxToPx(13), lineHeight: rpxToPx(47) + 'px' }}>{historyMonth(item,index)}</View>
                                </View>
                                <View className="history_item_detail_bg">
                                    <IconActive width={rpxToPx(32)} color={MainColorType.active} />
                                    <Text style={{ fontSize: rpxToPx(26), marginLeft: rpxToPx(16) }}> Hours Active {item.active_hours} · Total Steps {item.stat.real_steps}</Text>
                                </View>
                                {/* <View className="border_footer_line" /> */}
                            </View>
                        })
                    }
                </View>
            }
            <View style={{backgroundColor:'#fff',height:rpxToPx(40),flexShrink:0}}/>
            <ListFooter noMore={(list.length > 0) && (total == list.length)} />


        </View>
    </StickyDateList>
}