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

  useEffect(() => {
    console.log(props.item);
  }, []);
  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();
  };
  // 增加瓦片
  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);
            }
          });
        }
        if (serverList.length) {
          setServiceList(serverList);
          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.msg === 'Ok') {
        setMapScopeVisible(false);
        message.info('范围设置成功');
      }
    });
  };
  const pick = (schemename, index) => {
    SetServiceConfig({
      schemename: schemename,
      terminalType: 'scheme',
      isBaseMap: false,
      jsonCfg: JSON.stringify({
        defaultBaseMap: index,
      }),
    }).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: 300 }}
      >
        <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={() => addTile(props.item)}>
            {' '}
            <PlusOutlined />
            添加瓦片
          </Button>
        </div>
        <div style={{ overflowY: 'scroll', maxHeight: '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, baseindex)}
                      className={classnames({
                        [styles.defaultTile]: true,
                        [styles.activeTile]: baseindex == props.item.defaultBaseMap,
                      })}
                    >
                      默认
                    </div>
                    <div className={styles.mapText}>{baseMapItem}</div>
                    <div className={styles.mapIcon}>
                      <Popconfirm
                        title="是否删除该底图？"
                        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}
      />
      <MapScope
        mapId={createGuid()}
        visible={mapScopeVisible}
        onCancel={() => setMapScopeVisible(false)}
        confirmModal={submitExtent}
        schemename={props.item.schemename}
        title={props.item.schemename}
      />
    </>
  );
};
export default CardData;
