import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Form, Button, Input, Table, Modal, message  } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { geometryCenter } from '../../../utils/tools';
import './index.less'
import { config } from '@/config';
import { httpget } from '@/utils/request';
import apiurl from '@/service/apiurl';

export default function Btn({open, mode, layerVisible, setOpen, mapType, layerVisibleChanged}) {
    const [form] = Form.useForm();
    const [ tableData, setTableData ] = useState([])
    const dispatch = useDispatch()
    const columns = [
        { title: '名称', key: 'name', dataIndex: 'name',align: "center",width:'60%', ellipsis: true, },
        { title: '类型', key: 'type', dataIndex: 'type',align: "center",width:'40%', ellipsis: true },
    ];
    const importMap = {
        '业务规则库': () => import('../../sz/ywgz/form'),
        '调度方案库': () => import('../../sz/ddfa/form'),
        '工程安全知识库': () => import('../../sz/khzbgl/form')
    };

    const onFinish = ({name}) => {
        if(name){
            getData(name)
        }else{
            setTableData([])
        }
    }

    const getData = async(e)=>{ 
        const { code, data} = await httpget(apiurl.monitor.globalSearch, { name: e })
        if(code!==200){
            // return
        }
        setTableData(data||[])
    }

    const clickItem = (item)=>{
        // 业务规则库
        if (item.type == '业务规则库' || item.type == '调度方案库' || item.type == '工程安全知识库') {
            regularOpen(item)
            return; // 添加return避免继续执行
        }

        // 工程安全监测点
        if (item.type == '渗压站' || item.type == '渗流站' || item.type == '位移站') {
            renderGCaqModal(item)
            return; // 添加return避免继续执行
        }

        // 关闭所有已打开的弹窗
        dispatch.runtime.closeFeaturePopAll();
        // 先关闭所有图层
        dispatch.map.setLayerVisible({
            WxqLayer: false,
            HdswLayer: false,
            RealDrpLayer: false,
            PicStLayer: false,
            ShuiKuLayer: false,
            TuRangLayer: false,
            GongShuiLayer: false,
            AZDLayer: false,
            QSYDWLayer: false,
            YHJMHLayer: false,
            YjgbLayer: false,
            SYLayer: false, //渗压站
            SLLayer: false, //渗流站
            WYLayer: false, //位移站
            ShuiDianZhanLayer: false,
        });
        // 根据类型确定弹窗类型和图层
        let popType = item.type;
        let layerToShow = {};

        // 对特定类型进行映射和图层设置
        switch (item.type) {
        // case '水文站':
        //   popType = 'hdsw';
        //   layerToShow = { HdswLayer: true };
        //   break;
        // case '雨量站':
        //   popType = 'drp';
        //   layerToShow = { RealDrpLayer: true };
        //   break;
        case '视频站':
            popType = 'tuxiang';
            layerToShow = { PicStLayer: true };
            break;
        case '水库水位站':
            popType = 'shuiku';
            layerToShow = { HdswLayer: true }; //水位站用HdswLayer, ShuikuLayer是水利工程的
            break;
        case '河道水位站':
            popType = 'hedao';
            layerToShow = { HdswLayer: true };
            break;
        case '土壤墒情站':
            popType = 'turangshangqing';
            layerToShow = { TuRangLayer: true };
            break;
        case '流量站':
            popType = 'gongshui';
            layerToShow = { GongShuiLayer: true };
            break;

        case '安置点':
            popType = 'anzhidian';
            layerToShow = { AZDLayer: true };
            break;
        case '企事业单位':
            popType = 'qishiyedanwei';
            layerToShow = { QSYDWLayer: true };
            break;
        case '沿河居民点':
            popType = 'yanhejuminhu';
            layerToShow = { YHJMHLayer: true };
            break;
        default:
            // 默认不设置特定图层
            break;
        }

        // 设置图层可见性
        if (Object.keys(layerToShow).length > 0) {
            dispatch.map.setLayerVisible(layerToShow);
        }
        const record = JSON.parse(item.jsonStr);
    
        if (item.type == '危险区') {
            dispatch.map.setLayerVisible({ WxqLayer: true })
            const wxq = JSON.parse(sessionStorage.getItem('wxq'))?.[record?.adcd] || ''
            if (!wxq) {
                message.error('暂无经纬度数据')
                return
            }
            const data = wxq.properties
            const center = item.type == '危险区' ? geometryCenter(wxq.geometry) :
            [record?.lgtd, record?.lttd];
    
    
            dispatch.runtime.setCameraTarget({
                center: [center[0], center[1]],
                zoom: 18,
                pitch: 60
            })
            dispatch.runtime.setFeaturePop({
                id: data.PID,
                data: { ...data },
                type: 'wxq',
                lgtd: center[0],
                lttd: center[1],
            })
            return;
        }
    
        if (item.type == '安置点' || item.type == '企事业单位' || item.type == '沿河居民点') {
            // 显示弹窗
            dispatch.runtime.setFeaturePop({
                type: popType,
                data: record,
                lgtd: item.lgtd,
                lttd: item.lttd,
                id: record.id
            });
        }
    
        // 雨量站
        if (item.type == '雨量站') {
            // // 创建近一小时的时间范围
            // const tms = [
            //     moment().add(-1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
            //     moment().format('YYYY-MM-DD HH:mm:ss')
            // ];
    
            // // 直接调用httppost2获取数据并添加图层
            // const fetchAndAddLayer = async () => {
            //     try {
            //         const { data, code, msg } = await httppost(apiurl.station.rainlist, {
            //             "stm": tms[0],
            //             "etm": tms[1]
            //         });
        
            //         if (code !== 200) {
            //             message.error(msg || '请求失败');
            //             return;
            //         }
        
            //         const list = data.map((i) => ({
            //             id: i.stcd,
            //             ...i,
            //             drp: i.drp
            //         }));
        
            //         dispatch.map.setLayerVisible({ RealDrpLayer: true })
            //         dispatch.map.setLayerSetting({RealDrpLayer:list})
            //     } catch (error) {
            //         console.error('获取雨量站数据失败', error);
            //     }
            // };
    
            // fetchAndAddLayer();
        }
    
    
        // 设置地图视角
        dispatch.runtime.setCameraTarget({
            center: [item.lgtd, item.lttd],
            zoom: 18,
            pitch: 60
        });

    }

    // 业务规则库弹框
    const regularOpen = async (record) => {
        const id = record?.unionCode
        const com = record.type == '业务规则库' ?
        { url: apiurl.zsk.ywgz.getOne } :
        record.type == '调度方案库' ?
            { url: apiurl.zsk.ddfa.getOne } :
            { url: apiurl.zsk.gcaq.getOne };
        const res = await httpget(com.url + id)
        // 导入业务规则库的Modal组件
        // 使用映射函数进行导入
        try {
        const ModalForm = await importMap[record.type]();

        Modal.destroyAll(); // 先销毁可能存在的其他Modal
        const modal = Modal.confirm({
            title:  <div style={{ width: '100%', padding: '16px 24px', color: '#3B4859', borderBottom: '2px solid #1f385c', position: "absolute", top: 0, left: 0 }}>
                        <div style={{ fontSize: 16, fontWeight: 'bold',color:'#fff' }}>{record.name}详情</div>
                    </div>,
            width: 1000,
            content: (
                <>
                    <div style={{ marginTop: 45 }}></div>
                    <ModalForm.default
                        mode="view"
                        record={res}
                    />
                </>
            ),
            icon: null,
            okButtonProps: { style: { display: 'none' } },
            cancelButtonProps: { style: { display: 'none' } },
            closable: true
        });
        } catch (error) {
            console.error('模块导入失败:', error);
            message.error(`无法加载${record.type}详情，请稍后再试`);
        }
        return;
    }

    // 工程安全监测点
    const renderGCaqModal = (record) => {
        const row = { ...record, stationCode: record.name }
        let popType = '';

        if (record.type == '渗压站') {
        popType = 'shenya';
        } else if (record.type == '渗流站') {
        popType = 'shenliu';
        } else if (record.type == '位移站') {
        popType = 'weiyi';
        }

        dispatch.runtime.setFeaturePop({
            type: popType,
            data: row,
            lgtd: record.lgtd,
            lttd: record.lttd,
            id: record.id
        });
        return;
    }

    useEffect(()=>{
        return ()=>{
            dispatch.runtime.closeFeaturePopAll()
            dispatch.map.setLayerVisible({
                WxqLayer: false,
                HdswLayer: false,
                RealDrpLayer: false,
                PicStLayer: false,
                ShuiKuLayer: false,
                GongShuiLayer: false,
                AZDLayer: false,
                QSYDWLayer: false,
                YHJMHLayer: false
            });
            dispatch.runtime.setHome()
        }
    },[])


    return (
        <div className={open?'mapToolSearch width300':'mapToolSearch width0'}>
            <div className='mapToolSearchBox'> 
                <div className='mapToolSearchBoxTitle'>
                    搜索
                    <CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
                </div>
                <Form form={form} className="search-bar" onFinish={onFinish}>
                    <Form.Item label="" name="name">
                        <Input placeholder="请输入" allowClear/>
                    </Form.Item>
                    <Button type="primary" className="ant-btn-ghost-blue" htmlType="submit">查询</Button>
                </Form>
                <Table 
                    rowKey="id"
                    sticky
                    columns={columns}
                    pagination={false}
                    dataSource={tableData}
                    scroll={{x:false, y: "430px"}}
                    onRow={
                        (row)=>({
                            onClick:()=>clickItem(row),
                            style: { cursor: 'pointer' }
                        })
                    }
                />
            </div>
        </div>
    );
}