/* eslint-disable indent */
/* eslint-disable object-shorthand */
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { Popconfirm, notification, Card, Button, message, Tooltip } from 'antd';
import {
  DeletMapServicename,
  GettMaplayer,
  SetServiceConfig,
  deleteConfig,
} from '@/services/webConfig/api';
import { CloseOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
import AddModal from './AddProjectModal';
import MapScope from '@/components/MapScope';
import { createGuid } from '@/utils/transformUtil';
import BaseMap from './BaseMap';
import styles from '../SchemeConfig.less';
const CardData = props => {
  const { deletebaseMaps = () => {}, item, cardData } = props;
  const [visible, setVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 状态更新
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [serviceList, setServiceList] = useState([]);
  const [all, setAll] = useState([]);
  const [mapScopeVisible, setMapScopeVisible] = useState(false);
  const [baseMapVisible, setBaseMapVisible] = useState(false);
  const [keepItem, setKeepItem] = useState('');
  const [keepProject, setKeepProject] = useState('');
  // 删除瓦片

  useEffect(() => {
    console.log(props.item);
  }, []);
  const deletebaseMap = (item, baseMapItem) => {
    DeletMapServicename({ schemename: item.schemename, servicename: baseMapItem }).then(res => {
      if (res.code == '0') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '基础底图删除成功',
        });
        deletebaseMaps();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: '基础底图删除失败',
        });
      }
    });
  };
  // 删除方案
  const deleteTile = item => {
    deleteConfig({
      schemename: item.schemename,
      terminalType: 'baseMapscheme',
      isBaseMap: false,
    }).then(res => {
      if (res.code == '0') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '分级底图删除成功',
        });
        deletebaseMaps();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: '分级底图删除失败',
        });
      }
    });
  };
  const onSubmit = prop => {
    setVisible(false);
    setBaseMapVisible(false);
    deletebaseMaps();
  };
  // 增加瓦片
  const addTile = value => {
    let serverList = [];
    setFormObj(value);
    if (JSON.stringify(value) != '{}') {
      GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
        if (res.code == '0') {
          res.data.general.baseMap.layers.map(item => {
            console.log(value);
            console.log(value.baseMap);
            console.log(item.servicename);
            if (value.baseMap.indexOf(item.servicename) == -1) {
              serverList.push(item.servicename);
            }
          });
        }
        if (serverList.length) {
          setServiceList(serverList);
          setAll(res.data.general.baseMap.layers);
          setType('add');
          setVisible(true);
        } else {
          notification.warning({
            message: '提示',
            duration: 3,
            description: '请先在基础配置-配置基础底图',
          });
        }
      });
    }
  };
  const submitExtent = (extent, areaName, flag) => {
    if (flag === 0) {
      notification.warn({
        message: '提交失败',
        description: '请框选范围',
      });
      return;
    }
    const jsConfig = {
      extent: extent,
      areaName: areaName,
      boundColor: '#86c8f8',
      boundWidth: '10px',
      backgroundColor: '#000000',
      backgroundOpacity: '0.6',
    };
    SetServiceConfig({
      schemename: item.schemename,
      terminalType: 'web',
      isBaseMap: false,
      jsonCfg: JSON.stringify(jsConfig),
    }).then(res => {
      if (res.code == '0') {
        setMapScopeVisible(false);
        message.info('范围设置成功');
      }
    });
  };
  const pick = (schemename, index) => {
    SetServiceConfig({
      schemename: schemename,
      terminalType: 'scheme',
      isBaseMap: false,
      jsonCfg: JSON.stringify({
        defaultBaseMap: index,
      }),
    }).then(res => {
      if (res.code == '0') {
        deletebaseMaps();
        message.info('设置成功');
      } else {
        message.warning(res.msg);
      }
    });
  };

  const editBaseMap = () => {
    setBaseMapVisible(true);
  };
  return (
    <div className={styles.TileConfigContainer}>
      <Card
        title={
          <div>
            <span className={styles.schemeName}>名称</span>
            {props.item.schemename}
          </div>
        }
        extra={
          <a href="#">
            <Popconfirm
              title="是否删除该分级底图?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                deleteTile(props.item);
              }}
            >
              <CloseOutlined />
            </Popconfirm>{' '}
          </a>
        }
        style={{ width: 360 }}
      >
        {/* <p>
          <span className={styles.schemeName}>管网</span> {props.item.servicename}
        </p> */}
        {/* <div>
          <span className={styles.schemeName}>范围</span>
          <Button
            style={{ width: '12rem', marginBottom: '0.5rem' }}
            onClick={() => setMapScopeVisible(true)}
          >
            选择范围
          </Button>
        </div> */}
        <div className={styles.schemeItem}>
          <span className={styles.schemeName}>基础底图</span>
          <Button className={styles.schemeBtn1} onClick={() => addTile(props.item)}>
            {' '}
            <PlusOutlined />
            添加基础底图
          </Button>
        </div>
        <div style={{ overflowY: 'scroll', height: '11.4rem' }}>
          {props.item.baseMapDetail && props.item.baseMapDetail.length
            ? props.item.baseMapDetail.map((baseMapItem, baseindex) => (
                <div className={styles.mapItem1} key={baseindex}>
                  <div
                    // onClick={() => pick(props.item.schemename, baseindex)}
                    // className={classnames({
                    //   [styles.defaultTile]: true,
                    //   [styles.activeTile]: baseindex == props.item.defaultBaseMap,
                    // })}
                    className={styles.defaultTile1}
                  >
                    {baseMapItem.maxzoom === 0
                      ? baseMapItem.zoom
                      : `${baseMapItem.zoom}~${baseMapItem.maxzoom}`}
                  </div>
                  <div className={styles.mapText1}>
                    <Tooltip title={baseMapItem.servicename}>{baseMapItem.servicename}</Tooltip>
                  </div>
                  <div className={styles.mapIcon1}>
                    <EditOutlined
                      onClick={() => {
                        editBaseMap();
                        setKeepItem(props.item);
                        setKeepProject(baseMapItem.servicename);
                      }}
                    />
                  </div>
                  <div className={styles.mapIcon1}>
                    <Popconfirm
                      title="是否删除该基础底图?"
                      okText="确认"
                      cancelText="取消"
                      onConfirm={() => {
                        deletebaseMap(props.item, baseMapItem.servicename);
                      }}
                    >
                      <CloseOutlined />
                    </Popconfirm>{' '}
                  </div>
                </div>
              ))
            : ''}
        </div>
      </Card>
      <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        serviceList={serviceList}
        formObj={formObj}
        cardData={cardData}
        all={all}
      />
      <MapScope
        mapId={createGuid()}
        visible={mapScopeVisible}
        onCancel={() => setMapScopeVisible(false)}
        confirmModal={submitExtent}
        schemename={props.item.schemename}
        title={props.item.schemename}
      />
      <BaseMap
        visible={baseMapVisible}
        onCancel={() => setBaseMapVisible(false)}
        callBackSubmit={onSubmit}
        keepItem={keepItem}
        keepProject={keepProject}
      />
    </div>
  );
};
export default CardData;