/* eslint-disable no-new */
import React, { useEffect, useState, useRef } from 'react';
import { ArcGISMap, Drawtool, geomUtils } from '@wisdom-map/arcgismap';

// import { AMapScene, PointLayer } from '@wisdom-map/Amap';
import {
  Modal,
  Form,
  Input,
  Slider,
  InputNumber,
  Select,
  Button,
  Cascader,
  notification,
} from 'antd';
import classnames from 'classnames';
import { GetWebSiteConfig } from '@/services/gis/gis';
import { SetServiceConfig } from '@/services/webConfig/api';
import styles from './index.less';
const { Option } = Select;

const Map = props => {
  const { visible, onCancel, schemename } = props;
  const [form] = Form.useForm();
  const [canLoadMap, setCanLoadMap] = useState(false); // 是否加载地图
  const [colorArr, setColorArr] = useState([
    { color: '#ffffff', isCheck: false },
    { color: '#000000', isCheck: false },
    { color: '#9E9E9E', isCheck: false },
    { color: '#009688', isCheck: false },
    { color: '#2196f3', isCheck: false },
    { color: '#19233c', isCheck: false },
  ]);
  const [schemeList, setSchemeList] = useState([]);
  const [options, setOptions] = useState([]);
  const [mapsettings, setMapsettings] = useState({});
  const [flag, setFlag] = useState(0);
  const mapRef = useRef();
  const mapInfo = useRef(null);

  useEffect(() => {
    if (visible) {
      GetWebSiteConfig({ client: 'sandbox' }).then(res => {
        console.log(res.data[0].mapsettings, 'res.data[0].mapsettings');
        setSchemeList(res.data[0].mapsettings.layers);
        res.data[0].mapsettings.layers.forEach(item => {
          if (item.schemename === schemename) {
            item.layerType = 'PipenetLayer';
          } else {
            item.layerType = 'dynamic';
          }
        });
        setMapsettings(res.data[0].mapsettings);
        let setttings = {};
        res.data[0].mapsettings.layers.forEach(item => {
          if (item.schemename === schemename) {
            setttings = item;
          }
        });
        // res.data[0].mapsettings.areasettings = setttings;
        // console.log(form);
        setTimeout(() => {
          form.setFieldsValue({
            areaName: [setttings.areaName],
            backgroundColor: setttings.backgroundColor,
            backgroundOpacity: setttings.backgroundOpacity * 100,
            boundColor: setttings.boundColor,
            boundWidth: parseInt(setttings.boundWidth),
            extent: setttings.extent,
            schemename,
          });
          console.log(form.getFieldsValue());
          setCanLoadMap(true);
        }, 0);
      });
      window.AMap.plugin('AMap.DistrictSearch', () => {
        let districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，country表示国家
          level: 'country',
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 3,
        });

        // 搜索所有省/直辖市信息
        districtSearch.search('中国', (status, result) => {
          // 查询成功时，result即为对应的行政区信息
          console.log(result, '行政区划信息');
          setOptions(result.districtList[0].districtList);
        });
      });

      console.log('加载地图', props.schemename);
    }
  }, [visible]);

  const getMapInfo = viewObject => {
    mapInfo.current = viewObject;
  };
  // 选择颜色
  const checkColor = color => {
    form.setFieldsValue({ backgroundColor: color });
    mapRef.current.updateAreaColor(color);
    setFlag(flag + 1);
  };
  const changeValue = (changedFields, allFields) => {
    console.log(changedFields, allFields);
    let obj = JSON.parse(JSON.stringify(mapsettings));
    const index = obj.layers.findIndex(item => item.schemename === schemename);
    switch (changedFields[0].name[0]) {
      case 'backgroundOpacity':
        obj.layers[index].backgroundOpacity = changedFields[0].value / 100;
        mapRef.current.changeBackgroundOpacity(obj.layers[index].backgroundOpacity);
        break;
      case 'boundWidth':
        obj.layers[index].boundWidth = changedFields[0].value;
        mapRef.current.changeBoundWidthValue(obj.layers[index].boundWidth);
        break;
      case 'areaName':
        Drawtool.deactivate(false);
        obj.layers[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
        mapRef.current.changeAreaName(obj.layers[index].areaName);
        break;
      case 'schemename':
        Drawtool.deactivate(false);
        let setttings;
        obj.layers.forEach(item => {
          if (item.schemename === changedFields[0].value) {
            item.layerType = 'PipenetLayer';
            setttings = item;
          } else {
            item.layerType = 'dynamic';
          }
        });
        form.setFieldsValue({
          areaName: [setttings.areaName],
          backgroundColor: setttings.backgroundColor,
          backgroundOpacity: setttings.backgroundOpacity * 100,
          boundColor: setttings.boundColor,
          boundWidth: parseInt(setttings.boundWidth),
          extent: setttings.extent,
        });
        setMapsettings(obj);
        break;

      default:
        break;
    }
  };
  // 选择范围
  const onTangleClick = e => {
    console.log(mapInfo.current);
    Drawtool.activate({
      view: mapInfo.current,
      action: 'extent',
      drawEnd: data => {
        console.log(data);
        const geom = geomUtils.toGeometry({
          type: 'extent',
          xmin: data.rings[0][0][0],
          xmax: data.rings[0][2][0],
          ymin: data.rings[0][0][1],
          ymax: data.rings[0][1][1],
        });
        form.setFieldsValue({
          extent: `${data.rings[0][0][0]},${data.rings[0][0][1]},${data.rings[0][2][0]},${
            data.rings[0][1][1]
          }`,
        });
        mapRef.current.gotoGeometry(geom);
      },
    });
  };
  const onFinish = () => {
    console.log(form.getFieldValue('extent'));
    console.log(Drawtool.graphic, 'Drawtool');
    if (!Drawtool.graphic) {
      notification.error({
        message: '提示',
        duration: 3,
        description: '请选择复位范围再保存',
      });
      return;
    }
    const obj = form.getFieldsValue();

    const jsConfig = {
      extent: form.getFieldValue('extent'),
      areaName: obj.areaName[obj.areaName.length - 1],
      boundColor: '#86c8f8',
      boundWidth: obj.boundWidth,
      backgroundColor: obj.backgroundColor,
      backgroundOpacity: obj.backgroundOpacity / 100,
    };
    SetServiceConfig({
      schemename: obj.schemename,
      terminalType: 'web',
      isBaseMap: false,
      jsonCfg: JSON.stringify(jsConfig),
    }).then(res => {
      notification.success({
        message: '提示',
        duration: 3,
        description: '保存成功',
      });
      console.log(res, 'res');
    });
  };
  return (
    <div>
      <Modal
        title={schemename}
        visible={visible}
        width={1300}
        onCancel={onCancel}
        maskClosable={false}
        onOk={onFinish}
        destroyOnClose
      >
        <div className={styles.mapContent}>
          <div className={styles.mapTool}>
            <Form
              form={form}
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              onFieldsChange={changeValue}
            >
              <Form.Item label="背景颜色" name="backgroundColor">
                <div className={styles.colorContent}>
                  {colorArr.map(item => (
                    <div
                      className={classnames(styles.colorBox, {
                        [styles.currentColor]: item.color === form.getFieldValue('backgroundColor'),
                      })}
                      key={item.color}
                      style={{ background: item.color }}
                      onClick={() => checkColor(item.color)}
                    />
                  ))}
                </div>
              </Form.Item>
              <Form.Item label="透明度修改" name="backgroundOpacity">
                <Slider min={0} max={100} />
              </Form.Item>
              <Form.Item label="边界宽度修改" name="boundWidth">
                <InputNumber min={1} max={10} />
              </Form.Item>
              <Form.Item label="切换方案" name="schemename">
                <Select placeholder="请选择方案">
                  {schemeList.map((item, index) => (
                    <Option value={item.schemename} key={index}>
                      {item.schemename}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
              <Form.Item label="地区" name="areaName">
                <Cascader
                  fieldNames={{
                    label: 'name',
                    value: 'name',
                    children: 'districtList',
                  }}
                  showSearch
                  options={options}
                  placeholder="请选择行政区"
                  changeOnSelect
                  allowClear={false}
                />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" onClick={e => onTangleClick(e)}>
                  复位范围修改
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div className={styles.mapBox}>
            {canLoadMap && (
              <ArcGISMap ref={mapRef} getMapInfo={e => getMapInfo(e)} config={mapsettings} />
            )}
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default Map;
