import { View, Text } from '@tarojs/components'
import './meal_list.scss'
import { useEffect, useState } from 'react'
import Modal from '@/components/layout/Modal.weapp'
import AddLabel from '../components/add_label'
import { delSchedule, getLabels, getSchedules } from '@/services/health'
import { AtSwipeAction } from "taro-ui"


export default function MealList() {
    const [showModal, setShowModal] = useState(false)
    const [list, setList] = useState<any>([])
    const [labels, setLabels] = useState<any>([])
    const [showDel, setShowDel] = useState(false)

    useEffect(() => {
        schedules()
    }, [])

    function schedules() {
        getSchedules({ window: 'EAT' }).then(res => {
            console.log('sss',res)
            if ((res as any).data && (res as any).data.length > 0) {
                setList((res as any).data)
            }
        }).catch(e => {

        })

        getLabels({ window: 'EAT' }).then(res => {
            setLabels((res as any).labels)
        })
    }

    function add() {
        setShowModal(true)
    }

    function delItem(index) {
        delSchedule(list[index].code).then(res => {
            schedules()
        })
    }

    return <View>
        {
            list.map((item, index) => {
                // return <AtSwipeAction key={index} isOpened options={[
                //     {
                //         text: '删除',
                //         style: {
                //             backgroundColor: '#FF4949'
                //         }
                //     }
                // ]}>
                return    <View className='item' key={index}>
                        {
                            showDel && <Text style={{ color: 'red', marginRight: 5 }} onClick={() => delItem(index)}>删除</Text>
                        }
        
                        <View className='item_left'>
                            <Text className='item_index'>第{index + 1}餐</Text>
                            <Text className='item_name'>{item.title}</Text>
                        </View>
                        <Text className='item_time'>{item.time}</Text>
                        <View className='item_line' />
                    </View>
                // </AtSwipeAction>
            })
        }
        

        <View className='toolbar'>
            <View className='toolbar_btn' onClick={add}>添加一餐</View>
            <View style={{ flex: 1 }} />
            <View className='toolbar_btn' onClick={() => setShowDel(!showDel)}>移除</View>
        </View>
        {
            showModal && <Modal testInfo={null}
                dismiss={() => {
                    setShowModal(false)
                }}
                confirm={() => { }}>
                <AddLabel labels={labels} />
            </Modal>
        }
    </View>
}