import { BarChartOutlined } from "@ant-design/icons";
import { Table } from "antd";
import {useSelector, useDispatch} from "react-redux";
import { title } from "process";
import { stringify } from "querystring";
import React, {useEffect, useState} from "react";
import { dxzhsjlist } from "../http/rightHtpp";
import PubTable from "./components/pubTable";
import "./rightContent.less"


type IProps = {
    key?: number;
    rightKeys?:string;
  }

const TypicalDisasterEvents:React.FC<IProps>= (props:IProps) => {
  const dispatch = useDispatch();
  const [data,setData] = useState()
  const getList = async()=>{
    const res = await dxzhsjlist()
    setData(res.data)
  }
    const columns = [
        {
          title: '序号',
          render:(text:string,record:object,index:number)=>`${index+1}`,
          align:'center' as const,
        },
        {
          title: '灾害发生时间',
          dataIndex: 'otime',
          key: 'otime',
          align:'center' as const,

        },
        {
          title: '灾害发生地点',
          dataIndex: 'address',
          key: 'address',
          align:'center' as const,

        },
      ];
      useEffect(()=>{
        getList()

        dispatch.map.setLayerVisible({'DXZHSJLayer': true});
        dispatch.map.setLayerVisible({'ShuiKuLayer': false});
        return ()=>{
            dispatch.runtime.closeFeaturePopAll()
            dispatch.map.setLayerVisible({'DXZHSJLayer': false});
            dispatch.map.setLayerVisible({'ShuiKuLayer': true});
        }
      },[])


      const flyToAdcd = (record:any) => {
        dispatch.map.setLayerVisible({"DXZHSJLayer": true});
    
        const { lgtd, lttd, elev, adcd } = record;
    
        if (lgtd && lttd) {
          dispatch.runtime.setFeaturePop({ type: 'dianxingzaihaishijian', data: record, lgtd: record.lgtd, lttd: record.lttd, });
    
          dispatch.runtime.setCameraTarget({
            center: [lgtd, lttd, elev],
            zoom: 12.2,
            pitch: 60,
          });
        }
      };
    return(
        <>
         <div className='rightContent'>
            <div className='title flex flexac'>
                <BarChartOutlined style={{fontSize:'14px',marginRight:'5px'}}/>
                典型灾害事件
                </div>
                <Table dataSource={data} columns={columns}  pagination={false} onRow={(record:any) => {
                                            return {
                                              onClick: (event:any) =>flyToAdcd(record),
                                            };
                                          }}/>
        </div>
        </>
    )
}
export default TypicalDisasterEvents