taro/src/pages/clock.tsx

import { Component, PropsWithChildren, useEffect, useRef, useState } from 'react'
import { View, Text, Button, Input, Picker } from '@tarojs/components'
import './index/index.scss'
import './Clock.scss'
import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
// import ComponentA from './component'
import Rings from '@components/Rings';

import { useDispatch, useSelector } from 'react-redux';
import { getInfoSuccess } from '@/store/user';
import { wxPubFollow } from '@/services/permission';
import { gobalConfigs, staticResources } from '@/services/common';
import { use } from 'i18next';
import Clocks from '@/features/trackTimeDuration/components/Clock';
import Console from '@/features/trackTimeDuration/components/Console';
import More from '@/features/trackTimeDuration/components/More';
import Schedule from '@/features/trackTimeDuration/components/Schedule';
import TitleBar from '@/features/trackTimeDuration/components/TitleBar';
import { getChecks, getClocks } from '@/services/trackTimeDuration';
import { setScenario } from '@/store/scenario';

import { setSpecifiedStatus, setSpecifiedState, machine } from '@/store/trackTimeMachine';
import trackTimeService from '@/store/trackTimeMachine';
import { setWXPubFollow } from '@/store/permission';
// import TabBar from '../../components/Tabbar';

export default function IndexPage() {
  const dispatch = useDispatch();
  const array: any[] = []
  const [isFollowed, setIsFollowed] = useState(false)
  const [checkData, setCheckData] = useState(null)
  const user = useSelector((state: any) => state.user);
  const permission = useSelector((state: any) => state.permission);
  const common = useSelector((state: any) => state.common);
  const [counter, setCounter] = useState(0)
  const [timerId, setTimerId] = useState(null)
  // const moreRef = useRef<any>(null);
  // global.moreRef = Taro.createRef()
  array.push('ffff');
  array.push(<Text>ffff</Text>)
  // array.push(<Rings radius={50}/>)
  global.dispatch = dispatch;
  useEffect(() => {
    dispatch(staticResources() as any);
    dispatch(gobalConfigs() as any);
    // dispatch(gobalConfigs() as any);
    trackTimeService.onTransition(state => {
      if ((state.value as any).FAST_SLEEP == 'COMPLETED' ||
        (state.value as any).FAST == 'ONGOING' ||
        (state.value as any).SLEEP == 'ONGOING' ||
        (state.value as any).FAST_SLEEP == 'ONGOING1' ||
        (state.value as any).FAST_SLEEP == 'ONGOING2' ||
        (state.value as any).FAST_SLEEP == 'ONGOING3' ||
        (state.value as any).FAST == 'COMPLETED' ||
        (state.value as any).SLEEP == 'COMPLETED') {
        getCheckData()
      }
    })
  }, [])

  useEffect(() => {
    startTimer();
    return () => {
      // 在组件卸载时清除定时器
      if (timerId) {
        clearInterval(timerId);
      }
    };
  }, [timerId]);

  const startTimer = () => {
    // 避免重复启动定时器
    if (timerId) {
      return;
    }

    const id = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);

    setTimerId(id as any);
  };


  useReady(async () => {
    const userData = await getStorage('userData');
    if (userData) {
      dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
      // return JSON.parse(userData as string) as UserState;
      setTimeout(() => {
        checkWXPubFollow()
        getCheckData()
        
      }, 200)
    }
  })

  useDidShow(() => {
    if (user.isLogin) {
      checkWXPubFollow()
      getCheckData();
    }

  })

  function getCheckData() {
    getClocks().then(res => {
      dispatch(setScenario((res as any).scenario));
      machine.context.checkData = res as any;

      global.scenario = (res as any).current_record.scenario;
      // trackTimeService.send({ type: 'RESET' });
      // trackTimeService.send({ type: (res as any).current_record.scenario });
      const currentState = trackTimeService.getSnapshot();
      let json = {};
      var key = (res as any).current_record.scenario
      var status = (res as any).current_record.status
      json[key] = status
      currentState.value = json;
      // debugger
      machine.context.currentStatus = `${key}.${status}`;//'mixed.ON_GOING2'
      setCheckData(res as any)
    })
    return
    getChecks().then(res => {
      if ((res as any).scenario) {
        dispatch(setScenario((res as any).scenario));
        global.scenario = (res as any).scenario;
        // global.checkData = res;
        // console.log((res as any).scenario.name + ' ' + (res as any).status);
        // trackTimeService.send({type:(res as any).scenario.name});
        // setSpecifiedStatus('FAST_SLEEP', 'ON_GOING');

        // 初始化状态机
        // const initialState = machine.initialState;

        // 设置指定状态为 C->3
        // const nextState = machine.transition(initialState, 'SET_SPECIFIED_STATE');
        // const specifiedState = setSpecifiedState(nextState, 'FAST_SLEEP');
        // setSpecifiedState();
        // console.log('name:'+(res as any).scenario.name)
        // machine.reset();
        trackTimeService.send({ type: 'RESET' });

        trackTimeService.send({ type: (res as any).scenario.name });

        const currentState = trackTimeService.getSnapshot();
        let json = {};
        var key = (res as any).scenario.name
        json[key] = (res as any).status
        currentState.value = json;
        // debugger
        machine.context.currentStatus = `${key}.${(res as any).status}`;//'mixed.ON_GOING2'
        machine.context.checkData = res as any;
        // debugger
        // trackTimeService.send('APPLE');
        // machine.transition(`${key}.${(res as any).status}`,'' as any);

        // trackTimeService.send({type:'START_FAST'});
        // trackTimeService.send({type:'START_SLEEP'});
        // trackTimeService.send({type:'END_SLEEP'});
        // trackTimeService.send({type:'END_SLEEP'});
        // trackTimeService.send({type:'START_FAST'});
        // trackTimeService.send({type:'END_FAST'});
        // trackTimeService.send({type:'START_SLEEP'});

        // console.log(currentState.value);
        // debugger
        // trackTimeService.send('setCurrentStatus', {status:(res as any).status});
        // setCurrentStatus((res as any).status);
        // trackTimeService.send({type:'START_FAST'});
      }
    })
  }

  function checkWXPubFollow() {
    wxPubFollow().then(res => {
      setIsFollowed((res as any).wx_pub_followed)
      // if ((res as any).wx_pub_followed == true) {
      //   // setTimeout(() => {
      //   //   dispatch(setWXPubFollow(true));
      //   // }, 1000)
      //   // dispatch(setWXPubFollow(true));
      //   setIsFollowed((res as any).wx_pub_followed)
      // }
    })
  }

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

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


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

  function schedule() {
    if (!user.isLogin) {
      return <View />
    }

    // if ((checkData as any).current_record.scenario == 'FAST_SLEEP') {
      return <Schedule />
    // }
    // return <View />
  }


  return (
    <View style={{ flex: 1, flexDirection: 'column', display: 'flex', backgroundColor: '#000', color: '#fff' }}>
      <TitleBar />
      <Clocks />
      <View className='console_box'>
        {/* <Console /> */}
      </View>

      <More ref={global.moreRef}/>
      {
        !isFollowed && user.isLogin && <Text style={{ textAlign: 'center', width: '100%' }} onClick={() => followWxPub()}>去关注公众号</Text>
      }
      {
        user.isLogin && <Text onClick={()=>{
          Taro.navigateTo({
            url:'/pages/RecordsHistory'
          })
        }}>查看全部记录</Text>
      }
      {
        checkData && schedule()
      }


      {
        checkData && (checkData as any).latest_record && <Schedule type='latest' />
      }
      {/* <Picker mode="time" start="07:00" end="20:00">
        <Text style="color: #fff;">test picker</Text>
      </Picker> */}
      <View style={{ height: 100 }} />
    </View>
  )
}