/* 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 {
  unbindSchemeBaseMap,
  GettMaplayer,
  SetServiceConfig,
  deleteConfig,
  GetbaseMapschemeName,
} from '@/services/webConfig/api';
import { CloseOutlined, PlusOutlined, GlobalOutlined, BlockOutlined } from '@ant-design/icons';
import AddModal from '../AddModal';
import MapScope from '@/components/MapScope';
import { createGuid } from '@/utils/transformUtil';
import AddModalBase from '../AddModalBase';
import styles from '../../SchemeConfig.less';
const CardData = props => {
  const { deletebaseMaps = () => {}, item, cardFlag, keepData } = props;
  const [visible, setVisible] = useState(false); // 弹窗
  const [basevisible, setBaseVisible] = useState(false); // 弹窗
  const [flag, setFlag] = useState(0); // 状态更新
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [serviceList, setServiceList] = useState([]);
  const [mapScopeVisible, setMapScopeVisible] = useState(false);
  const [cardData, setCardData] = useState([]);
  // 删除瓦片

  useEffect(() => {
    // GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
    //   if (res.msg === 'Ok') {
    //     let arr = [];
    //     res.data.general.baseMap.layers.map(i => {
    //       arr.push(i.servicename);
    //     });
    //   }
    // });
    setCardData(keepData);
    console.log(props.item);
  }, [cardFlag]);
  const deletebaseMap = (item, baseMapItem) => {
    unbindSchemeBaseMap({ schemename: item.schemename, basemapName: 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: 'scheme',
      isBaseMap: false,
    }).then(res => {
      if (res.msg === 'Ok') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '方案删除成功',
        });
        deletebaseMaps();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: '方案删除失败',
        });
      }
    });
  };
  const onSubmit = prop => {
    setVisible(false);
    deletebaseMaps();
    setBaseVisible(false);
  };
  // 增加瓦片
  const addTile = value => {
    let serverList = [];
    setFormObj(value);
    if (JSON.stringify(value) != '{}') {
      GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
        if (res.msg === 'Ok') {
          res.data.general.baseMap.layers.map(item => {
            if (value.baseMap.indexOf(item.servicename) == -1) {
              serverList.push(item.servicename);
            }
          });
        }
        let arr = [];
        GetbaseMapschemeName().then(resdata => {
          if (resdata.data.length) {
            resdata.data.map(i => {
              if (value.baseMap.indexOf(i) == -1) {
                arr.push(i);
              }
            });
            if (arr.length) {
              setServiceList(arr);
              setType('add');
              setVisible(true);
            } else {
              notification.warning({
                message: '提示',
                duration: 3,
                description: '请先在底图配置-配置底图分级显示方案',
              });
            }
          } else {
            notification.warning({
              message: '提示',
              duration: 3,
              description: '请先在底图配置-配置底图分级显示方案',
            });
          }
        });
      });
    }
  };

  const addTileBase = value => {
    let serverList = [];
    setFormObj(value);
    if (JSON.stringify(value) != '{}') {
      GettMaplayer({ terminalType: 'base', isBaseMap: true }).then(res => {
        if (res.msg === 'Ok') {
          res.data.general.baseMap.layers.map(item => {
            if (value.baseMap.indexOf(item.servicename) == -1) {
              serverList.push(item.servicename);
            }
          });
        }
        if (serverList.length) {
          setServiceList(serverList);
          setType('add');
          setBaseVisible(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.msg === 'Ok') {
        setMapScopeVisible(false);
        message.info('范围设置成功');
      }
    });
  };
  const pick = (schemename, baseMapItem) => {
    console.log(props.item.defaultOldBaseMap);
    let i = props.item.defaultOldBaseMap.indexOf(baseMapItem);
    console.log(i);
    SetServiceConfig({
      schemename: schemename,
      terminalType: 'scheme',
      isBaseMap: false,
      jsonCfg: JSON.stringify({
        defaultBaseMap: i,
      }),
    }).then(res => {
      if (res.msg === 'Ok') {
        deletebaseMaps();
        message.info('设置成功');
      } else {
        message.warning(res.msg);
      }
    });
  };
  return (
    <>
      <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.schemeBtn} onClick={() => addTileBase(props.item)}>
            {' '}
            <GlobalOutlined />
            添加基础底图
          </Button>
          <Button className={styles.schemeBtn} onClick={() => addTile(props.item)}>
            {' '}
            <BlockOutlined />
            添加分级底图
          </Button>
        </div>
        <div style={{ overflowY: 'scroll', height: '11.4rem' }}>
          {props.item.baseMap && props.item.baseMap.length
            ? props.item.baseMap.map((baseMapItem, baseindex) => {
                return (
                  <div className={styles.mapItem} key={baseindex}>
                    <div
                      onClick={() => pick(props.item.schemename, baseMapItem)}
                      className={classnames({
                        [styles.defaultTile]: true,
                        [styles.activeTile]: baseindex == props.item.defaultBaseMap,
                      })}
                    >
                      默认
                      {cardData.indexOf(baseMapItem) == -1 ? (
                        <BlockOutlined style={{ marginTop: '5px' }} />
                      ) : (
                        <GlobalOutlined style={{ marginTop: '5px' }} />
                      )}
                    </div>
                    <div className={styles.mapText}>
                      <Tooltip title={baseMapItem}>{baseMapItem}</Tooltip>
                    </div>
                    <div className={styles.mapIcon}>
                      <Popconfirm
                        title={
                          cardData.indexOf(baseMapItem) == -1 ? (
                            <span>是否删除该分级底图？</span>
                          ) : (
                            <span>是否删除该底图？</span>
                          )
                        }
                        okText="确认"
                        cancelText="取消"
                        onConfirm={() => {
                          deletebaseMap(props.item, baseMapItem);
                        }}
                      >
                        <CloseOutlined />
                      </Popconfirm>{' '}
                    </div>
                  </div>
                );
              })
            : ''}
        </div>
      </Card>
      <AddModal
        visible={visible}
        onCancel={() => setVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        serviceList={serviceList}
        formObj={formObj}
      />
      <AddModalBase
        visible={basevisible}
        onCancel={() => setBaseVisible(false)}
        callBackSubmit={onSubmit}
        type={type}
        serviceList={serviceList}
        formObj={formObj}
      />
      <MapScope
        mapId={createGuid()}
        visible={mapScopeVisible}
        onCancel={() => setMapScopeVisible(false)}
        confirmModal={submitExtent}
        schemename={props.item.schemename}
        title={props.item.schemename}
      />
    </>
  );
};
export default CardData;
