taro/src/features/daynight/DayNightDetailPopup.tsx

import { View, Text } from '@tarojs/components'
import '@/features/trackTimeDuration/components/CircadianDetailPopup.scss'
import { useTranslation } from 'react-i18next'
import { useEffect, useState } from 'react'
import { getTimezone, getTimezoneName, kIsIOS, rpxToPx } from '@/utils/tools'
import { TimeFormatter } from '@/utils/time_format'
import { useSelector } from 'react-redux'
import { ColorType } from '@/context/themes/color'
import Timeline from '@/components/view/Timeline'
import Taro from '@tarojs/taro'
import dayjs, { Dayjs } from 'dayjs'
import showAlert from '@/components/basic/Alert'
import { AtActivityIndicator } from 'taro-ui'
import showActionSheet from '@/components/basic/ActionSheet'


const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone')

dayjs.extend(utc)
dayjs.extend(timezone)

let LinearGradient, useActionSheet
if (process.env.TARO_ENV == 'rn') {
    LinearGradient = require('react-native-linear-gradient').default
    useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
}
export default function DayNightDetailPopup(props: {
    isNight: boolean,
    authInfo: any,
    nightDate: any,
    dayDate: any,
    onClose: Function,
    updateLocation: Function
}) {
    const dayNight = useSelector((state: any) => state.night);
    const day = useSelector((state: any) => state.day);
    const user = useSelector((state: any) => state.user);
    const [tabIndex, setTabIndex] = useState(0)
    const [isLoading, setIsLoading] = useState(false)
    const { t } = useTranslation()

    let showActionSheetWithOptions;
    if (process.env.TARO_ENV == 'rn') {
        showActionSheetWithOptions = useActionSheet()
    }

    useEffect(() => {
        if (isCompleted()) {
            setTabIndex(1)
        }
    }, [])

    global.updateLocationLoading = (status) => {
        setIsLoading(status)
    }

    function localNow(now: Date) {
        if (props.authInfo && props.authInfo.timezone) {
            return new Date(TimeFormatter.transferTimestamp(now.getTime(), props.authInfo.timezone.gmt))
        }
        return now
    }

    function getTitle() {
        return props.isNight ? t('feature.day_night.night_popover') : t('feature.day_night.day_popover')
    }

    function getCompletedTitle() {
        if (props.isNight) {
            return TimeFormatter.getDayOfWeek(new Date(props.authInfo.night_completed.sunrise_ts).getDay(), true)
        }
        return TimeFormatter.getDayOfWeek(new Date(props.authInfo.night_completed.sunset_ts).getDay(), true)
    }

    function getSubTitle() {
        var now = new Date()
        if (props.isNight) {
            if (localNow(now).getTime() != now.getTime()) {
                return TimeFormatter.getMonthAndDayByTimestamp(props.authInfo.night_completed.sunrise_ts, true)
            }
            return TimeFormatter.dateDescription(props.authInfo.night_completed.sunrise_ts, true)
        }
        if (localNow(now).getTime() != now.getTime()) {
            return TimeFormatter.getMonthAndDayByTimestamp(props.authInfo.night_completed.sunset_ts, true)
        }
        return TimeFormatter.dateDescription(props.authInfo.night_completed.sunset_ts, true)
    }

    function isCompleted() {
        if (props.isNight) {
            if (props.authInfo && props.authInfo.night_completed && new Date().getTime() > props.authInfo.night_completed.sunrise_ts) {
                return true
            }
        }
        else {
            if (props.authInfo && props.authInfo.day_completed && new Date().getTime() > props.authInfo.day_completed.sunset_ts) {

                return true
            }
        }
        return false
    }

    function nightDuration() {
        if (isCompleted()) {
            return TimeFormatter.calculateTimeDifference(props.authInfo.night_completed.sunset_ts, props.authInfo.night_completed.sunrise_ts, true);
        }

        if (global.nightObj) {
            return TimeFormatter.calculateTimeDifference(global.nightObj.sunset.timestamp, global.nightObj.sunrise.timestamp, true);
        }
        return ''
    }

    function dayDuration() {
        debugger
        if (isCompleted()) {
            return TimeFormatter.calculateTimeDifference(props.authInfo.day_completed.sunrise_ts, props.authInfo.day_completed.sunset_ts, true);
        }
        if (global.dayObj) {
            return TimeFormatter.calculateTimeDifference(global.dayObj.sunrise.timestamp, global.dayObj.sunset.timestamp, true);
        }
        return ''
    }

    function showExtraData() {
        var now = new Date()
        if (props.isNight) {
            if (global.nightObj.sunset.timestamp > now.getTime()) {
                return false
            }
            return true
        }
        if (global.dayObj.sunrise.timestamp < now.getTime() && now.getTime() < global.dayObj.sunset.timestamp) {
            return true;
        }
        return false
    }

    function timeCount() {
        var now = new Date()
        if (props.isNight) {
            if (now.getTime() < global.nightObj.sunrise.timestamp) {
                return TimeFormatter.countdown(global.nightObj.sunset.timestamp, now.getTime(), true)
            }
            return TimeFormatter.countdown(global.nightObj.sunset.timestamp, now.getTime(), true)
        } else {

            if (now.getTime() < global.dayObj.sunset.timestamp) {
                return TimeFormatter.countdown(global.dayObj.sunrise.timestamp, now.getTime(), true)
            }
            return TimeFormatter.countdown(global.dayObj.sunrise.timestamp, now.getTime(), true)


        }
    }

    function timeCount2() {
        var now = new Date()
        if (props.isNight) {

            if (now.getTime() < global.nightObj.sunset.timestamp) {
                return TimeFormatter.countdown(global.nightObj.sunrise.timestamp, now.getTime(), true)
            }
            return TimeFormatter.countdown(global.nightObj.sunrise.timestamp, now.getTime(), true)

        } else {
            return TimeFormatter.countdown(global.dayObj.sunset.timestamp, now.getTime(), true)
        }
    }

    function timeDesc() {
        var now = new Date()
        if (props.isNight) {
            if (global.nightObj.sunset.timestamp < now.getTime()) {
                return t('feature.day_night.time_past_sunset')//'Time past Sunset'
            }
            return t('feature.day_night.time_to_sunset')//'Time to Sunset'
        }
        else {
            if (now.getTime() < global.dayObj.sunrise.timestamp) {
                return t('feature.day_night.time_to_sunrise')//'Time to Sunrise'
            }
            return t('feature.day_night.time_past_sunrise')//'Time past Sunrise'
        }
    }

    function timeDesc2() {
        if (props.isNight) {
            return t('feature.day_night.time_to_sunrise')//'Time to Sunrise'
        }
        return t('feature.day_night.time_to_sunset')//'Time to Sunset'
    }

    function overview() {
        return <View className='pop_ring_bg pop_overview_bg'>
            <Text className='pop_duration_title'>{props.isNight ? t('feature.day_night.night_duration') : t('feature.day_night.day_duration')}</Text>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(8), display: 'flex', width: '100%' }}>
                <Text className='pop_duration_txt'>{props.isNight ? nightDuration() : dayDuration()}</Text>
            </View>
            {
                !isCompleted() && <View style={{ marginTop: rpxToPx(20), display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                    <View className='countdown_time_bg'>
                        <Text className='title' style={{ color: '#fff', opacity: 0.4 }}>{timeDesc()}</Text>
                        <Text className='value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{timeCount()}</Text>
                    </View>
                    {
                        showExtraData() && <View className='countdown_time_bg'>
                            <Text className='title' style={{ color: '#fff', opacity: 0.4 }}>{timeDesc2()}</Text>
                            <Text className='value' style={{ opacity: 0.4, color: props.isNight ? ColorType.night : ColorType.day }}>{timeCount2()}</Text>
                        </View>
                    }

                </View>
            }

        </View>
    }

    function nightDurationDesc() {
        if (!props.authInfo || !(props.authInfo as any).lat) {
            if (new Date().getHours() >= 6) {
                return [t('feature.day_night.tonight'), t('feature.day_night.tomorrow')]
            }
            return [t('feature.day_night.last_night'), t('feature.day_night.today')]
        }

        if (diffTimeZone()) {
            var sunriseDate = new Date(TimeFormatter.transferTimestamp(global.nightObj.sunrise.timestamp, props.authInfo.timezone.gmt))
            var sunsetDate = new Date(TimeFormatter.transferTimestamp(global.nightObj.sunset.timestamp, props.authInfo.timezone.gmt))
            return [
                (sunsetDate.getMonth() + 1) + '月' + sunsetDate.getDate() + '日',
                (sunriseDate.getMonth() + 1) + '月' + sunriseDate.getDate() + '日',
            ];
        }
        var strSunset = ''
        var strSunrise = '';
        if (global.nightObj) {
            if (new Date().getDate() == new Date(global.nightObj.sunset.timestamp).getDate()) {
                strSunset = t('feature.day_night.tonight')
            }
            else if (new Date().getDate() == new Date(global.nightObj.sunset.timestamp + 24 * 3600 * 1000).getDate()) {
                strSunset = t('feature.day_night.last_night')
            }
            else if (new Date().getDate() == new Date(global.nightObj.sunset.timestamp - 24 * 3600 * 1000).getDate()) {
                strSunset = t('feature.day_night.tomorrow')
            }
            else {
                strSunset = dayjs(global.nightObj.sunset.timestamp).format(global.language == 'en' ? 'MMM D' : 'M月D日')
            }
            if (new Date().getDate() == new Date(global.nightObj.sunrise.timestamp).getDate()) {
                strSunrise = t('feature.day_night.today')
            }
            else if (new Date().getDate() == new Date(global.nightObj.sunrise.timestamp + 24 * 3600 * 1000).getDate()) {
                strSunrise = t('feature.day_night.yesterday')
            }
            else if (new Date().getDate() == new Date(global.nightObj.sunrise.timestamp - 24 * 3600 * 1000).getDate()) {
                strSunrise = t('feature.day_night.tomorrow')
            }
            else {
                strSunrise = dayjs(global.nightObj.sunrise.timestamp).format(global.language == 'en' ? 'MMM D' : 'M月D日')
            }
        }
        return [strSunset, strSunrise];
    }

    function dayDurationDesc() {
        debugger
        if (!props.authInfo || !(props.authInfo as any).lat) {
            if (new Date().getHours() >= 18) {
                return [t('feature.day_night.tomorrow'), t('feature.day_night.tomorrow')]
            }
            return [t('feature.day_night.today'), t('feature.day_night.today')]
        }
        if (diffTimeZone()) {
            var sunriseDate = new Date(TimeFormatter.transferTimestamp(global.dayObj.sunrise.timestamp, props.authInfo.timezone.gmt))
            var sunsetDate = new Date(TimeFormatter.transferTimestamp(global.dayObj.sunset.timestamp, props.authInfo.timezone.gmt))
            return [
                (sunriseDate.getMonth() + 1) + '月' + sunriseDate.getDate() + '日',
                (sunsetDate.getMonth() + 1) + '月' + sunsetDate.getDate() + '日',
            ];
        }
        var strSunset = ''
        var strSunrise = '';
        if (global.dayObj) {
            if (new Date().getDate() == new Date(global.dayObj.sunset.timestamp).getDate()) {
                strSunset = t('feature.day_night.tonight')
            }
            else if (new Date().getDate() == new Date(global.dayObj.sunset.timestamp + 24 * 3600 * 1000).getDate()) {
                strSunset = t('feature.day_night.last_night')
            }
            else if (new Date().getDate() == new Date(global.dayObj.sunset.timestamp - 24 * 3600 * 1000).getDate()) {
                strSunset = t('feature.day_night.tomorrow')
            }
            else {
                strSunset = dayjs(global.dayObj.sunset.timestamp).format(global.language == 'en' ? 'MMM D' : 'M月D日')
            }
            if (new Date().getDate() == new Date(global.dayObj.sunrise.timestamp).getDate()) {
                strSunrise = t('feature.day_night.today')
            }
            else if (new Date().getDate() == new Date(global.dayObj.sunrise.timestamp + 24 * 3600 * 1000).getDate()) {
                strSunrise = t('feature.day_night.yesterday')
            }
            else if (new Date().getDate() == new Date(global.dayObj.sunrise.timestamp - 24 * 3600 * 1000).getDate()) {
                strSunrise = t('feature.day_night.tomorrow')
            }
            else {
                strSunrise = dayjs(global.dayObj.sunrise.timestamp).format(global.language == 'en' ? 'MMM D' : 'M月D日')
            }
        }
        return [strSunrise, strSunset];
        // if (props.dayDate.getDate() == new Date().getDate()) {
        //     return [t('feature.day_night.today'),t('feature.day_night.today')]
        // }
        // return [t('feature.day_night.tomorrow'),t('feature.day_night.tomorrow')]
    }

    function diffTimeZone() {
        var now = new Date()
        if (props.authInfo && props.authInfo.timezone) {
            var t1 = TimeFormatter.tzLocalTime(now.getTime(), props.authInfo.timezone.id)//dayjs(now.getTime()).tz(props.authInfo.timezone.id)
            if (now.getHours() == t1.hour() && now.getMinutes() == t1.minute()) {
                return false
            }
            else {
                return true
            }
        }
        return false
    }

    function events() {
        let timelineItems: any = []

        const timeFormat = global.language == 'en' ? 'MMM D HH:mm' : 'M月D日 HH:mm'
        const timeFormat2 = global.language == 'en' ? 'MMM D' : 'M月D日'

        if (props.isNight) {
            if (isCompleted()) {
                var newT;
                if (props.authInfo.timezone) {
                    newT = TimeFormatter.tzTimeFormateLocalTime(props.authInfo.night_completed.sunset_ts, props.authInfo.timezone.id, timeFormat)
                    //dayjs(props.authInfo.night_completed.sunset_ts).tz(props.authInfo.timezone.id).format('M月D日 HH:mm')
                }
                else {
                    newT = dayjs(props.authInfo.night_completed.sunset_ts).format(timeFormat)
                }

                var list = nightDurationDesc()
                timelineItems.push(
                    {
                        status: 'done',
                        title: t('feature.day_night.sunset'),//list[0],
                        // content: newT,
                        content: diffTimeZone() ? newT : TimeFormatter.dateTimeFormate(props.authInfo.night_completed.sunset_ts, true),
                        date: '',
                        color: ColorType.night
                    }
                )
                var newT2;
                if (props.authInfo.timezone) {
                    newT2 = TimeFormatter.tzTimeFormateLocalTime(props.authInfo.night_completed.sunrise_ts, props.authInfo.timezone.id, timeFormat)

                    //dayjs(props.authInfo.night_completed.sunrise_ts).tz(props.authInfo.timezone.id).format('M月D日 HH:mm')
                }
                else {
                    newT2 = dayjs(props.authInfo.night_completed.sunrise_ts).format(timeFormat)
                }
                // var newT2 = dayjs(props.authInfo.night_completed.sunrise_ts).tz('GMT+0800').format('MM-DD HH:mm')//TimeFormatter.transferTimestamp(props.authInfo.night_completed.sunrise_ts, props.authInfo.timezone)
                timelineItems.push(
                    {
                        status: 'done',
                        title: t('feature.day_night.sunrise'),//list[1],
                        // content: newT2,//list[1] + ' ' + global.nightObj.sunrise.time.substring(0, 5),
                        content: diffTimeZone() ? newT2 : TimeFormatter.dateTimeFormate(props.authInfo.night_completed.sunrise_ts, true),
                        date: '',
                        color: ColorType.night
                    }
                )
            }
            else {

                var list = nightDurationDesc()
                if (diffTimeZone() && global.nightObj) {
                    list[0] = TimeFormatter.tzTimeFormateLocalTime(global.nightObj.sunset.timestamp, props.authInfo.timezone.id, timeFormat2)
                    list[1] = TimeFormatter.tzTimeFormateLocalTime(global.nightObj.sunrise.timestamp, props.authInfo.timezone.id, timeFormat2)
                    // list[0] = dayjs(global.nightObj.sunset.timestamp).tz(props.authInfo.timezone.id).format('M月D日')
                    // list[1] = dayjs(global.nightObj.sunrise.timestamp).tz(props.authInfo.timezone.id).format('M月D日')

                }
                timelineItems.push(
                    {
                        status: showExtraData() ? 'done' : 'padding',
                        title: t('feature.day_night.sunset'),//list[0],
                        content: list[0] + ' ' + global.nightObj.sunset.time.substring(0, 5),
                        date: '',
                        color: ColorType.night
                    }
                )

                timelineItems.push(
                    {
                        status: 'padding',
                        title: t('feature.day_night.sunrise'),//list[1],
                        content: list[1] + ' ' + global.nightObj.sunrise.time.substring(0, 5),
                        date: '',
                        color: ColorType.night
                    }
                )

            }

        }
        else {
            if (isCompleted()) {
                var newT;
                if (props.authInfo.timezone) {
                    newT = TimeFormatter.tzTimeFormateLocalTime(props.authInfo.day_completed.sunrise_ts, props.authInfo.timezone.id, timeFormat)
                    // newT = dayjs(props.authInfo.day_completed.sunrise_ts).tz(props.authInfo.timezone.id).format('M月D日 HH:mm')
                }
                else {
                    newT = dayjs(props.authInfo.day_completed.sunrise_ts).format(timeFormat)
                }

                timelineItems.push(
                    {
                        status: 'done',
                        title: t('feature.day_night.sunrise'),//list[0],
                        content: diffTimeZone() ? newT : TimeFormatter.dateTimeFormate(props.authInfo.day_completed.sunrise_ts, true),
                        date: '',
                        color: ColorType.day
                    }
                )
                var newT2;
                if (props.authInfo.timezone) {
                    newT2 = TimeFormatter.tzTimeFormateLocalTime(props.authInfo.day_completed.sunset_ts, props.authInfo.timezone.id, timeFormat)
                    // newT2 = dayjs(props.authInfo.day_completed.sunset_ts).tz(props.authInfo.timezone.id).format('M月D日 HH:mm')
                }
                else {
                    newT2 = dayjs(props.authInfo.day_completed.sunset_ts).format(timeFormat)
                }
                timelineItems.push(
                    {
                        status: 'done',
                        title: t('feature.day_night.sunset'),//list[1],
                        content: diffTimeZone() ? newT2 : TimeFormatter.dateTimeFormate(props.authInfo.day_completed.sunset_ts, true),
                        date: '',
                        color: ColorType.day
                    }
                )
            }
            else {
                var list = dayDurationDesc()
                if (diffTimeZone() && global.dayObj) {
                    list[0] = TimeFormatter.tzTimeFormateLocalTime(global.dayObj.sunrise.timestamp, props.authInfo.timezone.id, timeFormat2)
                    list[1] = TimeFormatter.tzTimeFormateLocalTime(global.dayObj.sunset.timestamp, props.authInfo.timezone.id, timeFormat2)
                    // list[0] = dayjs(global.dayObj.sunrise.timestamp).tz(props.authInfo.timezone.id).format('M月D日')
                    // list[1] = dayjs(global.dayObj.sunset.timestamp).tz(props.authInfo.timezone.id).format('M月D日')

                }
                timelineItems.push(
                    {
                        status: showExtraData() ? 'done' : 'padding',
                        title: t('feature.day_night.sunrise'),//dayDurationDesc(),
                        content: list[0] + ' ' + global.dayObj.sunrise.time.substring(0, 5),
                        date: '',
                        color: ColorType.day
                    }
                )

                timelineItems.push(
                    {
                        status: 'padding',
                        title: t('feature.day_night.sunset'),//dayDurationDesc(),
                        content: list[1] + ' ' + global.dayObj.sunset.time.substring(0, 5),
                        date: '',
                        color: ColorType.day
                    }
                )
            }
        }
        return <View><View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
            <Timeline items={timelineItems} title='' width={468} />

        </View>
            {
                diffTimeZone() && <Text className="tz_note_desc" style={{ color: '#FA5151', opacity: 0.4, marginBottom: 10 }}>{diffentTZDesc()}</Text>
            }
        </View>
    }

    function getTZLocation() {
        var name = props.authInfo.timezone.gmt
        if (props.authInfo.timezone.name) {
            name = `${name} (${props.authInfo.timezone.name})`
        }
        return name

    }

    function getDeviceLocation() {
        return `${getTimezone()} (${getTimezoneName()})`
    }

    function getTZOffset() {
        var current1 = dayjs()
        var current = TimeFormatter.tzLocalTime(new Date().getTime(), props.authInfo.timezone.id)//dayjs().tz(props.authInfo.timezone.id)
        var offset = current.date() * 24 * 60 + current.hour() * 60 + current.minute() - current1.date() * 24 * 60 - current1.hour() * 60 - current1.minute()

        var hour = Math.floor(Math.abs(offset) / 60)
        var minute = Math.abs(offset) % 60
        var time = ''
        if (global.language == 'en') {
            time = `${hour} h`
            if (minute > 0) {
                time += ` ${minute} m`
            }
        }
        else {
            time = `${hour}小时`
            if (minute > 0) {
                time += `${minute}分钟`
            }
        }
        return offset > 0 ? t('feature.day_night.ahead_desc', { time: time }) : t('feature.day_night.behind_desc', { time: time })
    }



    function diffentTZDesc() {
        var current1 = dayjs()
        var current = TimeFormatter.tzLocalTime(new Date().getTime(), props.authInfo.timezone.id)//dayjs().tz(props.authInfo.timezone.id)
        var offset = current.date() * 24 * 60 + current.hour() * 60 + current.minute() - current1.date() * 24 * 60 - current1.hour() * 60 - current1.minute()
        var hour = Math.floor(Math.abs(offset) / 60)
        var minute = Math.abs(offset) % 60
        var time = ''
        var type = ''
        if (global.language == 'en') {
            time = `${hour} h`
            type = offset > 0 ? t('feature.day_night.ahead_of') : t('feature.day_night.behind')
            if (minute > 0) {
                time += ` ${minute} m`
            }
        }
        else {
            time = `${hour}小时`
            type = offset > 0 ? t('feature.day_night.ahead_of') : t('feature.day_night.behind')
            if (minute > 0) {
                time += `${minute}分钟`
            }
        }
        return t('feature.common.diff_tz_desc', { location: getTZLocation(), device_location: getDeviceLocation(), offset: getTZOffset() })
    }



    function getLocation() {
        var city = ''
        if ((props.authInfo as any).address) {
            if ((props.authInfo as any).address.city.length > 0) {
                city = (props.authInfo as any).address.city
            }
            else if ((props.authInfo as any).address.province.length > 0) {
                city = (props.authInfo as any).address.province
            }
            else if ((props.authInfo as any).address.country.length > 0) {
                city = (props.authInfo as any).address.country
            }
            else {
                city = t('feature.track_time_duration.third_ring.unknown')
            }
        }
        else {
            city = t('feature.track_time_duration.third_ring.unknown')
        }
        // return city +' | '+parseInt(authInfo.lat)+'°'+ ' '+parseInt(authInfo.lng)
        return `${city} | ${Math.abs(parseInt(props.authInfo.lat))}°${parseInt(props.authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(props.authInfo.lng))}°${parseInt(props.authInfo.lng) < 0 ? 'W' : 'E'} | ${props.authInfo.timezone.gmt}`
    }

    function chooseLocation() {
        props.updateLocation()
    }

    function clickFooterBtn(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        // else {
        //     props.onClose()
        // }
        // 
        showAlert({
            title: t('feature.day_night.location_need'),
            content: props.isNight ? t('feature.day_night.location_need_content_night') : t('feature.day_night.location_need_content_day'),
            showCancel: true,
            cancelText: t('feature.day_night.later'),
            confirmText: t('feature.day_night.picker_now'),
            confirm: () => {
                props.updateLocation()
            }
        })
    }

    function testTapLocationIndex(index) {
        switch (index) {
            case 0:
                {
                    global.uploadLocation({
                        latitude: 40.697,
                        longitude: -74.309
                    })
                }
                break;
            case 1:
                {
                    global.uploadLocation({
                        latitude: 59.699,
                        longitude: -179.463
                    })
                }
                break;
            case 2:
                {
                    global.uploadLocation({
                        latitude: 64.4190338,
                        longitude: 15.3812476
                    })
                }
                break;
            case 3:
                {
                    global.uploadLocation({
                        latitude: -40.4221762,
                        longitude: 164.4216501
                    })
                }
                break;
        }
    }

    function testChangeLocation() {
        if (process.env.TARO_ENV == 'rn' && kIsIOS) {
            showActionSheet({
                showActionSheetWithOptions: showActionSheetWithOptions,
                itemList: [
                    '纽约40.697,-74.309',
                    '阿拉斯加59.699,-179.463',
                    '芬兰64.4190338,15.3812476',
                    '新西兰-40.4221762,164.4216501'
                ],
                success: (res) => {
                    testTapLocationIndex(res)
                }
            });
            return
        }

        Taro.showActionSheet({
            itemList: [
                '纽约40.697,-74.309',
                '阿拉斯加59.699,-179.463',
                '芬兰64.4190338,15.3812476',
                '新西兰-40.4221762,164.4216501'
            ]
        })
            .then(res => {
                console.log(res.tapIndex)
                testTapLocationIndex(res.tapIndex)
            })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    return <View className='detail_container'>
        {/* {
            isCompleted() ? <Text className='detail_popup_title' >{getCompletedTitle()}<Text className='detail_popup_subttitle'> {getSubTitle()}</Text></Text> :
                <Text className='detail_popup_title' >{getTitle()}</Text>

        } */}
        <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-end' }}>
            <Text className='detail_popup_title'>{isCompleted() ? getCompletedTitle() : getTitle()}</Text>
            {
                isCompleted() && <Text className='detail_popup_subttitle'> {getSubTitle()}</Text>
            }

        </View>
        {
            user.test_user && <Text style={{ color: '#fff', fontSize: 20, fontWeight: 'bold' }} onClick={testChangeLocation}>位置更改测试</Text>
        }

        <View className='detail_tabbar'>
            <View onClick={() => { setTabIndex(0) }} className={tabIndex == 0 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.overview')}</View>
            <View onClick={() => { setTabIndex(1) }} className={tabIndex == 1 ? 'detail_tabitem_sel' : 'detail_tabitem_nor'}>{t('feature.day_night.events')}</View>
        </View>

        <View className='detail_content'>
            {
                tabIndex == 0 ? overview() : events()
            }
        </View>

        {
            (props.authInfo && props.authInfo.lat) ?
                <View style={{ display: 'flex', flexDirection: 'column' }}>
                    <Text className='day_night_pop_location'>{getLocation()}</Text>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Text className='day_night_pop_desc'>{t('feature.track_time_duration.third_ring.base_location_desc')}</Text>
                        <View onClick={chooseLocation}>
                            <Text className='day_night_pop_choose' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{t('feature.track_time_duration.third_ring.update_my_location')}</Text>
                        </View>
                    </View>
                </View> :
                <View className='detail_bottom'>{
                    process.env.TARO_ENV == 'weapp' ?
                        <View className='detail_bottom_btn' style={{ color: '#000' }} onClick={(e) => {
                            clickFooterBtn(e)
                        }}>{props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}</View> :
                        <View onClick={(e) => {
                            clickFooterBtn(e)
                        }}>
                            <LinearGradient
                                style={{
                                    width: 300,
                                    height: 50,
                                    borderRadius: 25,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexDirection: 'row'
                                }}
                                colors={[ColorType.fast, ColorType.sleep]}
                                start={{ x: 0, y: 0 }}
                                end={{ x: 1, y: 0 }}

                            >
                                {
                                    isLoading && <View style={{ display: 'flex', overflow: 'hidden', height: 20, marginRight: 5 }}><AtActivityIndicator mode="center" color="#000" /></View>
                                }
                                <Text style={{ fontWeight: 'bold', fontSize: 18, color: '#000', opacity: isLoading ? 0.6 : 1.0 }}>{props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}</Text>
                            </LinearGradient>
                        </View>
                }
                </View>
        }


    </View>
}