import { onMount, For, Switch, Match } from "solid-js"
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';

import ItemHead from "../components/itemHead";
import Selsect from "../components/selsect";
import Laydate from "../components/laydate"

import "../assets/style/Third.css"

let WordEle;

function TrendChart() {
  const data = [
    { year: '1991', value: 15468, nagetiveValue: -15468, fraction: 0 },
    { year: '1992', value: 16100, nagetiveValue: -16100, fraction: 0 },
    { year: '1993', value: 15900, nagetiveValue: -15900, fraction: 0 },
    { year: '1994', value: 17409, nagetiveValue: -17409, fraction: 20 },
    { year: '1995', value: 17000, nagetiveValue: -17000, fraction: 20 },
    { year: '1996', value: 31056, nagetiveValue: -31056, fraction: 20 },
    { year: '1997', value: 31982, nagetiveValue: -31982, fraction: 20 },
    { year: '1998', value: 32040, nagetiveValue: -32040, fraction: 20 },
    { year: '1999', value: 33233, nagetiveValue: -33233, fraction: 20 },
  ];
  // 数据需要加工成 {year: '1996', type: 'north', value: 50} 的模式
  const dv = new DataSet.DataView().source(data);
  dv.transform({
    type: 'fold',
    fields: ['value', 'nagetiveValue', 'fraction'], // 展开字段集
    key: 'type', // key字段
    value: 'value', // value字段
  });
  const chart = new Chart({
    container: 'Trend',
    autoFit: true,
    height: WordEle.offsetHeight,
    renderer: 'svg',
    padding: [20, 50, 30, 50],
  });

  chart.data(dv.rows);
  chart.scale({
    value: {
      nice: true,
    },
    year: {
      range: [0, 1],
    },
    fraction: {
      nice: true,
    }
  });

  chart.axis('rain', {
    grid: null,
    title: {},
  });
  chart.axis('flow', {
    title: {},
  });
  chart.tooltip({
    showCrosshairs: true,
    shared: true,
    marker: {
      fill: "#ddd"
    },
    customItems: (items) => {
      const keys = {
        value: "非负面",
        nagetiveValue: "负面",
        value: "非负面",
      }
      for (let i = 0; i < items.length; i++) {
        const v = items[i];
        v.name = v.name === 'value' ? '非负面' : '负面'

      }
      return items;
    },
  });

  chart.axis('value', {
    label: {
      formatter: (val) => {
        return (val / 1000).toFixed(1) + 'k';
      },
    },
  });

  chart.area().position('year*value').color('type', ['#34643d', '#dd0303']).shape('smooth');
  chart.line().position('year*value').color('type', ['#34643d', '#dd0303']).shape('smooth');

  chart.render();
}

function HistoryListComponent(props) {
  return <div className="historylist">
    <div className="row">
      <div className="col5">
        <div className="listName">
          <span className={'sortNum ' + (props.i < 4 ? 'sortNumBG' : '')}>{props.i}</span>
          {props.item.title}
        </div>
      </div>
      <div className="col2 listName" style="text-align: right">
        <Switch fallback={<div>风险度：<span style="color: green">{props.item.risk}</span></div>}>
          <Match when={props.item.risk > 40}>
            风险度：<span style="color: red">{props.item.risk}</span>
          </Match>
        </Switch>
      </div>
    </div>
    <div style="text-align: right;padding-right: 5px;font-size: .1rem">
      {props.item.date}
      <img src="/src/assets/img/zz.png" style="width:2.5em;margin-left: 5px" alt="" />
    </div>
  </div>
}

function RealTimeListComponent(props) {
  return <div className="row">
    <div className="col1 realTime">
      <div className="text listName">{props.item.date.replace(/\-/g, '/')}</div>
      <div className="circular"></div>
    </div>
    <div className="col1 historylist border-right">
      <div className="row">
        <div className="col5">
          <div className="listName">
            {props.item.title}
          </div>
        </div>
      </div>
      <div style="text-align: right;padding-right: 5px;font-size: .1rem">
        <div className="col2 listName" style="text-align: right">
          <Switch fallback={<div>风险度：<span style="color: green">{props.item.risk}</span></div>}>
            <Match when={props.item.risk > 40}>
              风险度：<span style="color: red">{props.item.risk}</span>
            </Match>
          </Switch>
        </div>
      </div>
    </div>
  </div>
}

function FuncClassItemComponent(props) {
  return <div className="funcClassItem">
    <div className="row">
      <div className="col4">十四运</div>
      <div className="col1">2</div>
    </div>
    <div className="row">
      <div className="col1">
        0 <p>风险度</p>
      </div>
      <div className="col2">
        <div className="row">
          <div className="col1">0 <p>重视度</p></div>
          <div className="col1">0 <p>敏感度</p></div>
        </div>
        <div className="row">
          <div className="col1">0 <p>传播度</p></div>
          <div className="col1">0 <p>关注度</p></div>
        </div>
      </div>
    </div>
  </div>
}

function SwiperFuncClassComponent(props) {
  onMount(() => {
    new Swiper('.swiper-container2', {
      pagination: '.swiper-pagination',
      slidesPerView: 3,
      slidesPerColumn: 2,
      paginationClickable: true,
      spaceBetween: 30,
    });
  })

  return <div className="chart3 swiper-container swiper-container2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
      <div class="swiper-slide">
        <FuncClassItemComponent />
      </div>
    </div>
    {/* Add Pagination */}
    <div class="swiper-pagination"></div>
  </div>
}

function TrackFunc() {
  onMount(() => {
    new Swiper(".swiper-container1", {
      effect: "cards",
      pagination: '.swiper-pagination',
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }
    });
  })

  return <div className="chart3 swiper-container swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        1
      </div>
      <div class="swiper-slide">
        2
      </div>
    </div>
    {/* Add Pagination */}
    <div class="swiper-pagination"></div>
  </div>
}

function third() {
  onMount(() => {
    TrendChart()
  })

  const list = [
    {
      code: 0,
      name: "这是啥"
    },
    {
      code: 0,
      name: "这是啥2"
    },
    {
      code: 0,
      name: "这是啥3"
    }
  ]

  const historyData = [
    {
      title: "台湾高雄一12层建筑凌晨突发大火",
      risk: 0,
      date: "2021-10-12  00:00"
    },
    {
      title: "台湾高雄一12层建筑凌晨突发大火",
      risk: 0,
      date: "2021-10-12  01:00"
    },
    {
      title: "台湾高雄一12层建筑凌晨突发大火",
      risk: 0,
      date: "2021-10-12  01:00"
    },
    {
      title: "台湾高雄一12层建筑凌晨突发大火",
      risk: 0,
      date: "2021-10-12  01:00"
    }
  ]

  return (
    <div className="page">
      <div className="row height50 ThirdLayourt">
        <div className="col2">
          <ItemHead title="追踪事件" subtitle="Tracking Event" />
          <TrackFunc />
        </div>
        <div className="col3" ref={WordEle}>
          <div className="chart3" id="Trend"></div>
        </div>
      </div>
      <div className="row height50 ThirdLayourt">
        <div className="col1">
          <ItemHead title="实时预警" subtitle="RealTime Warning" />
          <div className="chart3" style="    overflow-y: scroll;height: calc(100% - 64px)">
            <For each={historyData}>
              {(item, i) => (
                <RealTimeListComponent item={item} i={i() + 1} />
              )}
            </For>
          </div>
        </div>
        <div className="col1 layout">
          <div className="datetime">
            <Laydate width="13em" id="laydate" />
          </div>
          <ItemHead title="历史事件榜" noimg={true} subtitle="History EventList" />
          <div className="chart3" style="    overflow-y: scroll;height: calc(100% - 64px)">
            <For each={historyData}>
              {(item, i) => (
                <HistoryListComponent item={item} i={i() + 1} />
              )}
            </For>
          </div>
        </div>
        <div className="col3 layout">
          <div className="datetime">
            <Selsect title="123" list={list} />
            <Selsect title="123" list={list} />
          </div>
          <ItemHead title="事件库" subtitle="Event Library " />
          <SwiperFuncClassComponent />
        </div>
      </div>
    </div>
  );
}

export default third;
