import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Popconfirm, Tag,Tabs } from 'antd';
import ProTable from '@ant-design/pro-table';
import Xiafagaojin from '../components/xiafagaojin';
import { createPatrolTemplate, delPatrolTemplate, updatePatrolTemplate, getPatrolTemplate } from '../actions/template';
import { getCheckItemsGroup } from '../actions/checkItems';
import moment from 'moment';
function YujingGuanli (props) {
    const { dispatch, user,actions } = props;
    const tableRef = useRef();
    const format = 'YYYY-MM-DD HH:mm:ss'
    const { patrolManage } = actions
    const [dataSource, setDataSource] = useState([{}]);
    const [visible, setVisible] = useState(false);
    const [type, setType] = useState();
    const [curRecord, setCurRecord] = useState();
    const [data,setdata]= useState([])
    const [tableList, settableList] = useState([])
    const [name, setName] = useState('');
    const [curState, setCurState] = useState('全部');
    const times = [moment().subtract(70, 'years').format(format), moment().format(format)]
    const [search, setSearch] = useState({ name: null, time: [times[0], times[1]], state: 'null' })
    const STATE_TEXT = { 1: '待制定计划', 2: '待审核', 3: '计划驳回', 4: '待维修', 5: '待验收', 6: '验收通过', 7: '验收不通过', }
    const onChange = (key) => {
        console.log(key);
      };
      const renderOptionText = (currentState) => {
        let text = '待制定计划'

        return STATE_TEXT[currentState] || text
    }
    const queryData = () => {
        dispatch(patrolManage.records(`patrolRecord/all/${times[0]}/${times[1]}/true/null`)).then(res => {
            if (res.success) {
                console.log(res,'水平')
                            let obj = {}
            res?.payload?.data?.map(i=>{
                if(obj[i?.points?.project?.id]){
                    // if(obj[i?.points?.project?.id.toString()][i.pointId.toString()]){
                    //     obj[i?.points?.project?.id.toString()][i.pointId.toString()].ponintname=i.points?.itemData?.name
                    //     obj[i?.points?.project?.id.toString()][i.pointId.toString()].num=obj[i?.points?.project?.id.toString()][i.pointId.toString()].num+i?.patrolRecordIssueHandles[0]?.state==6?1:0
                        
                    // }else{
                    //     obj[i?.points?.project?.id.toString()][i.pointId.toString()].ponintname=i.points?.itemData?.name
                    //     obj[i?.points?.project?.id.toString()][i.pointId.toString()].num=i?.patrolRecordIssueHandles[0]?.state==6?1:0
                    // }
                    obj[i?.points?.project?.id].push({pointId:i.pointId,pointname:i.points.itemData.name})
                    // i?patrolRecordIssueHandles[0]?.state==6
                    obj[i?.points?.project?.id].num= obj[i?.points?.project?.id].num + i?.patrolRecordIssueHandles[0]?.state==6 ?1:0 
                }else{
                    obj[i?.points?.project?.id]={name:i?.points?.project?.name,num:i?.patrolRecordIssueHandles[0]?.state==6 ?1:0 }
                   
                }
                console.log(obj,'obj')
            })
                
            }
        })
    }
    useEffect(() => {
        // dispatch(patrolManage.records(`patrolRecord/all/null/null/true/null`)).then(res=>{
        //     let obj = {}
        //     res?.payload?.data?.map(i=>{
        //         if(obj[i?.points?.project?.id]){
        //             obj[i?.points?.project?.id].name=i?.points?.project?.name;
        //             obj[i?.points?.project?.id].num=obj[i?.points?.project?.id].num +1
        //         }else{
        //             obj[i?.points?.project?.id]={name:i?.points?.project?.name,num:1}
                   
        //         }
        //     })

        //     settableList(name != null ? res.payload.data?.filter(v =>
        //         (v.points.user.name.indexOf(name) != -1 || v.points.project.name.indexOf(name) != -1))
        //         .filter(x => curState == '全部' || curState == renderOptionText(x?.patrolRecordIssueHandles[0]?.state))
        //         .map(v => ({ ...v, key: v.id })) : res.payload.data?.map(v => ({ ...v, key: v.id })))
        //    const t1 = Object.keys(obj).map(i=>{
        //         return {id:i,name:obj[i].name,num:obj[i].num}
        //     })
        //     console.log(obj,'obj')
        //     console.log(res,'res')
        // })
       
        queryData()
        dispatch(getCheckItemsGroup())
    }, [])
console.log(tableList,'tablist')
    const columns = [{
        title: '结构物名称',
        dataIndex: 'name',
        key: 'name',
        // search: false,
        ellipsis: true,
    }, {
        title: '点位名称',
        dataIndex: 'describe',
        key: 'describe',
        search: false,
        ellipsis: true
    }, {
        title: '异常次数',
        dataIndex: 'user.name',
        key: 'user.name',
        ellipsis: true,
        search: false,
        render: (t, r, i) => {
            return r.user ? r.user.name : '-'
        }
    }, {
        title: '产生时间',
        dataIndex: 'checkItems',
        key: 'checkItems',
        ellipsis: true,
        search: false,
        render: (_, r) => {
            return r?.checkItems ? r?.checkItems.map(c => <Tag>{c.name}</Tag>) : '-'
        }
    }, {
        title: '更新时间',
        dataIndex: 'checkItems',
        key: 'checkItems',
        search: false,
        ellipsis: true,
        render: (_, r) => {
            return r?.checkItems ? r?.checkItems.map(c => <Tag>{c.name}</Tag>) : '-'
        }
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        search: false,
        width: 200,
        render: (_, record) => {
            return <>
                <Button type="link" onClick={() => {
                    setType('edit')
                    setCurRecord(record)
                    setVisible(true)
                }}>下发告警</Button>
                
            </>
        },
    }];

    return (
        <>
          <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        style={{marginLeft:'20px',marginRight:'20px'}}
        items={[
        {
        label: `未告警`,
        key: '1',
        children:  <ProTable
        columns={columns}
        actionRef={tableRef}
        options={false}
        dataSource={dataSource || []}
        rowKey='id'
        pagination={{ pageSize: 10 }}
        // search={false}
        request={async (params = {}) => {
            const res = await dispatch(getPatrolTemplate(params));
            setDataSource(res?.payload.data?.rows);
            return { ...res };
        }}
        
        // toolBarRender={() => [
        //     <Button
        //         type="primary"
        //         key="primary"
        //         onClick={() => {
        //             setType('create')
        //             setVisible(true)
        //         }}
        //     >查询</Button>
        // ]}
    />,
         },
        {
        label: `已告警`,
        key: '2',
        children: `Content of Tab Pane 2`,
         }
    ]}
  />
  {
                visible ?
                    <Xiafagaojin
                        visible={visible}
                        type={type}
                        curRecord={curRecord}
                        onCancel={() => {
                            setVisible(false);
                            setCurRecord({})
                        }}
                        tableRef={tableRef}
                    /> : null
            }
        </>
    )
}

function mapStateToProps (state) {
    const { auth, global } = state
    return {
        user: auth.user,
        actions: global.actions,
    }
}
export default connect(mapStateToProps)(YujingGuanli);