taro/src/features/food/FoodTimelineItem.tsx

import { View, Image, Text } from "@tarojs/components";
import './FoodTimelineItem.scss'
import Taro from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import { editFoodJournal } from "@/services/foodJournal";
import { useEffect, useState } from "react";
import LimitPickers from "@/components/input/LimitPickers";
import Modal from "@/components/layout/Modal";
import { ColorType } from "@/context/themes/color";
import { useSelector } from "react-redux";

export default function Component(props: { data: any, delete: Function, preview: Function }) {
    const common = useSelector((state: any) => state.common);
    const [detail, setDetail] = useState(props.data)
    const [count, setCount] = useState(0)
    const [showModal, setShowModal] = useState(false)
    const [isStart, setIsStart] = useState(false)
    const { t } = useTranslation()

    useEffect(() => {
        setDetail(props.data)
    }, [props.data])

    function preview() {
        // Taro.previewImage({
        //     current: props.data.cover,
        //     urls: [props.data.cover]
        // })
        props.preview()
    }

    function showActionSheet() {
        Taro.showActionSheet({
            itemList: [t('feature.common.action_sheet.delete'), '餐前时间', '餐后时间']
        })
            .then(res => {
                switch (res.tapIndex) {
                    case 0:
                        Taro.showModal({
                            title: t('feature.common.modal.delete_item_title'),
                            content: t('feature.common.modal.delete_item_content'),
                            success: function (res) {
                                if (res.confirm) {
                                    props.delete();
                                }
                            }
                        })
                        break;
                    case 1:
                        {
                            setIsStart(true)
                            setShowModal(true)
                        }
                        break;
                    case 2:
                        {
                            setIsStart(false)
                            setShowModal(true)
                        }
                        break;
                }
            })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    function updateTag(index) {
        var tag = common.meal_tags[index]
        editFoodJournal({
            meal_tag: {
                code: tag.code
            }
        }, detail.id).then(res => {
            var obj = detail
            // obj.tags = [tag]
            obj.meal_tag = {
                code: tag.code,
                label: tag.label
            }
            setDetail(obj)
            setCount(count + 1)
        }).catch(e => {

        })
    }

    function updateTime(e) {
        var date = new Date(e)
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var obj: any;
        obj = {
            start: {
                date: (year + '') + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day),
                timestamp: e
            }
        }
        if (!isStart) {
            obj = {
                end: {
                    date: (year + '') + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day),
                    timestamp: e
                }
            }
        }

        editFoodJournal({
            ...obj
        }, detail.id).then(res => {
            setDetail(res)
            setCount(count + 1)
        }).catch(e => {

        })
    }

    function getTime(t) {
        var date = new Date(t)
        var hour = date.getHours()
        var minute = date.getMinutes()
        return (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute)
    }

    return <View className="food_timeline_item" onLongPress={showActionSheet}>
        {/* <View className="thumb" style={{backgroundColor:'pink'}}/> */}
        <View className="tags">
            {
                common.meal_tags.map((item, index) => {
                    return <Text onClick={() => updateTag(index)}>{item.label}</Text>
                })
            }
        </View>
        <View className="thumb_bg">
            <Image className="thumb" src={detail.cover} mode="aspectFill" onClick={preview} />
            <View className="food_desc">
                <Text>{detail.meal_tag && detail.meal_tag.label}</Text>
                <Text>{detail.start && getTime(detail.start.timestamp)} </Text>
                {
                    detail.end.timestamp && <Text>{'-' + getTime(detail.end.timestamp)}</Text>
                }
            </View>
        </View>
        <Text className="food_item_date">{detail.start.date}</Text>
        {
            showModal && <Modal dismiss={() => { setShowModal(false) }} confirm={() => { setShowModal(false) }}>
                <View className='modal_content'>
                    <LimitPickers
                        isRealTime={true} time={new Date().getTime()} limit={new Date().getTime() - 120 * 24 * 3600 * 1000}
                        title={isStart ? '餐前時間' : '餐後時間'}
                        themeColor={ColorType.fast}
                        limitDay={120} onCancel={() => { setShowModal(false) }}
                        onChange={(e) => {
                            updateTime(e)
                            setShowModal(false)
                        }} />
                </View>
            </Modal>
        }

    </View>
}