taro/src/features/health/MainConsole.tsx

import { WindowStatusType, WindowType } from "@/utils/types";
import { View, Text, Image, Swiper, SwiperItem } from "@tarojs/components";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import './MainConsole.scss'
import { jumpPage } from "../trackTimeDuration/hooks/Common";
import Modal from "@/components/layout/Modal.weapp";
import { MainColorType } from "@/context/themes/color";
import ConsolePicker from "../trackTimeDuration/components/ConsolePicker";
import { clockTimes, delRecord, getLabelsEvent, makeDone, updateEventDuration, updateFast, updateSchedule, updateTarget } from "@/services/health";
import TimePicker from "../common/TimePicker";
import showActionSheet from "@/components/basic/ActionSheet";
import { rpxToPx } from "@/utils/tools";
import { setMode, setShowActionTip } from "@/store/health";
import { getCountownTime, getDuration, getScenario, getThemeColor, getWindowStatus } from "./hooks/health_hooks";
import { IconActive, IconArrow, IconCircle, IconClose, IconMiss, IconMore, IconNotification, IconNotificationOff, IconSwitch } from "@/components/basic/Icons";
import DurationPicker from "@/_health/components/duration_picker";
import Taro from "@tarojs/taro";
import { systemLocation } from "@/services/common";
import { TimeFormatter } from "@/utils/time_format";
import { clearLocation } from "@/services/user";
import OnBoard from "@/_health/components/onboard";
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import showAlert from "@/components/basic/Alert";
import { useTranslation } from "react-i18next";
import Cell from "@/_health/base/cell";
import ConsoleCell from "@/_health/components/console_cell";
import IconTitleCell from "@/_health/components/icon_title_cell";
import StatusIndicator, { StatusType } from "@/_health/base/status_indicator";
import AddLabel from "@/_health/components/add_label";

let useNavigation;
let min = 0
let max = 0
let defaultTimestamp = 0

let lastFastSleepStatus = ''


if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function MainConsole(props: { type: WindowType }) {
    const health = useSelector((state: any) => state.health);
    const user = useSelector((state: any) => state.user);
    const [durationPicker, setDurationPicker] = useState(false)
    const [btnDisable, setBtnDisable] = useState(false)
    const [selItem, setSelItem] = useState<any>(null)
    const [hideGuideTip, setHideGuideTip] = useState(false)
    const [hideErrorTip, setHideErrorTip] = useState(false)
    const [labels, setLabels] = useState<any>([])
    const [showModal, setShowModal] = useState(false)


    const [hideEatArchiveTip, setHideEatArchiveTip] = useState(false)
    const [hideActiveArchiveTip, setHideActiveArchiveTip] = useState(false)
    const [hideFastTip, setHideFastTip] = useState(false)
    const [hideSleepTip, setHideSleepTip] = useState(false)
    const { t } = useTranslation()
    const dispatch = useDispatch()

    let navigation, showActionSheetWithOptions;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        getLabelsEvent({ window: 'ACTIVE' }).then(res => {
            setLabels((res as any).labels)
        })
    }, [])

    useEffect(() => {
        if (health.fast_with_sleep.status == 'OG2_MISALIGNED' || health.fast_with_sleep.status == 'OG2_NO1') {
            if (lastFastSleepStatus != health.fast_with_sleep.status) {
                setHideErrorTip(false)
            }
        }
        lastFastSleepStatus = health.fast_with_sleep.status

    }, [health.fast_with_sleep.status])

    global.chooseLocation = () => {
        chooseLocation()
    }

    global.postMomentSuccess = () => {
        if (health.mode == 'ACTIVE') {
            setHideActiveArchiveTip(false)
            global.hideActiveArchiveTip = false
        }
        else {
            setHideEatArchiveTip(false)
            global.hideEatArchiveTip = false
        }
    }

    global.postFastBeginSuccess = () => {
        setHideFastTip(false)
        global.hideFastTip = false
    }

    global.postSleepBeginSuccess = () => {
        setHideSleepTip(false)
        global.hideSleepTip = false
    }

    function edit(item) {
        if (item.scenario != 'FAST' && item.scenario != 'SLEEP') {
            return
        }

        if (item.action == 'NA' || item.action == 'POST_MOMENT' || 'SLEEP_WAKE_UP' == item.action) {
            return;
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        console.log(item)
        setSelItem(item)
    }


    function record(item) {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }

        if ((item.event == 'FAST_START' || item.event == 'FAST_END') && health.long_fast.status == 'OG') {
            showAlert({
                title: '长断食进行中',
                content: '当前有一个正在进行的长断食记录，要转换为间歇性断食吗？',
                showCancel: true,
                cancelText: '取消',
                confirmText: '确定',
                confirm: () => {
                    changeToIF();
                }
            })
            return
        }


        setSelItem(item)

        switch (item.action) {
            case 'START':
                {


                    jumpPage(`/_health/pages/log_time?index=${health.mode == 'FAST' ? 0 : 1}&single=1&is_start=1&window=${health.mode}`)
                }
                return;
            case 'END':
                {

                    var sceniaro = getScenario(health.windows, health.mode)

                    jumpPage(`/_health/pages/log_time?type=home&index=${health.mode == 'FAST' ? 3 : 2}&single=${sceniaro.status == 'OG' ? 1 : 0}&is_start=0&window=${health.mode}`)
                }
                return;
            case 'MARK_DONE':
                {
                    setBtnDisable(true)
                    clockTimes({
                        check_items: [{
                            schedule_id: item.schedule_id,
                            date: dayjs().format('YYYYMMDD'),
                            timestamp: new Date().getTime()
                        }]
                    }).then(res => {
                        Taro.showToast({
                            title: '操作成功',
                            icon: 'success'
                        })
                        global.refreshWindow()
                        global.refreshHistory()
                    }).catch(e => {
                    })
                }
                return;

        }
        jumpPage(`/_health/pages/add_moment?moment=${JSON.stringify(item)}&title=${item.title}&schedule_id=${item.schedule_id}&event_id=${item.event_id}`)
    }

    function operateTitle(item) {
        return t('health.log')
        // switch (item.action) {
        //     case 'START':
        //     case 'END':
        //         return '打卡'
        //     case 'MARK_DONE':
        //         return 'Action'
        // }
        // return '记录'
    }

    function itemTitle(item: any) {
        // if (health.mode == 'DAY' || health.mode == 'NIGHT') {
        //     return item.title
        // }
        if (item.real) {
            return TimeFormatter.dayjsFormat(item.real.timestamp)
            // return dayjs(item.real.timestamp).format('MM-DD HH:mm')
        }
        if (!item.target || !item.target.timestamp) {
            return item.time_label
        }
        return TimeFormatter.dayjsFormat(item.target.timestamp)
        // return dayjs(item.target.timestamp).format('MM-DD HH:mm')
    }

    function itemValue(item: any) {
        let themeColor: any = getThemeColor(health.mode)
        // const scenario = getScenario(health.windows, health.mode)
        // if (item.action == 'END' && !scenario.real) {
        //     themeColor = MainColorType.g01
        // }
        if (item.target && item.target.timestamp >= new Date().getTime()) {
            themeColor = MainColorType.g02
        }
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            return null
        }
        if (item.action && item.action != 'NA') {
            if (health.mode == 'FAST' || health.mode == 'SLEEP') {
                if (item.action == 'POST_MOMENT') {
                    return <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
                }

            }
            // else if (health.mode == 'ACTIVE' && item.action == 'POST_MOMENT') {
            //     return <NewButton
            //         color={themeColor}
            //         type={NewButtonType.border}
            //         title={operateTitle(item)}
            //         width={rpxToPx(128)}
            //         height={rpxToPx(72)}
            //         bold={true}
            //         onClick={() => record(item)} />
            // }
            return <NewButton
                color={themeColor}
                type={item.target && item.target.timestamp >= new Date().getTime() ? NewButtonType.alpha2 : NewButtonType.alpha}
                title={operateTitle(item)}
                width={rpxToPx(128)}
                height={rpxToPx(72)}
                bold={true}
                onClick={() => record(item)} />
        }

        if (item.action && item.action == 'NA') {
            // if (health.mode == 'FAST' || health.mode == 'SLEEP') {
            if (item.moment && item.moment.media && item.moment.media.length > 0) {
                return <Image
                    src={item.moment.media[0].url}
                    mode="aspectFill"
                    className="console_item_img" />
            }
            else {
                return <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
            }

            // }
        }

        return <View />
    }

    function canTap(item) {
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            return false;
        }
        if (!user.isLogin) {
            return false
        }
        if (!item.event_id) {
            return false
        }
        return true
    }

    function tapTimeline(item, inex) {
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            return;
        }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        if (!item.event_id) {
            return
        }
        jumpPage(`/_health/pages/timeline_detail?event_id=${item.event_id}&schedule_id=${item.schedule_id}`)
    }

    function processIcon(index) {
        const time = new Date().getTime()
        const scenario = getScenario(health.windows, health.mode)
        const timeline = scenario.timeline[index]
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            if (time > timeline.target.timestamp) {
                return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/checked.png')} />
            }
            return <IconCircle width={rpxToPx(32)} color={MainColorType.g02} />
            // return <View style={{width:rpxToPx(26),height:rpxToPx(26),borderRadius:rpxToPx(13),backgroundColor:'#fff'}}/>
        }
        // if (timeline.target.timestamp < new Date().getTime()) {
        //     return <IconMiss color="#fff" width={rpxToPx(24)} />
        // }
        if (timeline.real) {
            return <Image style={{ width: rpxToPx(24), height: rpxToPx(24) }} src={require('@assets/_health/checked.png')} />
        }
        return <View style={{ width: rpxToPx(26), height: rpxToPx(26), borderRadius: rpxToPx(13), backgroundColor: '#fff' }} />
        // return timeline.reminder ? <IconNotification color="#fff" width={rpxToPx(24)} /> : <IconNotificationOff color="#fff" width={rpxToPx(24)} />
    }

    function timelineItem(item: any, index: number, count: number) {
        var strColor = ''
        if (item.real) {
            strColor = getThemeColor(health.mode)
        }
        else if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            const time = new Date().getTime()
            const scenario = getScenario(health.windows, health.mode)
            const timeline = scenario.timeline[index]
            if (time > timeline.target.timestamp) {
                strColor = getThemeColor(health.mode)
            }
            else {
                strColor = 'transparent'
            }
        }
        else {
            strColor = 'transparent'
        }
        function statusView() {
            return <StatusIndicator type={StatusType.console}
                color={strColor}
                fontColor={item.real ? getThemeColor(health.mode) : MainColorType.g01}
                bold={item.real ? true : false}
                // color={new Date().getTime()<item.target.timestamp?MainColorType.g02:getThemeColor(health.mode)}
                text={itemTitle(item)}
                fontSize={rpxToPx(24)}
            >{
                    (item.real || (health.mode == 'DAY' || health.mode == 'NIGHT')) ? processIcon(index) : <IconCircle width={rpxToPx(32)} color={MainColorType.g02} />
                }</StatusIndicator>
        }
        return <ConsoleCell
            status={statusView()}
            title={(item.moment && item.moment.title) ? item.moment.title : item.title}
            description={item.moment ? item.moment.description : null}
            right={itemValue(item)}
            disable={!canTap(item)}
            onClick={() => tapTimeline(item, index)}
            showLine={true}
            fullLine={count - 1 == index}
        />
    }

    function changeToIF() {
        updateFast({ fast_type: 'IF' }).then(res => {
            global.refreshWindow()
        })
    }

    function actionList() {
        var list: any = []
        switch (health.mode) {
            case 'ACTIVE':
                {
                    if (!health.finish_setup) {
                        list.push(t('health.finish_setup'))
                    }
                    list.push(t('health.log_extra_activity'))
                    var scenario = getScenario(health.windows, 'ACTIVE')
                    if (scenario.status != 'WFS') {
                        list.push(t('health.mark_done'))
                    }


                    if (health.finish_setup) {
                        list.push(t('health.edit_schedule'))
                    }
                }
                break;
            case 'EAT':
                {
                    if (!health.finish_setup) {
                        list.push(t('health.finish_setup'))
                    }
                    list.push(t('health.log_extra_meal'))
                    var scenario = getScenario(health.windows, 'EAT')
                    if (scenario.status != 'WFS') {
                        list.push(t('health.mark_done'))
                    }
                    if (health.finish_setup) {
                        list.push(t('health.edit_schedule'))
                    }
                }
                break;
            case 'FAST':
            case 'SLEEP':
                {
                    if (!health.finish_setup) {
                        list.push(t('health.finish_setup'))
                    }
                    const obj = getScenario(health.windows, health.mode)
                    if (obj.window_id) {
                        list.push(t('health.delete_current_record'))
                    }
                    if (health.finish_setup) {
                        list.push(t('health.edit_schedule'))
                    }
                }
                break;
            case 'DAY':
            case 'NIGHT':
                {
                    list = [t('health.change_location'), t('health.clear_location')]
                }
                break;
        }
        return list;
    }

    function more() {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }

        var strTitle = ''
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            strTitle = getLocation()
        }
        else if (health.mode == 'EAT' || health.mode == 'ACTIVE') {
            const scenario = getScenario(health.windows, health.mode)
            if (scenario.archive_timestamp) {
                /*"Today's logs will be archived at 23:59."
"Today's logs will be archived at 03:10 tomorrow."

"今日记录将于 23:59 归档"
"今日记录将于明天 23:59 归档"*/
                var today = new Date().getDate()
                var date = new Date(scenario.archive_timestamp).getDate()
                strTitle = `今日记录将于${today == date ? '' : '明天'} ${dayjs(scenario.archive_timestamp).format('HH:mm')} 归档`
            }
            else {
                strTitle = t('health.more_actions')
            }
        }
        else {
            strTitle = t('health.more_actions')
        }



        showActionSheet({
            showActionSheetWithOptions: showActionSheetWithOptions,
            title: strTitle,
            itemList: actionList(),
            success: (res) => {
                tapActionSheet(res)
            }
        });
    }

    function getLocation() {
        var scenario = getScenario(health.windows, health.mode)
        if (!scenario.extra.choose_location) {
            return t('health.more_actions')
        }
        return `${getCity()}${Math.abs(parseInt(scenario.extra.lat))}°${parseInt(scenario.extra.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(scenario.extra.lng))}°${parseInt(scenario.extra.lng) < 0 ? 'W' : 'E'}`
    }

    function getCity() {
        var city = ''
        var scenario = getScenario(health.windows, health.mode)
        if (scenario.extra.address) {
            if (scenario.extra.address.city.length > 0) {
                city = scenario.extra.address.city
            }
            else if (scenario.extra.address.province.length > 0) {
                city = scenario.extra.address.province
            }
            else if (scenario.extra.address.country.length > 0) {
                city = scenario.extra.address.country
            }
            else {
                return ''
                // city = t('feature.track_time_duration.third_ring.unknown')
            }
        }
        else {
            return ''
            // city = t('feature.track_time_duration.third_ring.unknown')
        }
        return city +' | '
    }

    function tapActionSheet(index) {
        var title = actionList()[index]
        switch (title) {
            case t('health.finish_setup'):
                tapGuide();
                break;
            case t('health.log_extra_activity'):
                jumpPage(`/_health/pages/add_moment?title=&is_temp=${true}`)
                break;
            case t('health.log_extra_meal'):
                jumpPage(`/_health/pages/add_moment?title=加餐&is_temp=${true}`)
                break;
            case t('health.mark_done'):
                tapMakeDone()
                break
            case t('health.edit_schedule'):
                jumpPage('/_health/pages/schedules?mode=' + health.mode)
                break
            case t('health.delete_current_record'):
                {
                    const obj = getScenario(health.windows, health.mode)
                    showAlert({
                        title: 'del',
                        content: '确认删除此记录?',
                        showCancel: true,
                        confirm: () => {
                            delRecord({ ids: [obj.window_id] }).then(res => {
                                global.refreshWindow()

                                if ((res as any).status_change) {
                                    if ((res as any).status_change.previous != (res as any).status_change.current) {
                                        //灵动岛弹窗
                                        setTimeout(() => {
                                            dispatch(setShowActionTip({
                                                isShow: true,
                                                isCompleted: false
                                            }))
                                        }, 1000)

                                    }
                                }
                            })
                        }
                    })
                }
                break;
            case t('health.change_location'):
                chooseLocation()
                break
            case t('health.clear_location'):
                tapClearLocation()
                break
        }
    }

    function tapGuide() {
        jumpPage('/_health/pages/guide_begin')
        // showAlert({
        //     title:'设置引导弹窗',
        //     content:'设置引导描述',
        //     showCancel:true,
        //     cancelText:'稍后',
        //     confirmText:'设置',
        //     cancel:()=>{

        //     },
        //     confirm:()=>{
        //         jumpPage('/_health/pages/guide_fast')
        //     }
        // })
    }

    function tapMakeDone() {
        makeDone(getScenario(health.windows, health.mode).window_id).then(res => {
            global.refreshWindow()
            global.refreshHistory()

            if ((res as any).status_change) {
                if ((res as any).status_change.previous != (res as any).status_change.current) {
                    //灵动岛弹窗
                    setTimeout(() => {
                        dispatch(setShowActionTip({
                            isShow: true,
                            isCompleted: false
                        }))
                    }, 1000)

                }
            }
        })
    }

    function detail() {
        const { day, night } = health.windows.night_day
        const { fast, eat } = health.windows.fast_eat
        const { sleep, active } = health.windows.sleep_active
        let list: any = []
        switch (health.mode) {
            case 'DAY':
                list = day.timeline
                if (day.extra.choose_location == false) {
                    return <OnBoard title={t('health.sunrise_to_sunset')}
                        desc={t('health.rise_to_set_desc')}
                        btnTitle={t('health.choose_location')}
                        onClick={chooseLocation}
                    />
                }
                break;
            case 'NIGHT':
                list = night.timeline
                if (night.extra.choose_location == false) {
                    return <OnBoard title={t('health.sunset_to_sunrise')}
                        desc={t('health.set_to_rise_desc')}
                        btnTitle={t('health.choose_location')}
                        onClick={chooseLocation}
                    />
                }
                break;
            case 'FAST':
                list = fast.timeline
                break;
            case 'EAT':
                list = eat.timeline
                break;
            case 'SLEEP':
                list = sleep.timeline
                break;
            case 'ACTIVE':
                list = active.timeline
                if (active.onboard == false && active.status == 'WFS') {
                    var seconds = new Date().getSeconds()

                    // return <Swiper autoplay>
                    //     {
                    //         list.map((item, index) => {
                    //             return <SwiperItem key={index}>
                    //                 <OnBoard title={item.title}
                    //                     desc={item.time_label}
                    //                     btnTitle="Action"
                    //                     onClick={() => {
                    //                         if (!user.isLogin) {
                    //                             jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                    //                             return
                    //                         }
                    //                         jumpPage('/_health/pages/active_plan?schedule=' + JSON.stringify(item))
                    //                     }}
                    //                 />
                    //             </SwiperItem>
                    //         })
                    //     }
                    // </Swiper>
                    return <OnBoard title={list[0].title}
                        desc={list[0].time_label}
                        btnTitle="Create My Activities"
                        onClick={() => {
                            if (!user.isLogin) {
                                jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                                return
                            }
                            if (!health.finish_setup) {
                                showAlert({
                                    title: '',
                                    content: '在整个日程中，创建您的活动安排',
                                    showCancel: true,
                                    cancelText: '稍后',
                                    confirmText: '立即设置',
                                    cancel: () => {
                                        global.showIndexAddActive(labels)
                                    },
                                    confirm: () => {
                                        tapGuide()
                                    }
                                })
                                return
                            }
                            global.showIndexAddActive(labels)
                            // setShowModal(true)
                            // jumpPage('/_health/pages/active_plan?schedule=' + JSON.stringify(list.length > 0 ? list[0] : '{}'))
                        }}
                    />
                }
                break;
        }

        return <View>
            {
                list.map((item, index) => {

                    return timelineItem(item, index, list.length)
                })
            }
        </View>
    }

    function switchText() {
        switch (health.mode) {
            case 'FAST':
                return t('health.switch_to', { scenario: t('health.eat') })
            case 'EAT':
                return t('health.switch_to', { scenario: t('health.fast') })
            case 'DAY':
                return t('health.switch_to', { scenario: t('health.night') })
            case 'NIGHT':
                return t('health.switch_to', { scenario: global.language == 'en' ? 'Daylight' : '白天' })//'Switch to Daylight'
            case 'SLEEP':
                return t('health.switch_to', { scenario: t('health.active') })
            case 'ACTIVE':
                return t('health.switch_to', { scenario: t('health.sleep') })

        }
        return ''
    }

    function tapSwitchBtn() {
        switch (health.mode) {
            case 'FAST':
                dispatch(setMode('EAT'));
                break
            case 'EAT':
                dispatch(setMode('FAST'));
                break
            case 'DAY':
                dispatch(setMode('NIGHT'));
                break
            case 'NIGHT':
                dispatch(setMode('DAY'));
                break
            case 'SLEEP':
                dispatch(setMode('ACTIVE'));
                break
            case 'ACTIVE':
                dispatch(setMode('SLEEP'));
                break

        }
    }

    function tapClearLocation() {
        Taro.showModal({
            title: '提示',
            content: '确认清除位置数据?',
            success: function (res) {
                if (res.confirm) {
                    clearLocation().then(res => {
                        global.refreshWindow()
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })
    }

    function chooseLocation() {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        var scenario = getScenario(health.windows, health.mode)
        Taro.chooseLocation({
            latitude: scenario.extra.choose_location ? parseFloat(scenario.extra.lat + '') : undefined,
            longitude: scenario.extra.choose_location ? parseFloat(scenario.extra.lng + '') : undefined,
            success: function (res) {
                uploadLocation(res)
            },
            fail(res) {
                Taro.showToast({
                    title: '位置修改失败!\n请重新选择就近位置',
                    icon: 'none'
                })
            },
            complete(res) {

            }
        })
    }

    function uploadLocation(res) {
        var today = new Date()
        var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
        var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000 * 5)
        var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
        var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`

        systemLocation({
            lat: res.latitude,
            lng: res.longitude,
            name: res.name,
            address: res.address,
            date_start: strYesterday,
            date_end: strTomorrow,
            coordinate_system_standard: process.env.TARO_ENV == 'weapp' ? 'GCJ-02' : 'WGS-84'
        }).then(data => {
            global.refreshWindow()
        })
    }

    function updateDuration(duration) {
        setDurationPicker(false)
        const scenario = getScenario(health.windows, health.mode)
        updateEventDuration(scenario.timeline[0].event_id, duration).then(res => {
            global.refreshWindow()
        })
    }



    function timePointClass() {
        if (getWindowStatus(health.windows, health.mode) == WindowStatusType.process) {
            return 'time_point time_point_animation'
        }
        return 'time_point'
    }

    function fastWithSleepStatus() {
        const { status } = health.fast_with_sleep
        var str = ''
        switch (status) {
            case 'OG1':
                str = t('health.fast_before_bed')
                break;
            case 'OG2_NO1':
                str = t('health.fast_missing')
                break;
            case 'OG2':
                str = t('health.fast_while_sleep')
                break;
            case 'OG2_MISALIGNED':
                str = t('health.misaligned')
                break;
            case 'OG3':
                str = t('health.fast_after_sleep')
                break
        }
        return <View className="H26" style={{ color: MainColorType.g02 }}>{str}</View>
    }

    function longFastStatus() {
        const { status } = health.long_fast
        return <View className="h26" style={{ color: MainColorType.g02 }}>{status == 'OG' ? 'In progress' : ''}</View>
    }

    function showMoreBtn() {
        if (health.mode == 'DAY' || health.mode == 'NIGHT') {
            if (!getScenario(health.windows, health.mode).extra.choose_location) {
                return false
            }
        }
        return true;
    }

    function getTitleColor() {
        if (getWindowStatus(health.windows, health.mode) == WindowStatusType.upcoming) {
            return MainColorType.g01
        }
        const scenario = getScenario(health.windows, health.mode)
        if (scenario.status == 'OG') {
            return getThemeColor(health.mode)
        }
        return '#000'
    }

    function polarCheck() {
        const scenario = getScenario(health.windows, health.mode)
        if (health.mode == 'DAY' && scenario.extra && scenario.extra.is_polar_day) {
            return <View className="console_tag_bg" style={{ backgroundColor: getThemeColor(health.mode) }}>
                <Image src={global.language == 'en' ? require('@assets/_health/tag_polar.png') : require('@assets/_health/tag_polar_day.png')} className="console_tag_img" />
            </View>
        }
        if (health.mode == 'NIGHT' && scenario.extra && scenario.extra.is_polar_night) {
            return <View className="console_tag_bg" style={{ backgroundColor: getThemeColor(health.mode) }}>
                <Image src={global.language == 'en' ? require('@assets/_health/tag_polar.png') : require('@assets/_health/tag_polar_night.png')} className="console_tag_img" />
            </View>
        }

    }

    function ogTime() {
        return <View className="time_count h30 bold" style={{
            backgroundColor: getThemeColor(health.mode)
        }}>
            {/* <View className="console_tag_bg" style={{backgroundColor:getThemeColor(health.mode)}}>
                <Image src={global.language=='en'?require('@assets/_health/tag_log.png'):require('@assets/_health/tag_record.png')} className="console_tag_img"/>
            </View> */}
            {
                getCountownTime(health.windows, health.mode)
            }
        </View>
    }

    function markDoneTip() {
        if (health.mode == 'DAY' && health.mode != 'NIGHT') return
        var scenario = getScenario(health.windows, health.mode)
        if (scenario.status != 'OG') return

        if (health.mode == 'EAT' && hideEatArchiveTip) return
        if (health.mode == 'ACTIVE' && hideActiveArchiveTip) return
        if (health.mode == 'FAST' && hideFastTip) return
        if (health.mode == 'SLEEP' && hideSleepTip) return

        function tipContent() {
            var strTime = ''
            var today = new Date().getDate()
            var date = new Date(scenario.archive_timestamp).getDate()
            if (today == date) {
                strTime = t('health.today_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
            }
            else {
                strTime = t('health.tomorrow_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
            }
            switch (health.mode) {
                case 'FAST':
                    if (global.language == 'en') {
                        return <Text className="h28">After you log <Text className="italic">End Fast</Text>,{'\n'}
                            Your moments <Text className="bold">today</Text> will appear in <Text className="bold">Recents</Text>.</Text>
                    }
                    return <Text className="h28">在您记录完 <Text className="italic">结束断食</Text> 之后，{'\n'}
                        您<Text className="bold">今天</Text>的时刻将出现在<Text className="bold">最近</Text>中。</Text>
                case 'SLEEP':
                    if (global.language == 'en') {
                        return <Text className="h28">After you log <Text className="italic">Wake Up</Text>,{'\n'}
                            Your moments <Text className="bold">today</Text> will appear in <Text className="bold">Recents</Text>.</Text>
                    }
                    return <Text className="h28">在您记录完 <Text className="italic">起床</Text> 之后，{'\n'}
                        您<Text className="bold">今天</Text>的时刻将出现在<Text className="bold">最近</Text>中。</Text>
                case 'EAT':
                    if (global.language == 'en') {
                        return <Text className="h28"><Text style={{ color: MainColorType.eat }}>{strTime}</Text> or after you <Text className="italic">Mark Done</Text>,{'\n'}
                            Your moments <Text className="bold">today</Text> will appear in <Text className="bold">Recents</Text>.</Text>
                    }
                    return <Text className="h28"><Text style={{ color: MainColorType.eat }}>{strTime}</Text> 或在您 <Text className="italic">标记完成</Text> 之后，{'\n'}
                        您<Text className="bold">今天</Text>的时刻将出现在<Text className="bold">最近</Text>中。</Text>
                case 'ACTIVE':
                    if (global.language == 'en') {
                        return <Text className="h28"><Text style={{ color: MainColorType.active }}>{strTime}</Text> or after you <Text className="italic">Mark Done</Text>,{'\n'}
                            Your moments <Text className="bold">today</Text> will appear in <Text className="bold">Recents</Text>.</Text>
                    }
                    return <Text className="h28"><Text style={{ color: MainColorType.active }}>{strTime}</Text> 或在您 <Text className="italic">标记完成</Text> 之后，{'\n'}
                        您<Text className="bold">今天</Text>的时刻将出现在<Text className="bold">最近</Text>中。</Text>
            }
            return <Text className="h28">1</Text>
        }


        return <View className="mark_done_tip" style={{
            backgroundColor: getThemeColor(health.mode) + '1A'
        }}>
            <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
                {
                    tipContent()
                }
            </View>
            <NewButton type={NewButtonType.img} btnStyle={{
                height: rpxToPx(32),
                width: rpxToPx(32)
            }} onClick={() => {
                switch (health.mode) {
                    case 'FAST':
                        setHideFastTip(true)
                        break;
                    case 'EAT':
                        setHideEatArchiveTip(true)
                        break;
                    case 'SLEEP':
                        setHideSleepTip(true)
                        break
                    case 'ACTIVE':
                        setHideActiveArchiveTip(true)
                        break
                }
            }}>
                <IconClose color={MainColorType.g03} width={rpxToPx(32)} height={rpxToPx(32)} />
            </NewButton>
        </View>
        // var strTitle = ''
        // if (scenario.archive_timestamp) {
        //     var today = new Date().getDate()
        //     var date = new Date(scenario.archive_timestamp).getDate()
        //     if (today == date) {
        //         strTitle = t('health.tonight_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
        //     }
        //     else {
        //         strTitle = t('health.tomorrow_at', { time: dayjs(scenario.archive_timestamp).format('HH:mm') })
        //     }
        // }

        // return <View className="mark_done_tip" style={{
        //     backgroundColor: getThemeColor(health.mode) + '1A'
        // }}>
        //     <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
        //         <Text className="h24 bold" style={{ color: getThemeColor(health.mode) }}>{strTitle}</Text>
        //         <Text className="h24 bold">{t('health.all_logs', { scenario: health.mode == 'EAT' ? t('health.meals') : t('health.activities') })}<Text style={{ fontWeight: 'normal' }}>{t('health.will_collected')}</Text>{t('health.journal_end')}</Text>
        //     </View>
        //     <NewButton type={NewButtonType.img} btnStyle={{
        //         height: rpxToPx(32),
        //         width: rpxToPx(32)
        //     }} onClick={() => {
        //         if (health.mode == 'EAT') {
        //             setHideEatArchiveTip(true)
        //         }
        //         else {
        //             setHideActiveArchiveTip(true)
        //         }
        //     }}>
        //         <IconClose color={MainColorType.g01} width={rpxToPx(32)} height={rpxToPx(32)} />
        //     </NewButton>
        // </View>
    }

    if (health.mode=='') return <View />

    return <View className="main-console-bg">
        <Image className="main_arrow" src={require('@assets/images/center_arrow.png')} />
        <View className="main_summary">
            <View className="main_summary_time h30 bold" style={{
                marginTop: rpxToPx(14),
            }} >
                {polarCheck()}
                {getScenario(health.windows, health.mode).status == 'OG' ? ogTime() : getDuration(health.windows, health.mode)}
            </View>
            <Text className="main_summary_duration g01"
                style={{
                    marginBottom: rpxToPx(30)
                }}>{getScenario(health.windows, health.mode).status == 'OG' ? getDuration(health.windows, health.mode) : getCountownTime(health.windows, health.mode)}
            </Text>
            <View className="border_footer_line" />
        </View>
        <View style={{ backgroundColor: '#fff', width: rpxToPx(750) }}>
            {
                detail()
            }

        </View>
        <View className="main_footer2">
            <View style={{ width: rpxToPx(316), height: rpxToPx(128), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <NewButton
                    type={NewButtonType.link}
                    title={switchText()}
                    onClick={tapSwitchBtn}
                >
                </NewButton>
            </View>

            {
                showMoreBtn() && <NewButton
                    btnStyle={{
                        position: 'absolute',
                        top: rpxToPx(42),
                        right: rpxToPx(40)
                    }}
                    type={NewButtonType.more}
                    onClick={more}
                />
            }


        </View>
        {
            user.isLogin && (health.mode !='DAY' && health.mode !='NIGHT') && !hideGuideTip && !health.finish_setup && <View className="guide_tip h26" onClick={() => {
                tapGuide();
                setHideGuideTip(true)
            }}>{t('health.console_guide_tip')}
                <NewButton type={NewButtonType.img} btnStyle={{
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    bottom: 0,
                    width: rpxToPx(92)
                }} onClick={() => {
                    setHideGuideTip(true)
                }}>
                    <IconClose color={MainColorType.g03} width={rpxToPx(32)} height={rpxToPx(32)} />
                </NewButton>

            </View>
        }
        {/* {
            markDoneTip()
        } */}
        {/* {
            health.mode == 'ACTIVE' && <View>
                <View className="main_column_space" /><IconTitleCell
                    icon={<IconActive width={rpxToPx(32)} color={MainColorType.active} />}
                    title={t('health.move_more')}
                    onClick={() => {
                        jumpPage('/_health/pages/move')
                    }}
                /></View>
        } */}
        {/* {
            (health.mode == 'FAST' || health.mode == 'SLEEP') && <View >
                <View className="main_column_space" />
                <IconTitleCell
                    onClick={() => {

                        if (health.long_fast.status == 'OG') {
                            showAlert({
                                title: '长断食进行中',
                                content: '当前有一个正在进行的长断食记录，要转换为间歇性断食吗？',
                                showCancel: true,
                                cancelText: '取消',
                                confirmText: '确定',
                                confirm: () => {
                                    updateFast({ fast_type: 'IF' }).then(res => {
                                        global.refreshWindow()
                                        jumpPage('/_health/pages/fast_sleep')
                                    })
                                }
                            })
                            return
                        }
                        setTimeout(() => {
                            setHideErrorTip(true)
                        }, 1000)

                        jumpPage('/_health/pages/fast_sleep')
                    }}
                    showLine={health.mode == 'FAST'}
                    icon={<Image className="active_icon" src={require('@assets/_health/fast.png')} />}
                    title={t('health.fast_with_sleep')}
                    desc={<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                        {
                            fastWithSleepStatus()
                        }
                        {
                            !hideErrorTip && (health.fast_with_sleep.status == 'OG2_MISALIGNED' || health.fast_with_sleep.status == 'OG2_NO1') && <View style={{
                                backgroundColor: MainColorType.error,
                                width: rpxToPx(12),
                                height: rpxToPx(12),
                                borderRadius: rpxToPx(6),
                                marginLeft: rpxToPx(12),
                                marginRight: rpxToPx(0)
                            }} />
                        }
                    </View>}
                />


            </View>
        } */}
        {/* {
            health.mode == 'FAST' && <IconTitleCell
                onClick={() => {
                    jumpPage('/_health/pages/long_fast')
                }}
                icon={<Image className="active_icon" src={require('@assets/_health/fast.png')} />}
                title={t('health.long_fast')}
                desc={
                    longFastStatus()
                }
            />
        } */}
        <View className="circle" />
        {
            durationPicker && <DurationPicker
                done={(time) => {
                    updateDuration(time)
                }}
                dismiss={() => {
                    setDurationPicker(false)
                }} time={getScenario(health.windows, health.mode).target.duration} />
        }

        {
            showModal && <AddLabel labels={labels}
                window='ACTIVE'
                disMiss={() => setShowModal(false)}
                op_page='SCHEDULE_ACTIVE_SLEEP'
                // onlyCheck={true}
                // schedules={[]}
                confirm={(res) => {
                    setShowModal(false)
                    if ((res as any).result) {
                        global.refreshWindow()
                        // dispatch(setSchedules((res as any).schedules))
                        // dispatch(setFooter((res as any).footer))
                        // setList((res as any).schedules)
                        // setErrors([])
                    }
                    else {
                        jumpPage('/_health/pages/schedules?mode=' + health.mode + '&error=' + JSON.stringify(res))
                        // setList((res as any).schedules)
                        // dispatch(setFooter((res as any).footer))
                        // setErrors((res as any).error_messages ? (res as any).error_messages : [])
                    }

                }}
                color={MainColorType.active} />
        }
    </View >
}