taro/src/features/health/MainSwiper.tsx

import { View, Swiper, SwiperItem, Text } from "@tarojs/components";
import './MainCard.scss';
import MainDayNightCard from "./MainDayNightCard";
import MainFastEatCard from "./MainFastEatCard";
import MainSleepActiveCard from "./MainSleepActiveCard";
import { useState } from "react";
import { WindowType } from "@/utils/types";
import { useDispatch, useSelector } from "react-redux";
import { setTab } from "@/store/health";
import { MainColorType } from "@/context/themes/color";
import { rpxToPx } from "@/utils/tools";
import dayjs from "dayjs";


let scrollPage = 0;
export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
    const [current, setCurrent] = useState(0)
    const [type, setType] = useState(WindowType.day)
    const health = useSelector((state: any) => state.health);

    const [scale0, setScale0] = useState(1.0)
    const [scale1, setScale1] = useState(0.8)
    const [scale2, setScale2] = useState(0.8)
    const dispatch = useDispatch()

    function pageChanged(e) {
        const page = e.detail.current
        console.log(page)
        setCurrent(page)
        props.pageChanged(page)

        var strType = WindowType.day
        if (page == 0) {
            strType = WindowType.day
        }
        else if (page == 1) {
            strType = WindowType.fast
        }
        else {
            strType = WindowType.sleep
        }

        props.typeChanged(strType)
        dispatch(setTab(page % 3))
    }

    function typeChanged(e) {
        setType(e)
        props.typeChanged(e)
    }

    function onTransition(e) {
        let x = e.detail.dx

        let scale0 = 0
        let scale1 = 0
        let scale2 = 0

        const pageWidth = 143

        if (x >= -pageWidth && x <= pageWidth) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale0 = 1 - Math.abs(x) / pageWidth * 0.2
                        scale1 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : 0.8
                        scale2 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale0 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : 0.8
                        scale1 = 1 - Math.abs(x) / pageWidth * 0.2
                        scale2 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale0 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : 0.8
                        scale1 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : 0.8
                        scale2 = 1 - Math.abs(x) / pageWidth * 0.2
                    }
                    break;
            }
        }
        else if (x >= -pageWidth*2 && x <= pageWidth*2) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale1 = 1 - (Math.abs(x)-pageWidth) / pageWidth * 0.2
                        scale2 = x > 0 ? 1 - (pageWidth - x+pageWidth) / pageWidth * 0.2 : 0.8
                        scale0 = x < 0 ? 1 - (pageWidth + x+pageWidth) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale1 = x < 0 ? 1 - (pageWidth + x+pageWidth) / pageWidth * 0.2 : 0.8
                        scale2 = 1 - (Math.abs(x)-pageWidth) / pageWidth * 0.2
                        scale0 = x > 0 ? 1 - (pageWidth - x+pageWidth) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale1 = x > 0 ? 1 - (pageWidth - x+pageWidth) / pageWidth * 0.2 : 0.8
                        scale2 = x < 0 ? 1 - (pageWidth + x+pageWidth) / pageWidth * 0.2 : 0.8
                        scale0 = 1 - (Math.abs(x)-pageWidth) / pageWidth * 0.2
                    }
                    break;
            }
        }
        else if (x >= -pageWidth*3 && x <= pageWidth*3) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale2 = 1 - (Math.abs(x)-pageWidth*2) / pageWidth * 0.2
                        scale0 = x > 0 ? 1 - (pageWidth - x+pageWidth*2) / pageWidth * 0.2 : 0.8
                        scale1 = x < 0 ? 1 - (pageWidth + x+pageWidth*2) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale2 = x < 0 ? 1 - (pageWidth + x+pageWidth*2) / pageWidth * 0.2 : 0.8
                        scale0 = 1 - (Math.abs(x)-pageWidth*2) / pageWidth * 0.2
                        scale1 = x > 0 ? 1 - (pageWidth - x+pageWidth*2) / pageWidth * 0.2 : 0.8
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale2 = x > 0 ? 1 - (pageWidth - x+pageWidth*2) / pageWidth * 0.2 : 0.8
                        scale0 = x < 0 ? 1 - (pageWidth + x+pageWidth*2) / pageWidth * 0.2 : 0.8
                        scale1 = 1 - (Math.abs(x)-pageWidth*2) / pageWidth * 0.2
                    }
                    break;
            }
        }

        setScale0(scale0)
        setScale1(scale1)
        setScale2(scale2)

    }

    function onTransitionend(){
        scrollPage = current
    }

    return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>
        <Text className="today">Today</Text>
        <Text className="main_date">{global.language == 'en' ? dayjs().format('dddd, MMM D') : dayjs().format('MMMD日, dddd')}</Text>
        {/* <View className="tabs">
            <View className="tab_item" style={{ backgroundColor: current != 0 ? '#B2B2B2' : isDay() ? MainColorType.day : MainColorType.night }} onClick={() => tapScroll(0)}></View>
            <View style={{ width: rpxToPx(40) }} />
            <View className="tab_item" style={{ backgroundColor: current != 1 ? '#B2B2B2' : isFast() ? MainColorType.fast : MainColorType.eat }} onClick={() => tapScroll(1)}></View>
            <View style={{ width: rpxToPx(40) }} />
            <View className="tab_item" style={{ backgroundColor: current != 2 ? '#B2B2B2' : isSleep() ? MainColorType.sleep : MainColorType.active }} onClick={() => tapScroll(2)}></View>
        </View> */}
        <Swiper
            onTransition={onTransition}
            onAnimationFinish={onTransitionend}
            style={{ height: 140, width: rpxToPx(750) }} circular
            previousMargin={rpxToPx(250)}
            nextMargin={rpxToPx(250)}
            onChange={pageChanged}
            current={current}>
            <SwiperItem>
                <MainDayNightCard scale={current==0?1:0.8} count={props.count} typeChanged={typeChanged} id={1} onClick={() => {
                    setCurrent(0)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainFastEatCard scale={current==1?1:0.8} count={props.count} typeChanged={typeChanged} id={2} onClick={() => {
                    setCurrent(1)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainSleepActiveCard scale={current==2?1:0.8} count={props.count} typeChanged={typeChanged} id={3} onClick={() => {
                    setCurrent(2)
                }} />
            </SwiperItem>
            {/* <SwiperItem>
                <MainDayNightCard scale={current==3?1:0.8} count={props.count} typeChanged={typeChanged} id={7} onClick={() => {
                    setCurrent(3)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainFastEatCard scale={current==4?1:0.8} count={props.count} typeChanged={typeChanged} id={8} onClick={() => {
                    setCurrent(4)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainSleepActiveCard scale={current==5?1:0.8} count={props.count} typeChanged={typeChanged} id={9} onClick={() => {
                    setCurrent(5)
                }} />
            </SwiperItem> */}
        </Swiper>

        {/* <View style={{flexDirection:'row',display:'flex'}}>
            <View style={{backgroundColor:current==0?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(0)}>
                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={4}/>
            </View>
            <View style={{backgroundColor:current==1?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(1)}>
                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={5}/>
            </View>
            <View style={{backgroundColor:current==2?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(2)}>
                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={6}/>
            </View>
        </View> */}
    </View>
}