import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image,Tag } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import { httppost2 } from '../../../../utils/request';
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
import './index.less';
import moment from 'moment';
const url = "http://223.75.53.141:9100/gs-tsg"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
  const viewBtn = role?.rule?.find(item => item.menuName == "查看")|| true;
  const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
  const initData = {
    obDate: moment().format('YYYY-MM-DD')
  }
  
  const [stats, setStats] = useState({
    total: 400,
    withMosquito: 14,
    withoutMosquito: 382,
    noData: 4
  });
  const surveyType = {
    1: "日常检查排查",
    2: "定期普查",
    3:"专项调查"
  }
  const surveyWay = {
    1: "人工排查法",
    2: "引诱法",
    3: "仪器探测法",
    4:"其他"
  }
  const isHarm = {
    0: "无危害",
    1: "有危害",
  }
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState({...initData})
  const [count, setCount] = useState({})
  // const columns = [
  //   { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
  //   {title: '填报日期', key: 'reportDate', dataIndex: 'reportDate', width: 140,},
  //   {
  //     title: '普查类型', key: 'surveyType', dataIndex: 'surveyType', width: 200, 
  //     render: (value) => <span>{value ? surveyType[value] : ''}</span>
  //    },
  //   {
  //     title: '普查方式', key: 'surveyWay', dataIndex: 'surveyWay', width: 200,
  //     render: (value) => <span>{value ? surveyWay[value] : ''}</span>
      
  //   },
  //   {
  //     title: '危害情况', key: 'isHarm', dataIndex: 'isHarm', width: 200,
  //     render: (value, row) =>(
  //       <span style={row.harmNum > 0 ? { color: "red" } : {}}>{isHarm[row.harmNum > 0 ? 1 : 0]}</span>)
  //   },
  //   {title: '白蚁危害处数', key: 'harmNum', dataIndex: 'harmNum', width: 100},
  //   {title: '已处置处数', key: 'handleNum', dataIndex: 'handleNum', width: 100},
  //   {title: '上报人', key: 'reportUserName', dataIndex: 'reportUserName', width: 100},
  //   {
  //     title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
  //     render: (value, row, index) => (
  //       <CrudOpRender_text
  //       edit={editBtn ? true : false}
  //       del={delBtn ? true : false}
  //       view={viewBtn ? true : false}
  //         command={(cmd) => () => command(cmd)(row)} />)
  //   },
  // ];

  const columns = [
    {
      title: '监测时间',
      dataIndex: 'obDate',
      key: 'obDate',
      width: 180,
      align:'center'
    },
    {
      title: '测点编号',
      dataIndex: 'order',
      key: 'order',
      width: 120,
        align:'center'
    },
    {
      title: '有无白蚁',
      dataIndex: 'status',
        align:'center',
      key: 'status',
      width: 100,
      render:(text, record) => {
        // 如果 isHarm 为 null 或 undefined，显示无
        if (text == null) {
          return <Tag color="#04d919" style={{borderRadius: '50%', padding: '4px 8px'}}>无</Tag>;
        }
        
        // 如果 isHandle 为 null 或 undefined，当作 false 处理
        const isHandle = record.isHandle ?? false;
        
        return (
          <Tag 
            color={!text ?'#04d919' : '#d9001b'} 
            style={{borderRadius: '50%', padding: '4px 8px'}}
          >
            {!text ? '无' : '有'}
          </Tag>
        );
      }
    }
  ];
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
  
  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave();
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.rcgl.byfz.bypc.delete + `/${params.id}`);
    }
  }
  
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.byfz.bypc.page).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
  refresh()
  }
  
  // 获取白蚁统计数量
  const getCount = async () => {
    const params = {
      pageSo: {
        pageNumber: 1,
        pageSize: 99999,
      },
      ...searchVal
    }
    try {
      const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
      setCount(res.data);
    } catch (error) {
      console.log(error);
      
    }
  }
  useEffect(() => {
    const params = {
      search: {
        ...searchVal,
      }
    }; 
    search(params)
    getCount();
  }, [searchVal])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
        <Row gutter={16} className='statsRow'>
        <Col span={6}>
              <div className='statItem'>
                <div className='valueWrapper'>
                <span className='number' style={{ color: '#722ed1' }}>{count.totalPoint}</span>
                <span className="unit">个</span>
                </div>
              <span className='label'>总监测点数</span>
            </div>
        </Col>
        <Col span={6}>
              <div className='statItem'>
                <div className='valueWrapper'>
                <span className='number' style={{ color: '#f5222d' }}>{count.hasAnt}</span>
                <span className="unit">个</span> 
              </div>
              <span className='label'>有白蚁</span>
            </div>
        </Col>
        <Col span={6}>
              <div className='statItem'>
                <div className='valueWrapper'>
                <span className='number' style={{ color: '#52c41a' }}>{count.notAnt}</span>
                <span className="unit">个</span>
              </div>
              <span className='label'>无白蚁</span>
            </div>
        </Col>
        <Col span={6}>
              <div className='statItem'>
                <div className='valueWrapper'>
                <span className='number' style={{ color: '#8c8c8c' }}>{count.noData}</span>
                <span className="unit">个</span>    
              </div>
              <span className='label'>离线</span>
            </div>
        </Col>
      </Row>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              initData={initData}
              // onSave={command('save')}
              // role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" ,marginRight:20}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />
      </div>
    </>
  );
}

export default Page;