import { useEffect, useState } from 'react';
import styles from './index.less';
import { Input, Modal, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { unitAddressEditOrAdd, unitAddressList } from '@/services/register';
import { useLocation, useParams } from 'umi';
import { sysTypeStr } from '@/utils/sysType';
import eventBus from '@/utils/eventBus';

export default function Page() {
  const location = useLocation();

  const [unitName, setUnitName] = useState<any>('');
  const [visibility, setVisibility] = useState<boolean>(false);
  const [showFlag, setShowFlag] = useState<boolean>(false);
  const [unitId, setunitId] = useState<any>(null);
  const [isDelFlag, setIsDelFlag] = useState<any>(false);
  const [delVisibility, setDelVisibility] = useState<boolean>(false);

  useEffect(() => {
    eventBus.on('updateUnitInfo', updateUnitInfo);
    eventBus.on('hideFlag', hideFlag);

    return () => {
      eventBus.off('updateUnitInfo', updateUnitInfo);
      eventBus.off('hideFlag', hideFlag);
    };
  }, [])

  const updateUnitInfo = (info: any) => {
    setUnitName(info[1]?.unitName);
    setunitId(info[1]?.id);
    if (info[0] == '删除') { 
      setIsDelFlag(true);
      setDelVisibility(true)
    } else {
      setIsDelFlag(false);
      setVisibility(true);
    }
  }

  const hideFlag = (val: boolean) => { setShowFlag(val) }

  const submit = () => {
    const searchParams = new URLSearchParams(location.search);
    const sysType = searchParams.get('sysType');
    let params = {
      parentId: 1,
      sysType: sysTypeStr[sysType],
      unitName: unitName,
      id: unitId,
      delFlag: isDelFlag ? 1 : 0
    }
    unitAddressEditOrAdd(params).then((res) => {
      if (res.result == 'success') {
        setShowFlag(true);
        setUnitName('');
        setunitId(null);
        setVisibility(false);
        if (isDelFlag) {
          setDelVisibility(false);
          setShowFlag(false)
          message.success('删除成功!');
          eventBus.emit('getUnitList', '删除成功');
        }else if (unitId) {
          message.success('修改成功!');
          eventBus.emit('getUnitList', '修改成功');
        } else {
          message.success('添加成功!');
          eventBus.emit('getUnitList', '添加成功');
        }
      } else {
        message.error(res?.errorMsg)
      }
    })
  }

  return (
    <div className={styles.wzgl_warp}>
      <div className={styles.earthWarp}>
        <div className={styles.earthCon} onClick={() => {
          if (showFlag) return
          setVisibility(true)
        }}>
          {/* 小红旗 */}
          {showFlag && <img src={require('../../../../assets/images/googleEarth/flag.png')} width={30} height={30} />}
        </div>
      </div>

      <Modal
        title="位置信息"
        open={visibility}
        centered
        width={500}
        onCancel={() => setVisibility(false)}
        footer={null}
        maskClosable={false}
      >
        <div>请通过定位按钮在地图上自定义位置</div>

        <div className='mb20 mt20'>
          <div className='flex_aiC'>
            <span style={{ marginRight: 4, color: 'red' }}>*</span>单位名称
            <Input placeholder="请输入单位名称" style={{ width: 300, marginLeft: 14 }}
              value={unitName}
              onChange={(e) => setUnitName(e.target.value)}
            />
          </div>
        </div>

        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'定位'} onClick={() => {}} />
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { submit() }} />
          <ButtonComp type='cancel' text={'取消'} onClick={() => setVisibility(false)} />
        </div>
      </Modal>


      <Modal
        title="提示"
        open={delVisibility}
        centered
        width={300}
        onCancel={() => setDelVisibility(false)}
        footer={null}
        maskClosable={false}
      >
        <div>确认删除吗？</div>
        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { submit() }} />
          <ButtonComp type='cancel' text={'取消'} onClick={() => setDelVisibility(false)} />
        </div>
      </Modal>
    </div>
  );
}
