taro/src/_record/pages/time_record.tsx

import { View, Image, PickerView, PickerViewColumn, Text } from "@tarojs/components";
import './time_record.scss'
import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";
import { MainColorType } from "@/context/themes/color";
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import { useEffect, useRef, useState } from "react";
import NewDateTimePicker from "@/_health/base/new_date_time_picker";
import dayjs from "dayjs";
import RingProgress from "../components/ring_progress";
import NewDurationPicker, { DurationPickerType } from "@/_health/base/new_durationpicker";
import { IconArrow, IconClose, IconMore2 } from "@/components/basic/Icons";
import { useSelector } from "react-redux";
import { TimeFormatter } from "@/utils/time_format";
import { addEvents, delWindowId } from "@/services/health";
import Modal from "@/components/layout/Modal.weapp";
import { getDurationArc, getStartArc } from "@/features/health/hooks/health_hooks";
import ShareBtn from "@/components/basic/ShareBtn";
import PickerCard from "../components/picker_card";
import showActionSheet from "@/components/basic/ActionSheet";
import { useTranslation } from "react-i18next";
import FollowInfo from "@/_moment/components/follow_info";

import MomentDetailShare from "@/pages/moment/moment_detail_share";
import { BASE_IMG_URL } from "@/services/http/api";


let timer
let useRoute;
let useNavigation, LinearGradient;
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
    LinearGradient = require('react-native-linear-gradient').default
}

export default function TimeRecord() {
    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;
    const screenHeight = systemInfo.screenHeight

    const record = useSelector((state: any) => state.record);
    const long = useSelector((state: any) => state.long);
    const user = useSelector((state: any) => state.user);
    const [enterTime] = useState(new Date().getTime())

    const [showDatePicker, setShowDatePicker] = useState(false)
    const [showDurationPicker, setShowDurationPicker] = useState(false)
    const [showEndDatePicker, setShowEndDatePicker] = useState(false)
    const [count, setCount] = useState(0)
    const [status, setStatus] = useState('WFS')
    const [info, setInfo] = useState<any>(null)
    const [loaded, setLoaded] = useState(false)
    const [showHighlight, setShowHighlight] = useState(false)
    const [showShare, setShowShare] = useState(false)
    const [shareUrl, setShareUrl] = useState('')
    const [showResult, setShowResult] = useState(false)

    const statusRef = useRef(status)
    const picker1Ref = useRef(showDatePicker)
    const picker2Ref = useRef(showEndDatePicker)
    const picker3Ref = useRef(showDurationPicker)

    const [posting, setPosting] = useState(false)

    const [postError, setPostError] = useState('')

    const [pickerTitle, setPickerTitle] = useState('')
    const [themeColor, setThemeColor] = useState(MainColorType.orange)

    const { t } = useTranslation()

    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const { scenario, join_id } = router.params


    if (process.env.TARO_ENV == 'weapp') {


        useShareAppMessage((e) => {

            var path;
            if (info && info.id) {
                var sharePath = `/_health/pages/timeline_detail?type=recent&fast_type=IF&window_id=${info.id}&uid=${user.id}&isfastsleep=${0}&disable_edit=1&enter_type=share`
                if (user.isLogin) {
                    sharePath += `&share_uid=${user.id}`
                }
                path = sharePath
            }
            else {
                path = 'pages/clock/Clock'
            }
            var title = ''
            var shareDate = global.language == 'en' ? 'Today\'s' : '今日'
            if (scenario == 'FAST') {
                title = t('health.share_check_in', { date: shareDate, type: t('health.fasting') })
            }
            else {
                title = t('health.share_check_in', { date: shareDate, type: t('health.sleep') })
            }
            return {
                title: title,
                path: path,
                imageUrl: global.momentdetail_share_url//shareUrl
            }
        })
    }

    useEffect(() => {
        statusRef.current = status;
        picker1Ref.current = showDatePicker
        picker2Ref.current = showEndDatePicker
        picker3Ref.current = showDurationPicker
        if (!showDatePicker && !showEndDatePicker) {
            setPostError('')
        }

        if (showDatePicker) {
            setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_start_time') : t('health.adjust_bed_time'))
        }
        else if (showEndDatePicker) {
            setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_end_time') : t('health.adjust_wake_up2'))
        }
        else if (showDurationPicker) {
            setPickerTitle(scenario == 'FAST' ? t('health.adjust_fast_goal') : t('health.adjust_sleep_goal'))
        }
    }, [status, showDatePicker, showEndDatePicker, showDurationPicker])


    useEffect(() => {
        const { list } = record
        list.map((item) => {
            if (item.scenario == scenario) {
                setInfo(item.event)
                setStatus(item.event.status)
                setLoaded(true)
                setThemeColor(item.theme_color)
            }
        })
        downloadFile()
        timer = setInterval(() => {
            if (picker1Ref.current || picker2Ref.current || picker3Ref.current) return
            if (statusRef.current == 'DONE') return
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    function downloadFile() {
        Taro.downloadFile({
            url: BASE_IMG_URL + 'cp_check_f.png',
            success: (res) => {
                if (res.statusCode === 200) {
                    global.checkFastImg = res.tempFilePath

                } else {
                }
            },
            fail: (err) => {
            }
        });

        Taro.downloadFile({
            url: BASE_IMG_URL + 'cp_check_s.png',
            success: (res) => {
                if (res.statusCode === 200) {
                    global.checkSleepImg = res.tempFilePath

                } else {
                }
            },
            fail: (err) => {
            }
        });
    }

    function tapClock() {
        if (status == 'WFS')
            setShowDurationPicker(true)
    }

    function start() {
        // var date = TimeFormatter.stringToDate(selDate, time)
        // date.setMilliseconds(new Date(enterTimestmap).getMilliseconds())


        var params: any = {
            scenario: scenario, //ACTIVITY
            type: 'INTERVAL',
            sub_type: scenario,

            time: {
                start_timestamp: new Date().getTime(),
                duration: info.time.duration
            }
        }

        if (router.params.join_id) {
            params.join_key = router.params.join_id
        }




        // if (event_id && event_id != 'undefined') {
        //     params.event_id = event_id
        // }

        // if (is_temp) {
        //     params.event = window == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM'
        // }
        // params.op_page = window == 'EAT' ? 'HOME_EAT' : 'HOME_ACTIVE'


        params.extra = {
            set_time: global.set_time ? global.set_time : new Date().getTime(),
            confirm_time: new Date().getTime()
        }
        // console.log('打卡提交数据', params)
        if (posting) return
        setPosting(true)
        addEvents(params).then(res => {

            Taro.eventCenter.trigger('refreshClockIndex')
            Taro.eventCenter.trigger('refreshMoments', '')
            setShowHighlight(true)
            setTimeout(() => {
                setShowHighlight(false)
            }, 3300)
            setInfo((res as any).data)
            setStatus((res as any).data.status)
            // Taro.showToast({
            //     title: '成功',
            //     icon: 'success'
            // })
            setPosting(false)
        }).catch(e => {
            setPosting(false)
        })
    }

    function end() {
        var params: any = {
            scenario: scenario, //ACTIVITY
            type: 'INTERVAL',
            sub_type: scenario,

            time: {
                end_timestamp: new Date().getTime()
            }
        }

        if (router.params.join_id) {
            params.join_key = router.params.join_id
        }


        params.extra = {
            set_time: global.set_time ? global.set_time : new Date().getTime(),
            confirm_time: new Date().getTime()
        }

        if (posting) return
        setPosting(true)
        addEvents(params).then(res => {
            setShowHighlight(true)
            setTimeout(() => {
                setShowHighlight(false)
            }, 8000)
            setTimeout(() => {
                setShowResult(true)
            }, 2000)
            Taro.eventCenter.trigger('refreshClockIndex')
            Taro.eventCenter.trigger('refreshMoments', '')
            setInfo((res as any).data)
            setStatus((res as any).data.status)
            setShareUrl('')
            // Taro.showToast({
            //     title: '成功',
            //     icon: 'success'
            // })
            setPosting(false)
        }).catch(e => {
            setPosting(false)
        })
    }

    function update(params) {
        var data: any = {
            id: info.id,
            time: {
                ...params
            }
        }
        if (posting) return
        setPosting(true)
        addEvents(data).then(res => {
            if ((res as any).result == false) {
                setPostError((res as any).error_messages[0])
                return
            }
            Taro.eventCenter.trigger('refreshClockIndex')
            Taro.eventCenter.trigger('refreshMoments', '')
            setInfo((res as any).data)
            setShowDatePicker(false)
            setShowDurationPicker(false)
            setShowEndDatePicker(false)
            setCount((count) => count + 1)
            setPosting(false)
        }).catch(e => {
            setPosting(false)
        })
    }

    function more() {
        showActionSheet({
            // title: '操作',
            itemList: [t('health.discard'), t('health.discard_restart')],
            success: (res) => {
                switch (res) {
                    case 0:
                        delWindowId(info.id).then(res => {
                            setInfo((res as any).data)
                            setStatus((res as any).data.status)
                        })
                        break
                    case 1:
                        delWindowId(info.id).then(res => {
                            start()
                        })
                        break
                }
            }
        })
    }

    function tapStart() {
        setShowDatePicker(true)
    }

    function tapGoal() {
        setShowDurationPicker(true)
    }

    function ringExtra() {
        if (status == 'DONE') {
            return {
                value: '',
                footer: '',
                color: themeColor,
                result: TimeFormatter.formateDurationBySeconds(info.time.end_timestamp / 1000 - info.time.start_timestamp / 1000),
            }
        }
        if (status == 'WFS') {
            const count = info.time.duration / 1000
            var str = TimeFormatter.formateDurationBySeconds(count)

            return {
                target: str,
                goal: t('health.adjust_goal'),
                color: themeColor
            }
        }
        var percent = 100 * (new Date().getTime() - info.time.start_timestamp) / info.time.duration
        percent = parseInt(percent + '')
        return {
            progress: TimeFormatter.countdown(info.time.start_timestamp),
            footer: t('health.elapsed', { percent: percent + '%' }),//`ELAPSED ${percent}%`,
            color: MainColorType.g02
        }
    }

    function getBackground() {
        var time = record.time
        if (!time) return '#fff'
        const { background_colors } = time
        if (!background_colors) {
            return '#fff'
        }
        else if (background_colors.length == 1) {
            return background_colors[0]
        }
        return `linear-gradient(to bottom, ${background_colors[0]}, ${background_colors[1]})`
    }
    if (!loaded) {
        return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <View className="main_bg" style={{ background: getBackground() }} />
        </View>
    }

    function doneComponent() {
        if (status == 'DONE') {
            return <View className="share_bg" style={{ justifyContent: 'flex-start' }}>

                <View className="navi_bar" style={{ height: navigationBarHeight }}>
                    <View style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        bottom: 0,
                        height: 44,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}>
                        <View style={{
                            position: 'absolute',
                            width: rpxToPx(92),
                            height: rpxToPx(64),
                            left: 22,
                            top: 22 - rpxToPx(32)
                        }}
                            onClick={() => {
                                process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                            }}>
                            <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
                        </View>
                    </View>

                </View>
                <View className="share_card2" style={{ background: themeColor, marginTop: rpxToPx(26) + navigationBarHeight }}>
                    {/* {
                        shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720) }} /> :
                            <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02 }} />
                    } */}
                    <RingProgress
                        radius={rpxToPx(250)} canvasId="helloworld_share2"
                        //scale={0.75}
                        count={count}
                        bgRing={{
                            color: 'rgba(255,255,255,1)',
                            width: rpxToPx(88)
                        }}
                        real={{
                            color: themeColor,
                            width: rpxToPx(16),
                            start: getStartArc(info.time.start_timestamp),
                            duration: getDurationArc(info.time.start_timestamp, info.time.end_timestamp)
                        }}
                        extra={ringExtra()}
                        shareBg={[themeColor]}
                        checkImgUrl={scenario == 'FAST' ? global.checkFastImg : global.checkSleepImg}
                        isCompleted
                        shareCover={
                            url => {
                                setShareUrl(url)
                            }
                        }
                    />
                    {
                        <View className="share_operate_content">
                            {
                                showResult ? <View style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
                                    <NewButton type={NewButtonType.custom} onClick={() => {
                                        setShowDatePicker(true)
                                    }}>
                                        <View className="operate_item" >
                                            <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
                                            <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
                                            <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
                                        </View>
                                    </NewButton>
                                    <NewButton type={NewButtonType.custom} onClick={() => {
                                        setShowEndDatePicker(true)
                                    }}>
                                        <View className="operate_item" >
                                            <View className={showHighlight ? 'card_highlight end_card_show' : ''} />
                                            <View className="g02 h24 white_50">{scenario == 'FAST' ? t('health.finished') : t('health.wokeup')}</View>
                                            <View className="h44 bold white" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.end_timestamp, true)}</View>
                                            <View className="h30 bold white_50">{scenario == 'FAST' ? t('health.adjust_end') : t('health.adjust_wake_up')}</View>
                                        </View>
                                    </NewButton>
                                </View> :
                                    <View className="white bold" style={{ fontSize: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>{scenario == 'FAST' ? t('health.fast_finished') : t('health.sleep_finished')}</View>
                            }


                        </View>
                    }
                </View>
                {/* {
                    showResult && <View style={{ opacity: 0 }}><View className="shareBtnAni" >
                        <ShareBtn hideShare={true}>
                            <NewButton type={NewButtonType.custom}>
                                <View className="share_btn1" style={{ backgroundColor: MainColorType.success }}>
                                    <Image src={require('@assets/_health/wechat.png')} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
                                    <View className="white bold h34">Send to friends</View>
                                </View>
                            </NewButton>
                        </ShareBtn>
                    </View>
                    </View>
                } */}

                {
                    showResult && <NewButton type={NewButtonType.custom}
                        onClick={() => {
                            Taro.reLaunch({
                                url: '/pages/moment/moment'
                            })
                        }}
                    ><View

                        className="bold h30 momentBtnAni" style={{ marginTop: rpxToPx(26) }}>{t('health.view_in_moments')}</View>
                    </NewButton>
                }
                {
                    showResult && <NewButton type={NewButtonType.custom} onClick={() => {
                        Taro.redirectTo({
                            url: `./log_record?scenario=MEAL`
                        })
                    }}><View

                        className="h30 bold white_75 eatBtnAni" style={{
                            backgroundColor: MainColorType.black_05,
                            marginTop: rpxToPx(26),
                            width: rpxToPx(698),
                            height: rpxToPx(108),
                            borderRadius: rpxToPx(28),
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            {t('health.what_eating')}
                        </View>
                    </NewButton>

                }



            </View>
        }
    }

    function naviTitle() {
        switch (status) {
            case 'WFS':
                return scenario == 'FAST' ? t('health.upcoming_fast') : t('health.upcoming_sleep')
            case 'OG':
                return scenario == 'FAST' ? t('health.you_are_fasting') : t('health.your_are_sleeping')
            case 'DONE':
                return scenario == 'FAST' ? 'Fast completed' : 'Sleep completed'
        }
    }

    function bgView() {
        if (process.env.TARO_ENV == 'weapp') {
            return <View className="main_bg" style={{ background: getBackground() }} />
        }
        var time = record.time
        if (!time) return <View />
        const { background_colors } = time
        if (!background_colors) {
            return <View />
        }
        else if (background_colors.length == 1) {
            return <View />
        }
        return <LinearGradient style={{
            position: 'absolute',
            left: 0,
            top: 0,

            width: rpxToPx(750),
            height: screenHeight,
            zIndex: 0,
            pointerEvents: 'none'
        }}
            colors={[background_colors[0], background_colors[1]]}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }} pointerEvents="none" />
    }

    function render() {

        return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            {/* <View className="main_bg" style={{ background: getBackground() }} /> */}
            {
                bgView()
            }
            <View className="navi_bar" style={{ height: navigationBarHeight }}>
                <View style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    bottom: 0,
                    height: 44,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Image src={require('@assets/_health/navi_back.png')} style={{
                        position: 'absolute',
                        width: rpxToPx(92),
                        height: rpxToPx(64),
                        left: 0,
                        top: 22 - rpxToPx(32)
                    }}
                        onClick={() => {
                            process.env.TARO_ENV == 'weapp' ? Taro.navigateBack() : navigation.goBack()
                        }}
                    />
                    <View className="h36 bold">{naviTitle()}</View>
                </View>
            </View>
            <View style={{ height: rpxToPx(26) + navigationBarHeight }} />
            <View className="progress_card">
                <View onClick={() => {
                    tapClock()
                    // setShowDurationPicker(true)
                }}>
                    <RingProgress
                        radius={rpxToPx(250)} canvasId="helloworld"
                        //scale={0.75}
                        count={count}
                        bgRing={{
                            color: 'rgba(255,255,255,0.25)',
                            width: rpxToPx(88)
                        }}
                        target={{
                            color: 'rgba(255,255,255,0.5)',
                            width: rpxToPx(88),
                            start: status == 'WFS' ? getStartArc(new Date().getTime()) : getStartArc(info.time.start_timestamp),
                            duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
                        }}
                        real={status == 'WFS' ? null : {
                            color: themeColor,
                            width: rpxToPx(88),
                            start: getStartArc(info.time.start_timestamp),
                            duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
                        }}
                        extra={ringExtra()}
                    />
                </View>

                {
                    status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
                        <NewButton type={NewButtonType.custom} onClick={() => {
                            setShowDatePicker(true)
                        }}>
                            <View className="operate_item">
                                <View className={showHighlight ? 'card_highlight start_card_show' : ''} />
                                <View className="black_50 h24">{scenario == 'FAST' ? t('health.started') : t('health.bedtime1')}</View>
                                <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.start_timestamp)}</View>
                                <View className="h30 bold" style={{ color: themeColor }}>{scenario == 'FAST' ? t('health.adjust_start') : t('health.adjust_bedtime')}</View>
                            </View>
                        </NewButton>
                        <NewButton type={NewButtonType.custom} onClick={() => {
                            setShowDurationPicker(true)
                        }}>
                            <View className="operate_item">
                                <View className="black_50 h24">{t('health.time_goal', { time: TimeFormatter.formateDurationBySeconds(info.time.duration / 1000) })}</View>
                                <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.abbrTimestampFormat(info.time.target_end_timestamp)}</View>
                                <View className="h30 bold" style={{ color: themeColor }}>{t('health.adjust_goal')}</View>
                            </View>
                        </NewButton>
                    </View>
                }
                {
                    status == 'WFS' && <NewButton
                        type={NewButtonType.fill}
                        title={scenario == 'FAST' ? record.actions.FAST_START : record.actions.SLEEP_BEDTIME}
                        width={rpxToPx(490)}
                        height={rpxToPx(108)}
                        color={themeColor}
                        onClick={start}
                    />
                }

                {
                    status == 'OG' && <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}><NewButton
                        type={NewButtonType.fill}
                        title={scenario == 'FAST' ? record.actions.FAST_END : record.actions.SLEEP_WAKE_UP}
                        width={rpxToPx(490)}
                        height={rpxToPx(108)}
                        color={themeColor}
                        onClick={end}
                    />
                        {/* <NewButton
                            type={NewButtonType.more}
                            onClick={more}
                        /> */}
                        <NewButton
                            type={NewButtonType.img}
                            btnStyle={{ marginRight: -rpxToPx(72) }}
                            onClick={more}
                        >
                            <View style={{ width: rpxToPx(72), height: rpxToPx(72), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <IconMore2 width={rpxToPx(36)} color="#000" />
                            </View>

                        </NewButton>
                        {/* <View onClick={more}>More</View> */}
                    </View>
                }
                {
                    status == 'OG' && <View className="share_icon">
                        <ShareBtn>
                            <Image onClick={() => {
                                // setShareUrl('')
                                // setShowShare(true)
                            }} src={require('@assets/_health/wechat.png')} style={{
                                width: rpxToPx(72),
                                height: rpxToPx(72)
                            }} />
                        </ShareBtn>
                    </View>
                }


            </View>
            {/* {
                status == 'WFS' && <View className="eat_card" onClick={() => {
                    Taro.redirectTo({
                        url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
                    })
                }}>
                    <View className="h30 bold">Or share your meals</View>
                    <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>if you haven't started fasting yet</View>
                    <View className="eat_card_arrow">
                        <IconArrow width={rpxToPx(34)} color={MainColorType.black_25} />
                    </View>
                </View>
            } */}

            {
                router.params.join_id && <FollowInfo user={long.follow} timeMode={true} />
            }

            {/* {
                status == 'OG' && <View className="eat_card" style={{ height: rpxToPx(120) }} onClick={() => {
                    Taro.redirectTo({
                        url: `./log_record?scenario=${scenario == 'FAST' ? 'MEAL' : 'ACTIVITY'}`
                    })
                }}>
                    <View className="h24 g02" style={{ marginTop: rpxToPx(12) }}>How are you feeling?</View>
                    <View className="eat_card_arrow">
                        <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
                    </View>
                </View>
            } */}


            {/* {
            showDurationPicker && <Modal
                testInfo={null}
                dismiss={() => {
                    setShowDurationPicker(false)
                }}
                confirm={() => { }}>
                {
                    <NewDurationPicker type={DurationPickerType.normal} value={info.time.duration} onChange={(e) => {
                        console.log(e)
                        var obj = JSON.parse(JSON.stringify(info))
                        obj.time.duration = e
                        setInfo(obj)
                    }} />
                }
            </Modal>
        } */}
            {
                showShare && <View className="share_bg">
                    {
                        shareUrl == '' && <View className="share_canvas">
                            <RingProgress
                                radius={rpxToPx(250)} canvasId="helloworld_share"
                                //scale={0.75}
                                count={count}
                                bgRing={{
                                    color: 'rgba(255,255,255,0.25)',
                                    width: rpxToPx(88)
                                }}
                                target={{
                                    color: 'rgba(255,255,255,0.5)',
                                    width: rpxToPx(88),
                                    start: status == 'WFS' ? getStartArc(new Date().getTime()) : getStartArc(info.time.start_timestamp),
                                    duration: status == 'WFS' ? getDurationArc(new Date().getTime(), new Date().getTime() + info.time.duration) : getDurationArc(info.time.start_timestamp, info.time.start_timestamp + info.time.duration)
                                }}
                                real={status == 'WFS' ? null : {
                                    color: themeColor,
                                    width: rpxToPx(88),
                                    start: getStartArc(info.time.start_timestamp),
                                    duration: getDurationArc(info.time.start_timestamp, new Date().getTime())
                                }}
                                extra={ringExtra()}
                                shareBg={[record.time.background_colors[0], record.time.background_colors[1]]}
                                shareCover={
                                    url => {
                                        setShareUrl(url)
                                    }
                                }
                            />
                        </View>
                    }
                    <View className="navi_bar" style={{ height: navigationBarHeight }}>
                        <View style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 44,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            <View style={{
                                position: 'absolute',
                                width: rpxToPx(92),
                                height: rpxToPx(64),
                                left: 22,
                                top: 22 - rpxToPx(32)
                            }}
                                onClick={() => {
                                    setShowShare(false)
                                }}>
                                <IconClose color="#fff" width={rpxToPx(64)} height={rpxToPx(64)} />
                            </View>
                        </View>
                    </View>
                    <View className="share_card" style={{ background: record.time.background_colors[1] }}>
                        {
                            shareUrl.length > 0 ? <Image src={shareUrl} style={{ width: rpxToPx(900), height: rpxToPx(720), flexShrink: 0 }} /> :
                                <View style={{ width: rpxToPx(900), height: rpxToPx(720), backgroundColor: MainColorType.g02, flexShrink: 0 }} />
                        }
                        {
                            status == 'OG' && <View className="operate_content" style={{ marginTop: -rpxToPx(20) }}>
                                <View className="operate_item">
                                    <View className="black_50 h24">STARTED</View>
                                    <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.start_timestamp, true)}</View>
                                </View>
                                <View className="operate_item">
                                    <View className="black_50 h24">{TimeFormatter.formateDurationBySeconds(info.time.duration / 1000)} Goal</View>
                                    <View className="h44 bold" style={{ marginTop: rpxToPx(8), marginBottom: rpxToPx(8) }}>{TimeFormatter.dateTimeFormate(info.time.target_end_timestamp, true)}</View>
                                </View>
                            </View>
                        }
                    </View>
                    <ShareBtn hideShare={true}>
                        <NewButton type={NewButtonType.custom} btnStyle={{ opacity: 0 }}>
                            <View className="share_btn1" style={{ backgroundColor: MainColorType.success }}>
                                <Image src={require('@assets/_health/wechat.png')} style={{ width: rpxToPx(48), height: rpxToPx(48) }} />
                                <View className="white bold h34">Send to friends</View>
                            </View>
                        </NewButton>
                    </ShareBtn>
                </View>
            }
        </View>
    }
    return <View>
        {
            status == 'DONE' ? doneComponent() : render()
        }
        {
            showDatePicker && <PickerCard onClose={() => { setShowDatePicker(false) }}
                value={info.time.start_timestamp}
                type="datetime"
                title={pickerTitle}
                error={postError}
                onConfirm={(e) => {
                    update({
                        start_timestamp: e
                    })
                    console.log(e)
                    // var obj = JSON.parse(JSON.stringify(info))
                    // obj.time.duration = e
                    // setInfo(obj)
                }}
            />
        }
        {
            showEndDatePicker && <PickerCard onClose={() => { setShowEndDatePicker(false) }}
                value={info.time.end_timestamp}
                type="datetime"
                title={pickerTitle}
                error={postError}
                onConfirm={(e) => {
                    update({
                        end_timestamp: e
                    })
                    console.log(e)
                    // var obj = JSON.parse(JSON.stringify(info))
                    // obj.time.duration = e
                    // setInfo(obj)
                }}
            />
        }
        {
            showDurationPicker && <PickerCard onClose={() => { setShowDurationPicker(false) }}
                value={info.time.duration}
                type="duration"
                title={pickerTitle}
                onConfirm={(e) => {
                    var obj = JSON.parse(JSON.stringify(info))
                    obj.time.duration = e
                    setInfo(obj)
                    if (status == 'WFS') {
                        setShowDurationPicker(false)
                        return
                    }
                    update({
                        duration: e
                    })
                }}
            />
        }

        <MomentDetailShare
            user={user}
            canvas_id="time_record"
            btnColor={themeColor} />
    </View>
}