import { Layout, Row, Col, Typography, Select } from 'antd';
import React, { useEffect } from 'react';
import styles from './Guide.less';

import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

interface Props {
  name: string;
}

// 脚手架示例组件
const Guide: React.FC<Props> = (props) => {
  const { name } = props;
  useEffect(() => {
    const scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        pitch: 20,
        style: 'light',
        center: [ 120, 20 ],
        zoom: 3
      })
    });
    scene.on('loaded', () => {
      fetch(
        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
      )
        .then(res => res.json())
        .then(data => {
          const pointLayer = new PointLayer({})
            .source(data)
            .shape('simple')
            .size(15)
            .color('mag', mag => {
              return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
            })
            .active(true)
            .style({
              opacity: 0.6,
              strokeWidth: 3
            });
          scene.addLayer(pointLayer);
        });
    });
  }, []);

  let onLayerSelectChange = (e:any) => {
    console.log(e);
  }
  
  return (
    <Layout>
      {/* <Row>
        <Typography.Title level={3} className={styles.title}>
          欢迎使用 <strong>{name}</strong> ！
        </Typography.Title>
      </Row> */}

      {/* 顶部信息 */}
      <div className={styles.homepageMsg}>
        <div className={styles.homepageMsgItem}>您已注册<span className={styles.homepageMsgItemSpan}>125</span>天</div>
        <div className={styles.homepageMsgItem}>已创建图层项目<span className={styles.homepageMsgItemSpan}>125</span>个</div>
        <div className={styles.homepageMsgItem}>已创建点位项目<span className={styles.homepageMsgItemSpan}>125</span>个</div>
      </div>

      {/* 下拉框 全国自定义点位数目图 */}
      <Row className={styles.filterWrap}>
        <Col span={5} className={styles.filterLabel}>全国自定义点位数目图</Col>
        <Col span={6}>
          <Select
            style = {{width: 310, color: '#2F66F2'}}
            onChange = {onLayerSelectChange}
            placeholder='全部自定义图层'
            options = {[
              {
                value: 'jack',
                label: 'Jack',
              },
              {
                value: 'lucy',
                label: 'Lucy',
              },
            ]}
          ></Select>
        </Col>
       
      </Row>
      

      {/* 地图 */}
      <div className={styles.homepageCircleOut}>
        <div className={styles.homepageCircleIn}>
          <div id='map' className={styles.map}></div>
        </div>
      </div>
    </Layout>
  );
};

export default Guide;