import { onMount, createSignal, For } from "solid-js"
import { Scene, Marker, Popup } from '@antv/l7';
// import { ProvinceLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';

import Laydate from "../components/laydate"

// import config from "../base/config"

import "../assets/style/first.css"

import Table from "../components/table";

const [tab, setTab] = createSignal(0)


async function mapChart() {
    const scene = new Scene({
        id: 'map1',
        logoVisible: false,
        map: new GaodeMap({
            center: [108.2825, 36],
            pitch: 30,
            style: 'dark',
            zoom: 6,
            minZoom: 4,
            maxZoom: 10
        })
    });
    scene.on('loaded', () => {

        const popup = new Popup({
            offsets: [0, 20]
        }).setText('hello');

        const marker = new Marker()
            .setLnglat([109, 35])
            .setPopup(popup);

        scene.addMarker(marker);
        // new CountryLayer(scene, {
        //     data: [
        //         {
        //             value: 1000
        //         }
        //     ],
        //     depth: 1,
        //     coastlineWidth: 0,
        //     provinceStrokeWidth: 1,
        //     provinceStroke: "#2999c0",
        //     chinaNationalWidth: 1,
        //     chinaNationalStroke: '#2b3a7c',
        //     label: {
        //         size: 14,
        //         strokeWidth: 0,
        //         stroke: 'rgba(0,0,0,0)',
        //         color: "#fff"
        //     },
        //     fill: {
        //         color: {
        //             field: 'value',
        //             values: ['rgba(43,58,124, .1)']
        //         },
        //         activeColor: false
        //     },
        //     popup: {
        //         enable: false,
        //     }
        // });
    });
}

function first() {
    onMount(() => {
        mapChart()
    })
    const tHead = [{ text: '发布时间', type: 'Text' }, { text: '信息来源', type: 'Text' }, { text: '信息标题', type: 'Text', flex: 2 }];
    const tBody = [
        {
            color: "",
            col: [
                { text: '31分钟前', type: 'Text', color: "rgb(215 1 1 / 60%)", flex: 1 },
                { text: '懂车帝', type: 'Text', color: "rgb(215 1 1 / 60%)", flex: 1 },
                {
                    flex: 2,
                    text: '国足又输了 [流泪][流泪][流泪] 孔老二搬家 ……尽是书 说实话，怪不了这帮小子，他们尽力了，他们也就这能耐。 没有高考不行! 但是，高考为大众目标的教育，必然导致足球人口畸少而且素质极差。 此题',
                    type: 'Scroll',
                    color: "rgb(215 1 1 / 60%)"
                }
            ]
        }
    ]
    console.log("---")
    return (
        <div class="page firstStyle">
            <div class="firstTitle">
                <div class="T">
                    <div class="STitle">舆论场态势实时感知</div>
                </div>
                <div class="B">
                    <div class="row btnGroup">
                        <For each={['全部热点', '行业热点']}>{(v, i) =>
                            <div class={'col1 button ' + (tab() === i() ? 'select' : '')} tab={i()} onClick={() => setTab(i())}>{v}</div>
                        }</For>
                    </div>
                    <Laydate width="13em" id="laydate" />
                </div>
            </div>

            <Table localclass="secTableleft" head={tHead} body={tBody} />
            <Table localclass="secTableright" head={tHead} body={tBody} />

            <div id="map1"></div>
        </div>
    );
}

export default first;