taro/src/_health/components/fast_sleep_console.tsx

import { View, Text, Image } from "@tarojs/components";
import './fast_sleep_console.scss'
import { rpxToPx } from "@/utils/tools";
import NewButton, { NewButtonType } from "../base/new_button";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";
import showAlert from "@/components/basic/Alert";
import { IconArrow, IconCellArrow, IconNotification, IconNotificationOff } from "@/components/basic/Icons";
import { useSelector } from "react-redux";
import { delRecord } from "@/services/health";
import { TimeFormatter } from "@/utils/time_format";
import showActionSheet from "@/components/basic/ActionSheet";
import { useTranslation } from "react-i18next";
import ConsoleCell from "./console_cell";

export default function FastSleepConsole(props: { step: number, data: any, del: any }) {
    const health = useSelector((state: any) => state.health);
    let navigation, showActionSheetWithOptions;
    const { t } = useTranslation()
    function tapLogBtn(index: number) {
        const { fast, sleep, status } = props.data
        var single = 0;
        var is_start = 0;
        var window = 'FAST'

        switch (index) {
            case 0:
                {
                    single = 1;
                    is_start = 1;
                }
                break;
            case 1:
                {
                    if (status == 'OG1') {
                        single = 1;
                        is_start = 1;
                        window = 'SLEEP'
                    }
                    else {
                        single = 0;
                    }
                }
                break;
            case 2:
                {
                    if (status == 'OG2') {
                        single = 1;
                        is_start = 0;
                        window = 'SLEEP'
                    }
                    else {
                        single = 0;
                    }
                }
                break;
            case 3:
                {
                    if (status == 'OG3') {
                        single = 1;
                        is_start = 0;
                        window = 'FAST'
                    }
                    else {
                        single = 0;
                    }
                }
                break;
        }

        jumpPage(`/_health/pages/log_time?is_fast_with_sleep=1&index=${index}&initCheck=${health.fast_with_sleep.status == 'OG2_MISALIGNED' ? 1 : 0}&single=${index == 0 ? 1 : 0}&is_start=${is_start}&window=${window}`)
        /*
            const isSingle = router.params.single == '1'
    const isFast = router.params.window == 'FAST'
    const isStart = router.params.is_start == '1'
    */
    }

    function goDetail(index) {
        if (index == 0 && props.data.fast.status == 'OG') {
            const { event_id, schedule_id } = props.data.fast.timeline[0]
            jumpPage(`/_health/pages/timeline_detail?event_id=${event_id}&schedule_id=${schedule_id}`)
        }
        else if (index == 1 && (props.data.sleep.status == 'OG' || props.data.status == 'OG3')) {
            const { event_id, schedule_id } = props.data.sleep.timeline[0]
            jumpPage(`/_health/pages/timeline_detail?event_id=${event_id}&schedule_id=${schedule_id}`)
        }

    }

    function itemDisableStatus(index){
        if (index == 0 && props.data.fast.status == 'OG') {
            return false
        }
        else if (index == 1 && (props.data.sleep.status == 'OG' || props.data.status == 'OG3')) {
            return false
        }
        return true
    }

    function delConfirm() {
        const { fast, sleep } = props.data
        let array: any = []
        if (fast.window_id) {
            array.push(fast.window_id)
        }
        if (sleep.window_id) {
            array.push(sleep.window_id)
        }


        showAlert({
            title: 'del',
            content: '确认删除此记录?',
            showCancel: true,
            confirm: () => {
                delRecord(array[0], { ids: array }).then(res => {
                    global.refreshWindow()
                    props.del()
                })
            }
        })
    }

    function getIconColor(index: number, finish: boolean) {
        var color = MainColorType.g03
        if (index == 1 || index == 2) {
            color = MainColorType.sleep
        }
        else {
            color = MainColorType.fast
        }
        if (finish) {
            color = MainColorType.g03
        }

        return color;
    }

    function processIcon(item, finish, isError) {
        if (isError) {
            return <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/tip_error.png')} />
        }
        if (finish) {
            return <Image style={{ width: rpxToPx(20), height: rpxToPx(20) }} src={require('@assets/_health/checked.png')} />
        }
        if (item.timeline.reminder) {
            return <IconNotification color="#fff" width={rpxToPx(20)} />
        }
        return <IconNotificationOff color="#fff" width={rpxToPx(20)} />
    }

    function actionList() {
        var list: any = []
        if (!health.finish_setup) {
            list.push(t('health.finish_setup'))
        }
        if (props.data.status != 'WFS') {
            list.push(t('health.delete_current_record'))
        }
        if (health.finish_setup) {
            list.push(t('health.edit_schedule'))
        }
        return list
    }

    function showAction() {
        showActionSheet({
            showActionSheetWithOptions: showActionSheetWithOptions,
            title: t('health.more_actions'),
            itemList: actionList(),
            success: (res) => {
                tapActionSheet(res)
            }
        });
    }

    function tapActionSheet(index) {
        var title = actionList()[index]
        switch (title) {
            case t('health.finish_setup'):
                jumpPage('/_health/pages/guide_begin')
                break;
            case t('health.delete_current_record'):
                delConfirm()
                break;
            case t('health.edit_schedule'):
                jumpPage('/_health/pages/schedules?mode=FAST,EAT')
                break
        }
    }


    function timelineItem(item: any, index: number, count: number) {
        const { fast, sleep, status } = props.data
        var showBtn = true;
        var time = ''
        var hasDescription = item.moment && item.moment.description
        var finish = false;

        switch (index) {
            case 0:
                {
                    if (status == 'OG2_NO1' || status == 'WFS') {
                        showBtn = true
                    }
                    else {
                        showBtn = false;
                        finish = true;
                    }
                    time = TimeFormatter.dayjsFormat(fast.target.start_timestamp)//dayjs(fast.target.start_timestamp).format('MM-DD HH:mm')
                }
                break;
            case 1:
                {
                    if (status == 'WFS' || status == 'OG1') {
                        showBtn = true
                    }
                    else {
                        showBtn = false
                        finish = true;
                    }
                    if (status == 'OG3') {
                        time = TimeFormatter.dayjsFormat(sleep.real.start_timestamp)//dayjs(sleep.real.start_timestamp).format('MM-DD HH:mm')
                    }
                    else {
                        time = TimeFormatter.dayjsFormat(sleep.target.start_timestamp)//dayjs(sleep.target.start_timestamp).format('MM-DD HH:mm')
                    }

                }
                break;
            case 2:
                {
                    if (status == 'OG3') {
                        showBtn = false
                        finish = true;
                        time = TimeFormatter.dayjsFormat(sleep.real.end_timestamp)//dayjs(sleep.real.end_timestamp).format('MM-DD HH:mm')
                    }
                    else {
                        showBtn = true
                        time = TimeFormatter.dayjsFormat(sleep.target.end_timestamp)//dayjs(sleep.target.end_timestamp).format('MM-DD HH:mm')
                    }

                }
                break;
            case 3:
                {
                    showBtn = true
                    time = TimeFormatter.dayjsFormat(fast.target.end_timestamp)//dayjs(fast.target.end_timestamp).format('MM-DD HH:mm')
                }
                break;
        }
        var isError = false;
        if (health.fast_with_sleep.status == 'OG2_MISALIGNED' && (index == 0 || index == 1)) {
            isError = true;
        }

        function rightView() {
            if (isError) {
                return <View style={{
                    borderColor: MainColorType.error,
                    borderWidth: rpxToPx(2),
                    borderRadius: rpxToPx(76 / 4),
                    borderStyle: 'solid'
                }}>
                    <NewButton
                        type={NewButtonType.gray}
                        title='Correct'
                        fontSize={rpxToPx(34)}
                        width={rpxToPx(128)}
                        height={rpxToPx(72)}
                        onClick={() => {
                            jumpPage(`/_health/pages/log_time?is_fast_with_sleep=1&index=${1}&single=0&initCheck=1&initIndex=${index}`)
                        }}
                    />
                </View>
            }
            else {
                if (item.action == 'POST_MOMENT' && item.timeline.real)
                    return <IconArrow color={MainColorType.g03} width={rpxToPx(34)} />
                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" />
                if (showBtn)
                    return <NewButton
                        color={getThemeColor(item.mode)}
                        type={NewButtonType.alpha}
                        title={'Log'}
                        width={rpxToPx(128)}
                        height={rpxToPx(72)}
                        bold={true}
                        onClick={() => {
                            tapLogBtn(index)
                        }} />
            }
        }

        return <ConsoleCell
            status={<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                <View style={{
                    flexShrink: 0,
                    width: rpxToPx(26),
                    height: rpxToPx(26),
                    borderRadius: rpxToPx(13),
                    marginRight: rpxToPx(8),
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: isError ? MainColorType.error : getIconColor(index, finish)
                }}>
                    {
                        processIcon(item, finish, isError)
                    }
                </View>
                <Text className="timeline_time" style={{ color: isError ? MainColorType.error : MainColorType.g01 }}>{time}</Text>
            </View>}
            title={(item.moment && item.moment.title) ? item.moment.title : item.title}
            description={hasDescription ? item.moment.description : null}
            disable={itemDisableStatus(index)}
            onClick={() => {
                goDetail(index)
            }}
            right={rightView()}
            showLine={true}
            fullLine={count - 1 == index}
        />
        return <View key={index}
            className="timeline_item"
            onClick={() => {
                goDetail(index)
            }}>
            <View className="timeline_left">
                <View style={{

                    height: hasDescription ? rpxToPx(28) : rpxToPx(36), flexShrink: 0
                }} />
                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                    <View style={{
                        flexShrink: 0,
                        width: rpxToPx(26),
                        height: rpxToPx(26),
                        borderRadius: rpxToPx(13),
                        marginRight: rpxToPx(8),
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: isError ? MainColorType.error : getIconColor(index, finish)
                    }}>
                        {
                            processIcon(item, finish, isError)
                        }
                    </View>
                    <Text className="timeline_time" style={{ color: isError ? MainColorType.error : MainColorType.g01 }}>{time}</Text>
                </View>


                <Text className="timeline_title"
                    onClick={() => { }}>{(item.moment && item.moment.title) ? item.moment.title : item.title}</Text>

                {
                    hasDescription && <Text className="timeline_desc">{item.moment.description}</Text>
                }
                <View style={{
                    height: hasDescription ? rpxToPx(28) : rpxToPx(54), flexShrink: 0,

                }} />

            </View>
            <View style={{ flex: 1 }} />

            {
                !isError && item.moment && item.moment.media && item.moment.media.length > 0 && <Image
                    src={item.moment.media[0].url}
                    mode="aspectFill"
                    className="console_item_img" />
            }
            {
                !isError && showBtn && <NewButton
                    color={getThemeColor(item.mode)}
                    type={NewButtonType.alpha}
                    title={'Log'}
                    width={rpxToPx(128)}
                    height={rpxToPx(72)}
                    bold={true}
                    onClick={() => {
                        tapLogBtn(index)
                    }} />
            }
            {
                isError && <View style={{
                    borderColor: MainColorType.error,
                    borderWidth: rpxToPx(2),
                    borderRadius: rpxToPx(76 / 4),
                    borderStyle: 'solid'
                }}>
                    <NewButton
                        type={NewButtonType.gray}
                        title='Correct'
                        fontSize={rpxToPx(34)}
                        width={rpxToPx(128)}
                        height={rpxToPx(72)}
                        onClick={() => {
                            jumpPage(`/_health/pages/log_time?is_fast_with_sleep=1&index=${1}&single=0&initCheck=1&initIndex=${index}`)
                        }}
                    />
                </View>
            }
            {
                !isError && item.action == 'POST_MOMENT' && item.timeline.real && <IconArrow color={MainColorType.g03} width={rpxToPx(34)} />
            }
            <View className="seperate_line" style={{ left: count - 1 == index ? -rpxToPx(52) : rpxToPx(52) }} />
        </View>
    }

    return <View style={{ backgroundColor: '#fff' }}>
        {
            health.fast_with_sleep.status == 'OG2_MISALIGNED' && <View className="error_bg" >
                <View className="error_icon_bg">
                    <Image src={require('@assets/_health/tip_error.png')} style={{ width: rpxToPx(26), height: rpxToPx(26) }} />
                </View>
                <Text className="h24" style={{ lineHeight: rpxToPx(36) + 'px' }}>Logged times are not in their proper order</Text>
            </View>
        }
        {
            props.step != 2 && props.step != 3 && timelineItem({
                title: 'Start Fast',
                mode: 'FAST',
                is_start: true,
                action: props.data.fast.timeline[0].action,
                moment: props.data.fast.timeline[0].moment,
                timeline: props.data.fast.timeline[0]
            }, 0, 4)
        }
        {
            props.step != 3 && timelineItem({
                title: 'Go to bed',
                mode: 'SLEEP',
                is_start: true,
                action: props.data.fast.timeline[0].action,
                moment: props.data.sleep.timeline[0].moment,
                timeline: props.data.sleep.timeline[0]
            }, 1, 4)
        }
        {
            props.step != 1 && timelineItem({
                title: 'Wake up',
                mode: 'SLEEP',
                is_start: false,
                moment: props.data.sleep.timeline[1].moment,
                timeline: props.data.sleep.timeline[1]
            }, 2, 4)
        }
        {
            props.step != 1 && props.step != 2 && timelineItem({
                title: 'End Fast',
                mode: 'FAST',
                is_start: false,
                moment: props.data.fast.timeline[1].moment,
                timeline: props.data.fast.timeline[1]
            }, 3, 4)
        }
        {
            <View className="main_console_footer">
                <NewButton
                    btnStyle={{
                        position: 'absolute',
                        top: rpxToPx(42),
                        right: rpxToPx(40)
                    }}
                    type={NewButtonType.more}
                    onClick={showAction}
                />

            </View>
        }


    </View>
}