taro/src/features/trackSomething/components/Metric.tsx

import { View, Text, ScrollView, PageContainer } from "@tarojs/components";
import './Metric.scss'
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { metricCards, metricFollows, metricGroups, uploadMetric, uploadSteps } from "@/services/trackSomething";
import { TimeFormatter } from "@/utils/time_format";
import MetricItem from "./MetricItem";
import Modal from "@/components/layout/Modal";
import LimitPickers from "@/components/input/LimitPickers";
import SlidngScale from "@/components/input/SlidngScale";
import NoData from "@/components/view/NoData";
import { alphaToHex } from "@/utils/tools";
import Layout from "@/components/layout/layout";
import { MetricModalType, ModalType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import { useTranslation } from "react-i18next";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import TitleView from "@/features/trackTimeDuration/components/TitleView";
import { setTabbarStatus } from "@/store/common";
import MetricModalChoose from "./MetricModalChoose";
import MetricModalOrder from './MetricModalOrder';

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



export default function Component(props: any) {
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const [list, setList] = useState([])

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);
    const [pickerValue, setPickerValue] = useState([]);
    const [pickerItems, setPickerItems] = useState([]);
    const [isPoint, setIsPoint] = useState(false)

    const [metricItem, setMetricItem] = useState({})

    const [strTime, setStrTime] = useState('')
    const [time, setTime] = useState(0)

    const [showErrorPage, setErrorPage] = useState(false)

    const [setupTime, setSetupTime] = useState(0)
    const [triggered, setTriggered] = useState(true)
    const limitPickerRef = useRef<any>(null);
    const [count, setCount] = useState(0)
    const [showPageContainer, setShowPageContainer] = useState(false)
    const [modalType, setModalType] = useState(MetricModalType.none)
    const [themeColor, setThemeColor] = useState('#00ffff')
    const [groups, setGroups] = useState([])
    const [limits, setLimits] = useState(null)
    const [orders, setOrders] = useState([])
    const dispatch = useDispatch();
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }


    //未登录<->已登录 状态切换时，执行一次授权检查
    useEffect(() => {
        getCards();
        getGroups();
        const now = new Date();
        const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
        const timeUntilMidnight = nextMidnight.getTime() - now.getTime();

        setTimeout(() => {
            setCount(count + 1)
        }, timeUntilMidnight);
    }, [user.isLogin])

    const openModal = () => {
        setSetupTime(new Date().getTime())
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };

    global.refreshMetric = () => {
        getCards()
    }

    function getCards() {
        setTriggered(true)
        metricCards().then(res => {
            Taro.stopPullDownRefresh()
            setErrorPage(false)
            setList((res as any).cards)
            setTriggered(false)
            if ((res as any).cards.length > 0) {
                var obj = (res as any).cards[0]
                setThemeColor(obj.theme_color)
            }
            var list: any = [];
            (res as any).cards.map(item => {
                list.push({
                    name: item.name,
                    code: item.code
                })
            })
            setOrders(list)

        }).catch(e => {
            Taro.stopPullDownRefresh()
            if (list.length == 0) {
                setErrorPage(true)
            }
            setTriggered(false)
        })
    }

    function getGroups() {
        metricGroups().then(res => {
            setGroups((res as any).groups)
            setLimits((res as any).num_options_limit)
        })
    }


    //ts 把数组items: [{code: "_walk", value: 2180},{code: "_walk", value: 4444}]中的value取出来,/分割，组成字符串，如2180/4444
    function getValues(items) {
        var values = ''
        items.map((item, index) => {
            if (index == 0) {
                values = item.value
            }
            else {
                values = values + '/' + item.value
            }
        })
        return values
    }
    function goDetail(item) {
        if (user.isLogin) {
            if (!item.latest_record) {
                return
            }
            jumpPage('/pages/common/RecordsHistory?type=metric&refreshList=getCards&code=' + item.code + `&title=${item.name}` + '&themeColor=' + item.theme_color)
        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
        }
    }

    function record(item: any) {

        if (user.isLogin) {
            var now = new Date();
            var t = (now.getHours() < 10 ? '0' + now.getHours() : now.getHours()) + ":" + (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes());
            // setStrTime(t)
            setStrTime(TimeFormatter.dateTimeFormate(now.getTime()))
            setTime(now.getTime())
            setMetricItem(item)
            openModal()
        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
        }
    }

    function showTimePicker() {

        setIsTimePickerOpen(true)
    }

    function chooseTime(e) {
        setTime(e);
        setStrTime(TimeFormatter.dateTimeFormate(e))
        setIsTimePickerOpen(false)
    }

    function cancelModal() {
        (metricItem as any).schemas.map((item, index) => {
            item.tempValue = ''
        })
        closeModal()
    }

    function confirmModal() {
        closeModal()
        var date = new Date(time)
        var strDate = (date.getFullYear() + '') + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());

        var array: any[] = [];
        (metricItem as any).schemas.map((item, index) => {
            array.push({
                code: item.code,
                value: item.tempValue && item.tempValue > 0 ? item.tempValue : item.default_value
            })
        })
        var params = {
            code: (metricItem as any).code,
            timestamp: time,
            date: strDate,
            items: array,
            extra: {
                set_time: setupTime,
                confirm_time: new Date().getTime()
            }
        }

        global.postBtnUpdateStatus('normal');
        uploadMetric(params).then(res => {
            // getCards();
            (metricItem as any).schemas.map((item, index) => {
                item.tempValue = ''
            })

            list.map((item, index) => {
                if ((item as any).code == (res as any).code) {
                    (item as any).latest_record = (res as any).latest_record;
                    (item as any).schemas = (res as any).schemas;
                }
            })
            setList(JSON.parse(JSON.stringify(list)))

            global.postBtnUpdateStatus('idle');
            setTimeout(() => {
                setCount(count + 1)
            }, 31000)

        })
    }

    const limitDay = 500

    const limit = new Date().getTime() - limitDay * 3600 * 1000 * 24;

    function detail() {
        return <View>


            <View className="metric_container">
                {
                    list.map((item: any, index: number) => {
                        var unit = ''
                        var value = t('feature.track_something.metric.no_record')
                        var desc = t('feature.track_something.metric.check_unlock_data')
                        var showDetail = false;
                        if (item.latest_record) {
                            unit = item.schemas[0].default_unit
                            value = getValues(item.latest_record.items)
                            desc = TimeFormatter.dateDescription(item.latest_record.timestamp, true)
                            showDetail = true
                        }

                        if (!user.isLogin) {
                            value = t('feature.track_something.metric.un_login')
                            desc = t('feature.track_something.metric.login_can_check')
                        }
                        return <MetricItem title={item.name}
                            value={value}
                            unit={unit}
                            desc={desc}
                            btnText={t('feature.track_something.btn_record')}
                            isDisabled={false}
                            showDetail={showDetail}
                            themeColor={item.theme_color}
                            onClickDetail={() => { goDetail(item) }}
                            onClick={() => { record(item) }}
                        />
                    })
                }


            </View>
            <View className="space_width" ></View>
        </View>
    }

    function detailContent() {
        // if (process.env.TARO_ENV=='rn'){
        //     return <ScrollView>
        //         {
        //             detail()
        //         }
        //         <View style={{height:150}}/> 
        //     </ScrollView>
        // }
        return detail()
    }

    function addBtnClick() {
        Taro.showActionSheet({
            itemList: [t('feature.track_something.metric.choose_metric'),
            t('feature.track_something.metric.order')]
        })
            .then(res => {
                switch (res.tapIndex) {
                    case 0:
                        global.metricAdd = true
                        setModalType(MetricModalType.choose)
                        dispatch(setTabbarStatus(false))
                        setShowPageContainer(true)

                        break;
                    case 1:
                        global.metricAdd = false
                        setModalType(MetricModalType.order)
                        dispatch(setTabbarStatus(false))
                        setShowPageContainer(true)
                        break;
                }
            })
            .catch(err => {
                console.log(err.errMsg)
            })

    }

    function headerView() {
        return <TitleView title={t('page.metric.title')} showAddBtn={true} onClick={addBtnClick}>
        </TitleView>
    }

    function metricModalContent() {
        switch (modalType) {
            case MetricModalType.choose:
                return <MetricModalChoose
                    themeColor={themeColor}
                    cancel={modalCancel}
                    confirm={modalConfirm}
                    array={groups}
                    orders={orders}
                    limit={limits}
                />
            case MetricModalType.order:
                return <MetricModalOrder themeColor={themeColor} cancel={modalOrderCancel} confirm={modalOrderConfirm} array={orders} />
        }
        return <View />
    }

    function modalCancel() {
        setShowPageContainer(false)
    }

    function modalConfirm(datas) {
        var array: any = []
        datas.map(item => {
            array.push(item.code)
        })
        metricFollows({ codes: array }).then(res => {
            getCards()
            getGroups()
        })
        setShowPageContainer(false)

        setTimeout(() => {
            dispatch(setTabbarStatus(false))
            setModalType(MetricModalType.order)
            setShowPageContainer(true)
        }, 500)
    }

    function modalOrderCancel() {
        global.metricAdd ? modalCancel() : modalCancel()
        if (global.metricAdd) {
            setShowPageContainer(false)
            setTimeout(() => {
                dispatch(setTabbarStatus(false))
                setModalType(MetricModalType.choose)
                setShowPageContainer(true)
            }, 500)
        }
        else {
            setShowPageContainer(false)
        }
    }

    function modalOrderConfirm() {
        setShowPageContainer(false)
    }

    return <View style={{ position: 'relative' }}>
        <Layout children={showErrorPage ? <NoData refresh={() => { getCards() }} /> : detailContent()}
            title={t('page.metric.title')}
            type={TemplateType.customHeader}
            header={headerView()}
            refresh={() => { getCards() }}
            triggered={triggered}
            titleShowStyle={NaviBarTitleShowType.scrollToShow}
        />
        <PageContainer style={{ backgroundColor: '#1c1c1c' }}
            overlayStyle='background-color:rgba(0,0,0,0.9)'
            custom-style='background-color:#1c1c1c'
            closeOnSlideDown={false}
            show={showPageContainer} round={true} overlay={true} position='bottom'
            onBeforeLeave={() => { dispatch(setTabbarStatus(true)) }}
            onAfterLeave={() => { setShowPageContainer(false); }}>
            {
                metricModalContent()
            }
        </PageContainer>
        {
            isModalOpen && <Modal dismiss={closeModal} title={(metricItem as any).name}
                themeColor={(metricItem as any).theme_color}
                confirm={confirmModal}>
                <View style={{
                    display: 'flex', flexDirection: 'column',
                    width: '100%', color: '#000'
                }}>
                    <Text className='modal_title' style={{ color: (metricItem as any).theme_color }}>{(metricItem as any).name ? (metricItem as any).name : ''}</Text>
                    <View style={{ position: 'relative' }}>
                        {
                            (metricItem as any).schemas.map((item, index) => {
                                return <View key={index}>
                                    {
                                        (metricItem as any).schemas.length > 1 && <Text style={{
                                            textAlign: 'center', width: '100%', display: 'flex',
                                            justifyContent: 'center', color: (metricItem as any).theme_color
                                        }}>{item.name}</Text>
                                    }
                                    <SlidngScale step={item.step} min={item.min} max={item.max} default_value={item.default_value}
                                        unit={item.default_unit}
                                        themeColor={(metricItem as any).theme_color}
                                        changed={(e) => { item.tempValue = e }} />
                                </View>
                            })
                        }
                    </View>
                    <View className="change_time_bg ">
                        <View className="gray1 time_bg" onClick={showTimePicker}>
                            <Text className="time" >{strTime}</Text>
                        </View>

                    </View>
                    <View className='modal_operate'>
                        <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color + alphaToHex(0.4) }} onClick={cancelModal}>
                            <Text className='modal_cancel_text' style={{ color: (metricItem as any).theme_color }}>{
                                t('feature.common.picker_cancel_btn')
                            }</Text>
                        </View>
                        <View className='btn_space' />
                        <View className='modal_btn' style={{ backgroundColor: (metricItem as any).theme_color }} onClick={confirmModal}>
                            <Text className='modal_confirm_text' style={{ color: '#000' }}>{
                                t('feature.common.picker_confirm_btn')
                            }</Text>
                        </View>


                    </View>
                    {/* <View style={{ marginBottom: 20, marginTop: 20, display: 'flex', flexDirection: 'row', width: '100%' }}>
                            <Text style={{ flex: 1, textAlign: 'center', height: 50 }} onClick={cancelModal}>取消</Text>
                            <Text style={{ flex: 1, textAlign: 'center', height: 50 }} onClick={confirmModal}>确认</Text>
                        </View> */}

                </View>
            </Modal>
        }
        {

            isTimePickerOpen && <Modal
                themeColor={(metricItem as any).theme_color}
                dismiss={() => setIsTimePickerOpen(false)} confirm={() => {
                    var picker = limitPickerRef.current;
                    chooseTime((picker as any).getConfirmData());
                    setIsTimePickerOpen(false);
                }}>
                <LimitPickers ref={limitPickerRef}
                    isRealTime={true} time={time} limit={limit}
                    title={t('feature.track_something.picker_datetime')}
                    themeColor={(metricItem as any).theme_color}
                    limitDay={limitDay} onCancel={() => { setIsTimePickerOpen(false) }}
                    onChange={(e) => {
                        chooseTime(e)
                        //  pickerConfirm(e)
                        //  hidePicker()
                    }} />
            </Modal>
        }
    </View>

}