/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-05-30 10:49:32
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2022-07-07 17:53:44
 * @FilePath: /KC-MiddlePlatform/src/pages/index/components/TodoList/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */




//待办事项模块

import { useEffect, useState } from 'react';
import './style.less';



export type todoItem = {
    id:number;
    status:number;
    taskLevel:number;
    createDate:number;
    content:string;
}

export interface TodoList {
       todoList:todoItem[];
       todoListClickHandle?:(id:number)=>void;
}

export const TodoList = (props:TodoList) => {
    
    const {todoList,todoListClickHandle} = props;
    const [todoLists, set_todoLists] = useState<todoItem[]>([]);

    const setTodoClass = (val:todoItem)=>{
        if(val.taskLevel == 3)return 'todoStatus green';
        if(val.taskLevel == 2)return 'todoStatus orange';
        if(val.taskLevel == 1)return 'todoStatus red';
    }

    const checkBtnHandle = (item:todoItem)=>{
        todoListClickHandle&&todoListClickHandle(item.id)
    }

    useEffect(()=>{
        set_todoLists(todoList)
    },[todoList])

    return (
        <div className='TodoList'>
            <div className='topTitle'>
                <span className='name'>待办事项</span>
                {/* <span className='actBtn'>全部处理</span> */}
            </div>
            <div className='wrap'>
                {
                    todoLists.map((item, index) => {
                        return (
                            <div className='todoList'  key={index}>
                                   <div className='checkBtn' onClick={()=>checkBtnHandle(item)}></div>
                                   <div className='status'>
                                         <div className={setTodoClass(item)}>医务管理系统 / 医资授予</div>
                                         <span className='date'>{item.createDate}</span>
                                   </div>
                                   <div className='detail' dangerouslySetInnerHTML={{__html:item.content}}></div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}