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

import { PageContainer, Switch, Text, View, Image } from '@tarojs/components'
import './DayNightCard.scss'
import { ColorType } from '@/context/themes/color'
import { useEffect, useState } from 'react'
import Box from '@/components/layout/Box'
import Taro, { useDidShow } from '@tarojs/taro'
import { clearLocation, getPerm, latestLocation, uploadPerm } from '@/services/user'
import { useDispatch, useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { TimeFormatter } from '@/utils/time_format'
import { systemLocation } from '@/services/common'
import { setDayRingData, showDay } from '@/store/day'
import { setNightRingData, showNight, updateMember } from '@/store/night'
import Modal from '@/components/layout/Modal.weapp'
import { rpxToPx } from '@/utils/tools'
import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
import DayNightDetailPopup from './DayNightDetailPopup'
import { IconDay, IconInfo, IconNight } from '@/components/basic/Icons'
import { getClocks } from '@/services/trackTimeDuration'
import { request } from '@/services/http/request'
import { API_USER_LOCATION } from '@/services/http/api'

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

let locationDetail;

let sunriseA = new Date()
sunriseA.setHours(6)
sunriseA.setMinutes(0)
sunriseA.setSeconds(0)
sunriseA.setMilliseconds(0)
const sunsetA = new Date()
sunsetA.setHours(18)
sunsetA.setMinutes(0)
sunsetA.setSeconds(0)
sunsetA.setMilliseconds(0)

const sunriseB = new Date()
sunriseB.setHours(6)
sunriseB.setMinutes(0)
sunriseB.setSeconds(0)
sunriseB.setMilliseconds(0)

let lastDayInfo: any = null;
let lastNightInfo: any = null;
let joingMember = false
export default function DayNightCard(props: { isNight: boolean, count: number }) {
    const user = useSelector((state: any) => state.user);
    const dayStore = useSelector((state: any) => state.day);
    const nightStore = useSelector((state: any) => state.night);
    const [authInfo, setAuthInfo] = useState(global.locationDetail ? global.locationDetail : null)
    const [sunriseTime, setSunriseTime] = useState('06:00')
    const [sunriseTmrTime, setSunriseTmrTime] = useState('06:00')
    const [sunsetTime, setSunsetTime] = useState('18:00')

    const [sunriseDate, setSunriseDate] = useState<any>(sunriseA)
    const [sunriseTmrDate, setSunriseTmrDate] = useState<any>(new Date(sunriseB.getTime() + 24 * 3600 * 1000))
    const [sunsetDate, setSunsetDate] = useState<any>(sunsetA)


    const [showDetailModal, setShowDetailModal] = useState(false)
    const [showDetailPopup, setShowDetailPopup] = useState(false)
    // const [locationDetail, setLocationDetail] = useState(null)

    const [nightDate, setNightDate] = useState(new Date())
    const [dayDate, setDayDate] = useState(new Date())
    const dispatch = useDispatch();
    const { t } = useTranslation()
    const isMember = true;
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {


        if (user.isLogin) {
            if (global.locationDetail) {
                locationDetail = global.locationDetail
                setAuthInfo(locationDetail)
            }

            var today = new Date()
            var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
            var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000 * 3)
            var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
            var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
            latestLocation({
                date_start: strYesterday, date_end: strTomorrow
            }).then(data => {
                setAuthInfo(data as any)
                updateDate(data)
                locationDetail = data
                global.locationDetail = locationDetail
                Taro.setStorage({
                    key: 'gps',
                    data: JSON.stringify(data as any)
                })
            })

        } else {
            setSunriseTime('06:00');
            setSunriseTmrTime('06:00')
            setSunsetTime('18:00')
            setSunriseDate(sunriseA)
            setSunriseTmrDate(new Date(sunriseB.getTime() + 24 * 3600 * 1000))
            setSunsetDate(sunsetA)
        }
    }, [user.isLogin])

    useEffect(() => {
        locationDetail = global.locationDetail
        setAuthInfo(locationDetail)
    }, [global.locationDetail])

    useEffect(() => {
        if (locationDetail)
            updateDate(locationDetail)
        if (props.isNight) {
            global.clearNightLocation = () => {
                clearCacheData()
            }
        }
        else {
            global.clearDayLocation = () => {
                clearCacheData()
            }
        }
    }, [])

    useEffect(() => {
        if (locationDetail) {
            var detail: any = locationDetail
            var now = new Date()
            if (now.getHours() == 0 && now.getMinutes() == 0 && now.getSeconds() == 0) {
                detail.daylights.splice(0, 1)
            }
            locationDetail = detail

            // setLocationDetail(detail)
            updateDate(detail)
        }
    }, [props.count])

    useEffect(() => {
        // if (user.test_user && joingMember) {
        //     auth()
        // }
        if (!isMember) {
            lastNightInfo = null
            lastDayInfo = null
            locationDetail = null
            setAuthInfo(null)
            setSunriseTime('06:00')
            setSunriseTmrTime('06:00')
            setSunsetTime('18:00')
            dispatch(updateMember({ isMember: isMember, gpsInfo: null }))


            dispatch(setDayRingData({
                date: new Date().getTime(),
                sunrise: '06:00',
                sunset: '18:00'
            }))
            dispatch(setNightRingData({
                date: new Date().getTime(),
                sunrise: '06:00',
                sunset: '18:00'
            }))
        }
        else {
            getGPSCache()
        }
    }, [user.test_user])

    useDidShow(() => {
        if (!user.isLogin) {
            dispatch(showNight(false))
            dispatch(showDay(false))
            Taro.setStorage({
                key: 'showNightRing',
                data: false
            })
            Taro.setStorage({
                key: 'showDayRing',
                data: false
            })
        }
    })

    async function getGPSCache() {
        var gps = await getStorage('gps')
        if (gps && gps.length > 0) {
            locationDetail = JSON.parse(gps)
            global.locationDetail = JSON.parse(gps)
        }
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }

    function updateDate(data) {

        var today = new Date()
        // var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
        var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000)
        // var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
        // var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
        if (isMember && data && data.daylights && data.daylights.length > 0) {
            var yesterdayDate = new Date(data.daylights[0].date + 'T' + data.daylights[0].sunset)
            var todaySunriseDate = new Date(data.daylights[1].date + 'T' + data.daylights[1].sunrise)
            var todaySunsetDate = new Date(data.daylights[1].date + 'T' + data.daylights[1].sunset)
            var tomorrowSunriseDate = new Date(data.daylights[2].date + 'T' + data.daylights[2].sunrise)
            var tomorrowSunsetDate = new Date(data.daylights[2].date + 'T' + data.daylights[2].sunset)

            // var tomorrowSunsetDate = new Date(data.daylights[2].date + 'T' + data.daylights[2].sunset)
            //今天凌晨日出前
            if (yesterdayDate.getTime() < today.getTime() && today.getTime() < todaySunriseDate.getTime()) {
                setNightDate(yesterdayDate)
                setDayDate(today)
                if (props.isNight) {
                    setSunsetTime(data.daylights[0].sunset)
                    setSunriseTmrTime(data.daylights[1].sunrise)
                    setSunsetDate(yesterdayDate)
                    setSunriseTmrDate(todaySunriseDate)

                }
                else {
                    setSunriseTime(data.daylights[1].sunrise)
                    setSunsetTime(data.daylights[1].sunset)
                    setSunriseDate(todaySunriseDate)
                    setSunsetDate(todaySunsetDate)
                }
                updateNightStore(yesterdayDate, data.daylights[1].sunrise, data.daylights[0].sunset)
                updateDayStore(today, data.daylights[1].sunrise, data.daylights[1].sunset)
            }
            //今天白天（今天出日后-日落前）
            else if (todaySunriseDate.getTime() < today.getTime() && today.getTime() < todaySunsetDate.getTime()) {
                setNightDate(todaySunsetDate)
                setDayDate(todaySunriseDate)
                if (props.isNight) {
                    setSunsetTime(data.daylights[1].sunset)
                    setSunriseTmrTime(data.daylights[2].sunrise)
                    setSunsetDate(todaySunsetDate)
                    setSunriseTmrDate(tomorrowSunriseDate)
                }
                else {
                    setSunriseTime(data.daylights[1].sunrise)
                    setSunsetTime(data.daylights[1].sunset)
                    setSunsetDate(todaySunsetDate)
                    setSunriseDate(todaySunriseDate)
                }
                updateNightStore(today, data.daylights[2].sunrise, data.daylights[1].sunset)
                updateDayStore(today, data.daylights[1].sunrise, data.daylights[1].sunset)
            }
            //今天夜晚
            else if (today.getTime() > todaySunsetDate.getTime() && today.getTime() < tomorrowSunriseDate.getTime()) {
                setNightDate(todaySunsetDate)
                setDayDate(tomorrowSunriseDate)
                if (props.isNight) {
                    setSunsetTime(data.daylights[1].sunset)
                    setSunriseTmrTime(data.daylights[2].sunrise)
                    setSunsetDate(todaySunsetDate)
                    setSunriseTmrDate(tomorrowSunriseDate)
                }
                else {
                    setSunriseTime(data.daylights[2].sunrise)
                    setSunsetTime(data.daylights[2].sunset)
                    setSunriseDate(tomorrowSunriseDate)
                    setSunsetDate(tomorrowSunsetDate)
                }
                updateNightStore(today, data.daylights[2].sunrise, data.daylights[1].sunset)
                updateDayStore(tomorrowSunriseDate, data.daylights[2].sunrise, data.daylights[2].sunset)
            }
        }
        else {
            locationDetail = null
            setAuthInfo(null)
            setSunriseTime('06:00')
            setSunriseTmrTime('06:00')
            setSunsetTime('18:00')
            dispatch(updateMember({ isMember: isMember, gpsInfo: null }))


            dispatch(setDayRingData({
                date: new Date().getTime(),
                sunrise: '06:00',
                sunset: '18:00'
            }))
            dispatch(setNightRingData({
                date: new Date().getTime(),
                sunrise: '06:00',
                sunset: '18:00'
            }))
        }

    }

    function updateNightStore(date, sunrise, sunset) {
        if (lastNightInfo && lastNightInfo.date.getDate() == new Date(date).getDate() &&
            lastNightInfo.sunrise == sunrise &&
            lastNightInfo.sunset == sunset
        ) {
            return
        }
        lastNightInfo = {
            date,
            sunrise,
            sunset
        }
        dispatch(setNightRingData({
            date: date.getTime(),
            sunrise: sunrise,
            sunset: sunset
        }))
    }

    function updateDayStore(date, sunrise, sunset) {
        if (lastDayInfo && lastDayInfo.date.getDate() == new Date(date).getDate() &&
            lastDayInfo.sunrise == sunrise &&
            lastDayInfo.sunset == sunset
        ) {
            return
        }
        lastDayInfo = {
            date,
            sunrise,
            sunset
        }
        dispatch(setDayRingData({
            date: date.getTime(),
            sunrise: sunrise,
            sunset: sunset
        }))
    }

    function tapCard(e) {
        // if (process.env.TARO_ENV == 'weapp') {
        //     e.stopPropagation()
        // }
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        if (!dayStore.showDayRing) {
            return
        }
        setShowDetailPopup(true)
    }

    function auth(e?: any) {
        if (e && process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        var today = new Date()
        var yesterday = new Date(today.getTime() - 24 * 3600 * 1000)
        var tomorrow = new Date(today.getTime() + 24 * 3600 * 1000 * 3)
        var strYesterday = `${yesterday.getFullYear()}-${TimeFormatter.padZero(yesterday.getMonth() + 1)}-${TimeFormatter.padZero(yesterday.getDate())}`
        var strTomorrow = `${tomorrow.getFullYear()}-${TimeFormatter.padZero(tomorrow.getMonth() + 1)}-${TimeFormatter.padZero(tomorrow.getDate())}`
        // systemLocation({
        //     lat: 77,
        //     lng: 20,
        //     date_start: strYesterday,
        //     date_end: strTomorrow,
        //     coordinate_system_standard: 'GCJ-02'
        // }).then(data => {
        // })
        // return

        if (process.env.TARO_ENV == 'rn') {
            Taro.getLocation({
                success(res) {
                    systemLocation({
                        lat: res.latitude,
                        lng: res.longitude,
                        // name: 'app test',
                        // address: 'app test',
                        date_start: strYesterday,
                        date_end: strTomorrow,
                        // coordinate_system_standard: 'GCJ-02'
                    }).then(data => {
                        console.log('get Location',data)
                        updateDate(data);
                        locationDetail = data;
                        global.locationDetail = locationDetail
                        setAuthInfo(data as any)
                        setSunriseTime((data as any).daylights[0].sunrise)
                        setSunriseTmrTime((data as any).daylights[1].sunrise)
                        setSunsetTime((data as any).daylights[0].sunset)
                        Taro.setStorage({
                            key: 'gps',
                            data: JSON.stringify(data as any)
                        })
                        dispatch(updateMember({ isMember: isMember, gpsInfo: (data as any) }))
                        showRing()
                    })
                },
                fail(res) {
                    if (res.errMsg == 'Permissions denied!') {
                        alert('aaa')
                    }
                    console.log(res)
                    showRing()
                },
                complete(res) {

                }
            })
            return
        }
        joingMember = false;
        Taro.chooseLocation({
            latitude: authInfo && authInfo.lat ? authInfo.lat : undefined,
            longitude: authInfo && authInfo.lat ? authInfo.lng : undefined,
            success: function (res) {

                systemLocation({
                    lat: res.latitude,
                    lng: res.longitude,
                    name: res.name,
                    address: res.address,
                    date_start: strYesterday,
                    date_end: strTomorrow,
                    coordinate_system_standard: 'GCJ-02'
                }).then(data => {
                    updateDate(data);
                    locationDetail = data;
                    global.locationDetail = locationDetail
                    setAuthInfo(data as any)
                    setSunriseTime((data as any).daylights[0].sunrise)
                    setSunriseTmrTime((data as any).daylights[1].sunrise)
                    setSunsetTime((data as any).daylights[0].sunset)
                    Taro.setStorage({
                        key: 'gps',
                        data: JSON.stringify(data as any)
                    })
                    showRing()
                    dispatch(updateMember({ isMember: isMember, gpsInfo: (data as any) }))
                })

            },
            fail(res) {
                Taro.showToast({
                    title: '位置修改失败!\n请重新选择就近位置',
                    icon: 'none'
                })
                showRing()
            },
            complete(res) {

            }
        })

    }

    function showRing() {
        dispatch(showNight(true))
        dispatch(showDay(true))
        Taro.setStorage({
            key: 'showNightRing',
            data: true
        })
        Taro.setStorage({
            key: 'showDayRing',
            data: true
        })
    }

    function getLocation() {
        var city = ''
        if ((authInfo as any).address){
            if ((authInfo as any).address.city.length > 0) {
                city = (authInfo as any).address.city
            }
            else if ((authInfo as any).address.province.length > 0) {
                city = (authInfo as any).address.province
            }
            else if ((authInfo as any).address.country.length > 0) {
                city = (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(authInfo.lat))}°${parseInt(authInfo.lat) < 0 ? 'S' : 'N'} ${Math.abs(parseInt(authInfo.lng))}°${parseInt(authInfo.lng) < 0 ? 'W' : 'E'}`
    }

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





    function clearCacheData() {
        locationDetail = null
        Taro.removeStorage({ key: 'gps' })
        setAuthInfo(null)
        setSunriseTime('06:00')
        setSunriseTmrTime('06:00')
        setSunsetTime('18:00')
        dispatch(updateMember({ isMember: isMember, gpsInfo: null }))


        dispatch(setDayRingData({
            date: new Date().getTime(),
            sunrise: '06:00',
            sunset: '18:00'
        }))
        dispatch(setNightRingData({
            date: new Date().getTime(),
            sunrise: '06:00',
            sunset: '18:00'
        }))
    }

    function detailModalContent() {
        var split = new Date().toString().split(' ');
        var timezone = split[split.length - 2];
        if (!authInfo || !(authInfo as any).lat) {
            return <View style={{ height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', width: rpxToPx(750) }}>
                <Text>暂无位置信息</Text>
            </View>
        }
        return <View style={{ display: 'flex', flexDirection: 'column' }}>
            {
                <View className="cell_bg">
                    {
                        <View className="cell_full">
                            <Text className="cell_title">{t('feature.track_time_duration.third_ring.location')}</Text>
                            <Text className="cell_value">{authInfo ? getLocation() : t('feature.track_time_duration.third_ring.enter')}</Text>
                        </View>
                    }
                    <View className="cell_line" style={{ height: 1 }} />


                    {
                        <View className="cell_full" >
                            <Text className="cell_title">{t('feature.track_time_duration.third_ring.latitude')}</Text>

                            <Text className="cell_value">{(authInfo as any).lat}</Text>


                        </View>
                    }
                    <View className="cell_line" style={{ height: 1 }} />

                    <View className="cell_full">
                        <Text className="cell_title" >{t('feature.track_time_duration.third_ring.longitude')}</Text>

                        <Text className="cell_value">{(authInfo as any).lng}</Text>

                    </View>
                    <View className="cell_line" style={{ height: 1 }} />
                    <View className="cell_full">
                        <Text className="cell_title">{t('feature.track_time_duration.third_ring.timezone')}</Text>

                        <Text className="cell_value">{timezone}</Text>

                    </View>



                </View>

            }

            <Text onClick={() => {
                clearData()
                setShowDetailModal(false)
            }} style={{ width: '100%', textAlign: 'center', marginBottom: 50, color: '#fff', marginTop: 20 }}>清除位置</Text>
        </View>
    }

    function modalContent2() {
        if (process.env.TARO_ENV == 'weapp') {
            return <Modal
                testInfo={null}
                dismiss={() => {
                    setShowDetailModal(false)
                }}
                confirm={() => { }}>
                {
                    detailModalContent()
                }
            </Modal>
        }
        else if (process.env.TARO_ENV == 'rn') {
            return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                // overlayStyle='background-color:rgba(0,0,0,0.9)'
                // custom-style='background-color:#1c1c1c'
                overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                customStyle={{ backgroundColor: '#1c1c1c' }}
                closeOnSlideDown={false}
                onBeforeEnter={() => {

                }}
                onBeforeLeave={() => {
                }}
                onClick={() => { alert('b') }}
                onClickOverlay={() => { alert('a') }}
                onAfterLeave={() => { setShowDetailModal(false) }}
                show={showDetailModal} round={true} overlay={true} position='bottom'
            >
                {
                    detailModalContent()
                }
            </PageContainer>
        }
    }

    function modalContent() {
        if (process.env.TARO_ENV == 'weapp') {
            return <Modal
                testInfo={null}
                dismiss={() => {
                    setShowDetailPopup(false)
                }}
                confirm={() => { }}>
                <DayNightDetailPopup
                    sunsetDate={sunsetDate}
                    sunriseDate={sunriseDate}
                    sunriseTmrDate={sunriseTmrDate}
                    sunsetTime={sunsetTime}
                    sunriseTime={sunriseTime}
                    sunriseTmrTime={sunriseTmrTime}
                    isNight={props.isNight}
                    authInfo={authInfo}
                    nightDate={nightDate}
                    dayDate={dayDate}
                    onClose={() => { setShowDetailPopup(false) }}
                />
            </Modal>
        }
        else if (process.env.TARO_ENV == 'rn') {
            return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                // overlayStyle='background-color:rgba(0,0,0,0.9)'
                // custom-style='background-color:#1c1c1c'
                overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                customStyle={{ backgroundColor: '#1c1c1c' }}
                closeOnSlideDown={false}
                onBeforeEnter={() => {

                }}
                onBeforeLeave={() => {
                }}
                onClick={() => { alert('b') }}
                onClickOverlay={() => { alert('a') }}
                onAfterLeave={() => { setShowDetailPopup(false) }}
                show={showDetailModal} round={true} overlay={true} position='bottom'
            >
                <DayNightDetailPopup
                    sunsetDate={sunsetDate}
                    sunriseDate={sunriseDate}
                    sunriseTmrDate={sunriseTmrDate}
                    sunsetTime={sunsetTime}
                    sunriseTime={sunriseTime}
                    sunriseTmrTime={sunriseTmrTime}
                    isNight={props.isNight}
                    authInfo={authInfo}
                    nightDate={nightDate}
                    dayDate={dayDate}
                    onClose={() => { setShowDetailPopup(false) }}
                />
            </PageContainer>
        }
    }

    function nightDuration() {
        if (!authInfo || !(authInfo as any).lat) {
            if (new Date().getHours() >= 6) {
                return `${t('feature.day_night.tonight')} ${sunsetTime} - ${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime}`
            }
            return `${t('feature.day_night.last_night')} ${sunsetTime} - ${t('feature.day_night.this_morning')} ${sunriseTmrTime}`
            // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
        }
        if (nightDate.getDate() == new Date().getDate()) {
            return `${t('feature.day_night.tonight')} ${sunsetTime.substring(0, 5)} - ${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime.substring(0, 5)}`
        }
        return `${t('feature.day_night.last_night')} ${sunsetTime.substring(0, 5)} - ${t('feature.day_night.this_morning')} ${sunriseTmrTime.substring(0, 5)}`
        //`Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
    }

    function getSunsetTime() {
        if (props.isNight) {
            if (!authInfo || !(authInfo as any).lat) {
                if (new Date().getHours() >= 6) {
                    return `${t('feature.day_night.tonight')} ${sunsetTime}`
                }
                return `${t('feature.day_night.last_night')} ${sunsetTime}`
                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
            }
            if (nightDate.getDate() == new Date().getDate()) {
                return `${t('feature.day_night.tonight')} ${sunsetTime.substring(0, 5)}`
            }
            return `${t('feature.day_night.last_night')} ${sunsetTime.substring(0, 5)}`
        }
        if (!authInfo || !(authInfo as any).lat) {
            if (new Date().getHours() >= 18) {
                return `${t('feature.day_night.tomorrow')} ${sunriseTime}`

                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
            }
            return `${t('feature.day_night.today')} ${sunriseTime}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        if (dayDate.getDate() == new Date().getDate()) {
            return `${t('feature.day_night.today')} ${sunriseTime.substring(0, 5)}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        return `${t('feature.day_night.tomorrow')} ${sunriseTime.substring(0, 5)}`
    }

    function getSunriseTime() {
        if (props.isNight) {
            if (!authInfo || !(authInfo as any).lat) {
                if (new Date().getHours() >= 6) {
                    return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime}`
                }
                return `${t('feature.day_night.this_morning')} ${sunriseTmrTime}`
                // return `Yesterday ${sunsetTime} - Today ${sunriseTmrTime}`
            }
            if (nightDate.getDate() == new Date().getDate()) {
                return `${t('feature.day_night.tomorrow_morning')} ${sunriseTmrTime.substring(0, 5)}`
            }
            return `${t('feature.day_night.this_morning')} ${sunriseTmrTime.substring(0, 5)}`
        }
        if (!authInfo || !(authInfo as any).lat) {
            if (new Date().getHours() >= 18) {
                return `${t('feature.day_night.tomorrow')} ${sunsetTime}`

                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
            }
            return `${t('feature.day_night.today')} ${sunsetTime}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        if (dayDate.getDate() == new Date().getDate()) {
            return `${t('feature.day_night.today')} ${sunsetTime.substring(0, 5)}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        return `${t('feature.day_night.tomorrow')} ${sunsetTime.substring(0, 5)}`
    }

    function dayDuration() {
        if (!authInfo || !(authInfo as any).lat) {
            if (new Date().getHours() >= 18) {
                return `${t('feature.day_night.tomorrow')} ${sunriseTime} - ${sunsetTime}`

                // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
            }
            return `${t('feature.day_night.today')} ${sunriseTime} - ${sunsetTime}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        if (dayDate.getDate() == new Date().getDate()) {
            return `${t('feature.day_night.today')} ${sunriseTime.substring(0, 5)} - ${sunsetTime.substring(0, 5)}`
            // return `Today ${sunriseTime} - ${sunsetTime}`
        }
        return `${t('feature.day_night.tomorrow')} ${sunriseTime.substring(0, 5)} - ${sunsetTime.substring(0, 5)}`
        // return `Tomorrow ${sunriseTime} - ${sunsetTime}`
    }

    function nightDurationDesc1() {
        if (authInfo && authInfo.lat) {
            return t('feature.day_night.sunset_to_sunrise')
        }
        return t('feature.day_night.night_tip')
    }

    function dayDurationDesc1() {
        if (authInfo && authInfo.lat) {
            return t('feature.day_night.sunrise_to_sunset')
        }
        return t('feature.day_night.day_tip')
    }

    function longClick() {
        if (user.isLogin && user.test_user && authInfo)
            setShowDetailModal(true)
    }

    function showLocationAlert(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (isMember && authInfo && authInfo.lat) {
            tapCard(e)
            return
        }
        Taro.showModal({
            title: props.isNight ? t('feature.day_night.alert_required_night') : t('feature.day_night.alert_required_day'),
            content: props.isNight ? t('feature.day_night.alert_night_content') : t('feature.day_night.alert_day_content'),
            confirmText: t('feature.day_night.choose_location'),
            cancelText: t('feature.day_night.view_more'),
            success: function (res) {
                if (res.confirm) {
                    auth()
                    // console.log('用户点击确定')
                } else if (res.cancel) {
                    setShowDetailPopup(true)
                }
            }
        })
    }

    function tapShow() {
        dispatch(showNight(true))
        dispatch(showDay(true))
        Taro.showModal({
            title: 'Login Required',
            content: props.isNight ? 'Log in to see your daily local nighttime from sunset to sunrise.' : 'Log in to see your daily local daytime from sunrise to sunset.',
            cancelText: 'Later',
            confirmText: 'Login',
            success: function (res) {
                if (res.confirm) {
                    Taro.setStorage({
                        key: 'showNightRing',
                        data: true
                    })
                    Taro.setStorage({
                        key: 'showDayRing',
                        data: true
                    })
                    if (!user.isLogin) {
                        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                        return
                    }

                } else if (res.cancel) {
                    dispatch(showNight(false))
                    dispatch(showDay(false))
                    Taro.setStorage({
                        key: 'showNightRing',
                        data: false
                    })
                    Taro.setStorage({
                        key: 'showDayRing',
                        data: false
                    })
                }
            }
        })
    }

    function operate(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        Taro.showActionSheet({
            itemList: ['选择位置', '重置'],
            success: function (res) {
                switch (res.tapIndex) {
                    case 0:
                        auth()
                        break;
                    case 1:
                        reset()
                        break;
                }
            },
            fail: function (res) {
                console.log(res.errMsg)
            }
        })
    }

    function reset() {
        var content = ''
        if (props.isNight) {
            if (authInfo && authInfo.lat) {
                content = 'Local times for sunset and sunrise, together with the nighttime ring will turn off, and your location data will be cleared. '
            }
            else {
                content = 'Sunset and sunrise times, together with the nighttime ring will turn off.'
            }
        }
        else {
            if (authInfo && authInfo.lat) {
                content = 'Local times for sunrise and sunset, together with the daytime ring will turn off, and your location data will be cleared. '
            }
            else {
                content = 'Sunrise and sunset times, together with the daytime ring will turn off.'
            }
        }
        Taro.showModal({
            title: 'Reset Alert',
            content: content,
            success: function (res) {
                if (res.confirm) {
                    if (user.isLogin) {
                        uploadPerm({ show_ring: false })
                    }
                    clearLocation().then(res => {
                        if (global.clearNightLocation) {
                            global.clearNightLocation()
                        }
                        if (global.clearDayLocation) {
                            global.clearDayLocation()
                        }
                        lastNightInfo = null
                        lastDayInfo = null

                        dispatch(showNight(false))
                        dispatch(showDay(false))
                        Taro.setStorage({
                            key: 'showNightRing',
                            data: false
                        })
                        Taro.setStorage({
                            key: 'showDayRing',
                            data: false
                        })
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }

        })

    }

    // return <View>
    //     {
    //         !user.isLogin && <View style={{ color: '#fff' }} onClick={tapShow}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
    //     }
    //     {
    //         user.isLogin && !dayStore.showDayRing && <View style={{ color: '#fff' }} onClick={auth}>{props.isNight ? '显示当地夜晚时间' : '显示当地白天时间'}</View>
    //     }
    //     {
    //         user.isLogin && dayStore.showDayRing && <View style={{ display: 'flex', flexDirection: 'column' }} onClick={showLocationAlert} onLongPress={longClick}>
    //             <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
    //             <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>

    //             <View className='daynightsummary'>
    //                 <View style={{ display: 'flex', flexDirection: 'column' }}>
    //                     <Image className='sunicon' src={props.isNight ? require('@assets/images/sunset.png') :
    //                         require('@assets/images/sunrise.png')} />
    //                     <Image className='sunicon' src={props.isNight ? require('@assets/images/sunrise.png') :
    //                         require('@assets/images/sunset.png')} />
    //                 </View>
    //                 <View style={{ display: 'flex', flexDirection: 'column' }}>
    //                     <Text className='duration_title2'>{props.isNight ? '日落' : '日出'}</Text>
    //                     <Text style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
    //                     <Text className='duration_title2'>{!props.isNight ? '日落' : '日出'}</Text>
    //                     <Text style={{ color: !props.isNight ? ColorType.night : ColorType.day }}>{!props.isNight ? getSunsetTime() : getSunriseTime()}</Text>
    //                 </View>
    //             </View>
    //             {
    //                 authInfo && authInfo.lat ?
    //                     <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={operate}>
    //                         <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'}>{getLocation()}</View>
    //                     </View>
    //                     :
    //                     <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={operate}>
    //                         <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} >
    //                             {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
    //                         </View>
    //                     </View>
    //             }
    //         </View>
    //     }
    //     {
    //         showDetailPopup && modalContent()
    //     }
    //     {
    //         showDetailModal && modalContent2()
    //     }
    // </View>

    

    return <View style={{ color: '#fff' }} onLongPress={longClick}>
        <Box onClick={tapCard}>
            <View style={{ marginTop: -rpxToPx(14), marginBottom: -rpxToPx(14) }}>
                <View className='day_night_top'>
                    {
                        user.isLogin ? <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring_login') : t('feature.day_night.day_ring_login')}</Text> :
                            <Text className='day_night_title'>{props.isNight ? t('feature.day_night.night_ring') : t('feature.day_night.day_ring')}</Text>
                    }

                    {
                        user.isLogin && <View className='free' style={{ backgroundColor: props.isNight ? ColorType.night : ColorType.day, color: props.isNight ? '#fff' : '#1C1C1C' }}>{t('feature.day_night.limited_free')}</View>
                    }

                    <View style={{ flex: 1 }} />
                    <View style={{ height: rpxToPx(50), display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
                        <Switch checked={props.isNight ? dayStore.showDayRing : dayStore.showDayRing}
                            className='switch'
                            color={props.isNight ? ColorType.night : ColorType.day}
                            onClick={(e) => { e.stopPropagation() }}
                            onChange={(e) => {
                                if (process.env.TARO_ENV == 'weapp') {
                                    e.stopPropagation()
                                }

                                dispatch(showNight(e.detail.value))
  
                                dispatch(showDay(e.detail.value))


                                Taro.setStorage({
                                    key: 'showNightRing',
                                    data: e.detail.value
                                })
                                Taro.setStorage({
                                    key: 'showDayRing',
                                    data: e.detail.value
                                })


                                if (user.isLogin) {
                                    uploadPerm({ show_ring: e.detail.value })
                                }
                                else {

                                    if (e.detail.value) {
                                        setTimeout(() => {
                                            Taro.showModal({
                                                title: props.isNight ?
                                                    t('feature.day_night.night_alert_title') :
                                                    t('feature.day_night.day_alert_title'),
                                                content: props.isNight ?
                                                    t('feature.day_night.night_alert_content') :
                                                    t('feature.day_night.day_alert_content'),
                                                showCancel: false,
                                                confirmText: t('feature.day_night.got_it')
                                            })
                                        }, 500)
                                    }

                                }


                            }}
                        />
                    </View>
                </View>
                {
                    user.isLogin && dayStore.showDayRing && <View className='day_night_detail' onClick={showLocationAlert}>
                        <View className='day_night_detail_icon'>
                            {
                                props.isNight ? <IconNight width={rpxToPx(48)} color={ColorType.night} /> : <IconDay width={rpxToPx(48)} color={ColorType.day} />
                            }
                        </View>
                        <View style={{ display: 'flex', flexDirection: 'column', paddingTop: rpxToPx(8) }}>
                            <Text className='day_night_value' style={{ color: props.isNight ? ColorType.night : ColorType.day }}>{props.isNight ? nightDuration() : dayDuration()}</Text>
                            <Text className='day_night_desc'>{props.isNight ? nightDurationDesc1() : dayDurationDesc1()}</Text>
                            {
                                authInfo && authInfo.lat ?
                                    <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>{getLocation()}</View>
                                    </View>
                                    :
                                    <View style={{ display: 'flex', flexDirection: 'row', marginTop: rpxToPx(18) }} onClick={auth}>
                                        <View className={props.isNight ? 'night_location_btn' : 'day_location_btn'} onClick={auth}>
                                            {props.isNight ? t('feature.day_night.get_local_time') : t('feature.day_night.get_local_time_sunrise')}
                                        </View>
                                    </View>
                            }
                        </View>
                    </View>
                }

            </View>
        </Box >
        {
            showDetailPopup && modalContent()
        }
        {
            showDetailModal && modalContent2()
        }
    </View >
}