taro/src/features/trackTimeDuration/components/Schedule.tsx

import { View, Text } from "@tarojs/components";
import trackTimeService, { machine } from "@/store/trackTimeMachine"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import Box from "@/components/layout/Box";
import './Schedule.scss'
import { useTranslation } from "react-i18next";
import TimelineFastSleep from "./TimelineFastSleep";
import Switch from "@/components/input/Switch";
import { useDispatch, useSelector } from "react-redux";
import { TimeFormatter } from "@/utils/time_format";
import Buttons from "@/components/basic/Buttons";
import { ButtonType } from "@/utils/types";
import { setStep } from "@/store/scenario";
import Segment from "@/components/navigation/Segment";


export default function Component(props: { type?: string, data?: any, delSuccess?: Function }) {
    const { t } = useTranslation()
    const permission = useSelector((state: any) => state.permission);
    const common = useSelector((state: any) => state.common);
    const time = useSelector((state: any) => state.time);
    const dispatch = useDispatch();

    function all() {
        if (props.type == 'latest') {
            Taro.navigateTo({
                url: '/pages/common/RecordsHistory?type=time&title=Time'
            })
        }
    }

    function showStage() {

    }

    function followWxPub() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'follow_wx_pub'
        })

        Taro.showModal({
            title: '提示',
            content: '关注公众号后可接收提醒\n点击确定，前往关注',
            showCancel: true,
            success(result) {
                if (result.confirm) {
                    Taro.navigateTo({
                        url: '/pages/common/H5?title=fast16cc 关注服务号&url=' + resource[0].url,
                    })
                }
            },
        })
    }

    function detailHeader() {
        var btnStyle;
        if (props.data.scenario == 'SLEEP') {
            btnStyle = {
                fontSize: 14,
                lineHeight: 18,
                color: '#00FFFF'
            }
        }
        else if (props.data.scenario == 'FAST') {
            btnStyle = {
                fontSize: 14,
                lineHeight: 18,
                color: '#AAFF00'
            }
        }
        else if (props.data.scenario == 'FAST_SLEEP') {
            btnStyle = {
                fontSize: 14,
                lineHeight: 18,
                // background: 'linear-gradient(90deg, #AAFF00 0%, #00FFFF 100%)',
                // WebkitBackgroundClip: 'text',
                // backgroundClip: 'text',
                // color: 'transparent'
            }
        }
        return <View style={{
            height: 18,
            display: 'flex', flexDirection: 'row', width: '100%',
            justifyContent: 'space-between', alignItems: 'center',
            marginBottom:6,paddingRight:10,boxSizing:'border-box'
        }}>
            <Text style={{fontSize:18,lineHeight:18,fontWeight:500}}>{permission.wxPubFollow ? TimeFormatter.getDateAndWeek() : '日程提醒'}</Text>
            {
                !permission.wxPubFollow && <View >
                    <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
                </View>
            }
            {
                permission.wxPubFollow && props.data.status == 'WAIT_FOR_START' && <Buttons disabled={props.data.status != 'WAIT_FOR_START'}
                    className={props.data.scenario == 'FAST_SLEEP' ? 'mixed' : ''}
                    btnStyle={btnStyle} type={ButtonType.text} title="调整日程" onClick={() => {
                        if (props.data.name == 'FAST_SLEEP') {
                            dispatch(setStep('fast'))
                        }
                        else if (props.data.name == 'SLEEP') {
                            dispatch(setStep('sleep'))
                        }
                        else {
                            dispatch(setStep('fast'))
                        }
                        Taro.navigateTo({
                            url: '/pages/clock/SetSchedule'
                        })
                    }} />
            }
        </View>
    }

    function detailCenter() {
        if (!permission.wxPubFollow) {
            return <View className="tip_bg2">
                <Text className="tip_text2">开启后，将显示今天的日程。</Text>
            </View>
        }

        var nextCheckTimestamp = 0;
        if (time.status != 'WAIT_FOR_START') {
            if (time.status == 'ONGOING') {
                nextCheckTimestamp = time.scenario == 'FAST' ?
                    time.fast.target_end_time : time.sleep.target_end_time
            }
            else {
                switch (time.status) {
                    case 'ONGOING1':
                        nextCheckTimestamp = time.sleep.target_start_time
                        break;
                    case 'ONGOING2':
                        nextCheckTimestamp = time.sleep.target_end_time
                        break
                    case 'ONGOING3':
                        nextCheckTimestamp = time.fast.target_end_time
                        break
                }
            }

        }
        var today = new Date();
        today.setHours(0)
        today.setMinutes(0)
        today.setSeconds(0)
        if (nextCheckTimestamp!=0 && today.getTime()>nextCheckTimestamp){
            return <View className="tip_bg2">
                <Text className="tip_text2">完成当前记录，恢复今天的日程。</Text>
            </View >
        }

        return <View style={{marginTop:10}}>
            
            <TimelineFastSleep data={props.data} />
            <View>
                <Text>show detail</Text>
            </View>
        </View>
    }

    function detailFooter() {

    }

    function detail() {
        return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', position: 'relative' }} onClick={all}>
            {
                detailHeader()
            }
            {
                detailCenter()
            }
            {
                props.data.scenario == 'FAST_SLEEP' && (props.data.status == 'WAIT_FOR_START' ? <Text onClick={showStage}>Duration goals by stage</Text> : <Text onClick={showStage}>Current stage</Text>)
            }


        </View >
    }


    return <Box>
        {
            detail()
        }
    </Box>


}