import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ToolBar from './toolbar';
import { useSelector } from 'react-redux';

import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import { httppost2 } from '../../../../utils/request';
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const typeObj = {
    1: "渗压监测",
    2: "渗流监测",
    3:"位移监测"
  }
  const levelObj = {
    1: "黄色",
    2:"红色"
  }

  const refModal = useRef();
  const [searchVal, setSearchVal] = useState(false)
  const [total, setTotal] = useState({})
  const columns = [
    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
    { title: '告警时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" },
    {
      title: '监测类型', key: 'type', dataIndex: 'type', width: 200, align:"center",
      render: (rec, record) => <span>{typeObj[rec]}</span>
    },
    { title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', width: 140 , align:"center"},
    {
      title: '告警级别', key: 'level', dataIndex: 'level', width: 200, align:"center",
      render: (rec,record) => <div style={{position:"relative"}}>
        <span>{levelObj[rec]}</span>
        <span style={{
          position: "absolute",
          top: 5, left: "28%",
          width: 10,
          height: 10,
          borderRadius: 5,
          backgroundColor: rec == 1 ? "#e9df1e" : "#d62f28"
        }}></span>
      </div>
    },
    { title: '监测值(m)', key: 'value', dataIndex: 'value', width: 150, ellipsis: true,align:"center", },
    {
      title: '阈值', key: 'phone', dataIndex: 'phone', width: 250, ellipsis: true,align:"center",
      render: (_, record) => <span>
        {record.conditionOne || ''}
        {record.valueOne || ''}
        {record.condition ? record.condition == 1 ? "且" : "或" : ''}
        {record.conditionTwo || ''}
        {record.valueTwo || ''}
      </span>
     },
    { title: '校验规则描述', key: 'ruleDesc', dataIndex: 'ruleDesc', width: 250, ellipsis: true, align: "center", },
    { title: '处理建议', key: 'resolveSuggest', dataIndex: 'resolveSuggest', width: 200, ellipsis: true, align:"center" },
  ];

  
  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.gcaqjc.gcaqyj.yhyj.delete + `/${params.goodsId}`);
    }
  }
 

  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.gcaqyj.yhyj.page).find_noCode);

  const getStaticData = async (params) => {
    try {
      const res = await httppost2(apiurl.gcaqjc.gcaqyj.yhyj.total,params.search)
      setTotal(res.data);
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if (searchVal) {
      
      const params = {
        search: {
          ...searchVal,
        }
      };
      search(params)
      getStaticData(params)
    }
  }, [searchVal])
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
          <div style={{width:"100%",display:"flex",alignContent:"center",columnGap:20}}>
            <div className='first-card'>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <span style={{fontSize:20,fontWeight:"bold"}}>黄色预警</span>
                <span style={{ fontSize: 20, fontWeight: "bold" }}>{ total[1] || ''}</span>
              </div>
            </div>
            <div className='second-card'>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <span style={{fontSize:20,fontWeight:"bold"}}>红色预警</span>
                <span style={{fontSize:20,fontWeight:"bold"}}>{ total[2] || ''}</span>
              </div>
            </div>
          </div>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
            <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
          </div>
        </div>
      </div>
    </>
  );
}

export default Page;