taro/src/_health/components/schedule_item.tsx

import showAlert from "@/components/basic/Alert";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import { View, Text } from "@tarojs/components";
import { AtSwipeAction } from "taro-ui";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { MainColorType } from "@/context/themes/color";
import { IconError, IconNotificationOff } from "@/components/basic/Icons";
import { useState } from "react";
import NewModal from "../base/new_modal";
import Card from "./card";
import NewTimePicker from "../base/new_timepicker";
import './schedule_item.scss'

export default function ScheduleItem(props: {
    key: any,
    obj: any,
    highlight?: boolean,
    disable?: boolean,
    gray?: boolean,
    days?: string,
    showLine: boolean,
    errors: any,
    selMode: any,
    hideReminderIcon?: boolean,
    onDelete?: Function,
    onChange?: Function,
    index: number,
    count: number
}) {
    const [showTimePicker, setShowTimePicker] = useState(false)
    const [time, setTime] = useState(props.obj.time)

    function itemStyle(obj) {
        if (obj.is_conflict) {
            return {
                // backgroundColor: '#FF00001A',
                // color: '#FF0000'
                backgroundColor: '#B2B2B21A',
                color: '#000',
                borderColor: '#FF0000',
            }
        }
        if (props.errors.length > 0) {
            return {
                backgroundColor: '#B2B2B21A',
                color: '#000',
                borderColor:'transparent'
            }
        }
        return {
            backgroundColor: '#B2B2B21A',
            color: '#000',
            borderColor: obj.window == props.selMode ? getThemeColor(props.selMode) : 'transparent',
        }
        // return {
        //     backgroundColor: obj.window == props.selMode ? getThemeColor(props.selMode) + '1A' : '#B2B2B21A',
        //     color: obj.window == props.selMode ? getThemeColor(props.selMode) : '#000'
        // }
    }
    return <View key={props.key}>
        <View className="ss" style={{
            borderTopLeftRadius: props.index == 0 ? rpxToPx(26) : 0,
            borderTopRightRadius: props.index == 0 ? rpxToPx(26) : 0,
            borderBottomLeftRadius: props.index == props.count - 1 ? rpxToPx(26) : 0,
            borderBottomRightRadius: props.index == props.count - 1 ? rpxToPx(26) : 0,
        }}>
            <AtSwipeAction
                isOpened={false}
                autoClose
                disabled={(props.obj.window != 'EAT' && props.obj.window != 'ACTIVE' && !props.disable) || props.obj.window == 'FAST' || props.obj.window == 'SLEEP'}
                options={[
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#FF4949'
                        }
                    }
                ]}
                onClick={() => {
                    if (props.obj.window == 'ACTIVE' || props.obj.window == 'EAT') {
                        // if (item.list.length == 1) {
                        //     Taro.showToast({
                        //         title: '至少保留一项',
                        //         icon: 'none'
                        //     })
                        //     return;
                        // }
                    }
                    showAlert({
                        title: '删除',
                        content: '确认删除此计划',
                        showCancel: true,
                        cancel: () => {
                            console.log('cancel')
                        },
                        confirm: () => {
                            if (props.onDelete) {
                                props.onDelete()
                            }
                        }
                    })
                }}
            ><View className='schedule_item' style={{
                width: rpxToPx(700),
                boxSizing: 'border-box',
                backgroundColor: props.highlight ? getThemeColor(props.obj.window) + '0D' : '#fff',
            }}>
                    <View className='item_left2'>
                        <StatusIndicator
                            type={props.obj.is_conflict ? StatusType.img : StatusType.normal}
                            text={props.obj.title}
                            fontSize={rpxToPx(34)}
                            fontColor="#000"
                            space={rpxToPx(12)}
                            color={props.obj.is_conflict ? MainColorType.error : props.errors.length == 0 ? getThemeColor(props.obj.window) : 'transparent'} >
                            {
                                props.obj.is_conflict && <IconError color="#fff" width={rpxToPx(26)} />
                            }

                        </StatusIndicator>
                        <View style={{ flex: 1 }} />
                        {
                            props.days && <View className="h30" style={{ color: MainColorType.g02 }}>+{props.days} day</View>
                        }
                        {
                            !props.hideReminderIcon && props.obj.specific_time && !props.obj.reminder && <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                        }
                        <View style={{ width: rpxToPx(12) }} />
                        {
                            !props.disable && props.obj.specific_time && <View className='edit_item_time schedule_border' onClick={() => {
                                // setSelIndex(i)
                                // setSelItem(obj)
                                setTime(props.obj.time)
                                setShowTimePicker(true)
                                // if (props.onClick)
                                //     props.onClick()
                            }} style={itemStyle(props.obj)}>{props.obj.time}</View>
                        }
                        {
                            props.disable && <View className="schedule_border" style={{borderColor:'transparent'}}>
                                <View className="edit_item_time" style={{ backgroundColor: 'transparent', color: props.gray ? MainColorType.g02 : '#000' }}>{props.obj.time}</View>
                            </View>
                        }


                    </View>
                    {
                        props.showLine && <View className='border_footer_line' style={{ left: rpxToPx(66) }} />
                    }
                </View>
            </AtSwipeAction>
        </View>
        {
            showTimePicker && <NewModal title={props.obj.title}
                dismiss={() => { setShowTimePicker(false) }}
                confirm={() => {
                    setShowTimePicker(false)
                    if (props.onChange)
                        props.onChange(time)
                    // props.onChange({
                    //     time: time,
                    //     duration: minutes,
                    //     isYesterday: isYesterday
                    // })
                }}
                themeColor={getThemeColor(props.obj.window)}>
                <Card>
                    <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <View className="picker_title" style={{ color: getThemeColor(props.obj.window), width: rpxToPx(618) }}>{time}
                            <View className="border_footer_line" />
                        </View>
                        <NewTimePicker time={time}
                            color={getThemeColor(props.obj.window)}
                            onChange={(e) => {
                                setTime(e)
                            }}
                        />
                    </View>
                </Card>

            </NewModal>
        }
    </View>
}