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

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



import "../assets/style/Fifth.css"

let WordEle;

function TrendChart() {
  const data = [
    { year: '1991', value: 15468 },
    { year: '1992', value: 16100 },
    { year: '1993', value: 15900 },
    { year: '1994', value: 17409 },
    { year: '1995', value: 17000 },
    { year: '1996', value: 31056 },
    { year: '1997', value: 31982 },
    { year: '1998', value: 32040 },
    { year: '1999', value: 33233 },
  ];
  const chart = new Chart({
    container: 'Trend',
    autoFit: true,
    height: WordEle.offsetHeight - 110,
    renderer: 'svg',
    padding: [20, 20, 30, 50],
  });

  chart.data(data);
  chart.scale({
    value: {
      min: 10000,
      nice: true,
    },
    year: {
      range: [0, 1],
    },
  });
  chart.tooltip({
    showCrosshairs: true,
    shared: true,
  });

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

  chart.area().position('year*value').shape('smooth');
  chart.line().position('year*value').shape('smooth');

  chart.render();
}

function RectChart() {
  const { DataView } = DataSet;
  const mobiles = [
    {
      "name": "三星",
      "brand": "三星",
      "value": 16.711901453726654,
      "children": [
        {
          "name": "三星Galaxy Note II",
          "value": 2.1588
        },
        {
          "name": "其他",
          "value": 0.6569
        }
      ]
    },
    {
      "name": "华为",
      "brand": "华为",
      "value": 8.45923464256909,
      "children": [
        {
          "name": "华为荣耀3X",
          "value": 0.4411
        },
        {
          "name": "其他",
          "value": 0.3379
        }
      ]
    },
    {
      "name": "小米",
      "brand": "小米",
      "value": 8.168930119898944,
      "children": [
        {
          "name": "小米手机M3",
          "value": 2.5106
        },
        {
          "name": "其他",
          "value": 0.1195
        }
      ]
    },
    {
      "name": "红米",
      "brand": "红米",
      "value": 6.860016513545617,
      "children": [
        {
          "name": "红米手机1s",
          "value": 2.0981
        },
        {
          "name": "其他",
          "value": 0.047
        }
      ]
    },
    {
      "name": "vivo",
      "brand": "vivo",
      "value": 6.6900485928653595,
      "children": [
        {
          "name": "vivo X3T",
          "value": 0.5202
        },
        {
          "name": "其他",
          "value": 0.2509
        }
      ]
    },
    {
      "name": "联想",
      "brand": "联想",
      "value": 4.83119057920539,
      "children": [
        {
          "name": "联想A320T",
          "value": 0.2273
        },
        {
          "name": "其他",
          "value": 0.1887
        }
      ]
    },
    {
      "name": "OPPO",
      "brand": "OPPO",
      "value": 4.724206371886631,
      "children": [
        {
          "name": "OPPO 1107",
          "value": 0.3173
        },
        {
          "name": "其他",
          "value": 0.1877
        }
      ]
    },
    {
      "name": "酷派",
      "brand": "酷派",
      "value": 4.600366818169094,
      "children": [
        {
          "name": "酷派8720L",
          "value": 0.293
        },
        {
          "name": "其他",
          "value": 0.1828
        }
      ]
    },
    {
      "name": "魅族",
      "brand": "魅族",
      "value": 1.6772881053417859,
      "children": [
        {
          "name": "魅族m1 note",
          "value": 0.4044
        },
        {
          "name": "其他",
          "value": 0.0488
        }
      ]
    },
    {
      "name": "中兴",
      "brand": "中兴",
      "value": 1.590510084675687,
      "children": [
        {
          "name": "中兴U807",
          "value": 0.132
        },
        {
          "name": "其他",
          "value": 0.0615
        }
      ]
    },
    {
      "name": "金立",
      "brand": "金立",
      "value": 1.526388460481574,
      "children": [
        {
          "name": "金立GN151",
          "value": 0.2131
        },
        {
          "name": "其他",
          "value": 0.0603
        }
      ]
    },
    {
      "name": "HTC",
      "brand": "HTC",
      "value": 1.481608507729738,
      "children": [
        {
          "name": "HTC One",
          "value": 0.1727
        },
        {
          "name": "其他",
          "value": 0.0583
        }
      ]
    },
    {
      "name": "索尼",
      "brand": "索尼",
      "value": 1.2413739743388843,
      "children": [
        {
          "name": "索尼Xperia Z3",
          "value": 0.2293
        },
        {
          "name": "其他",
          "value": 0.0463
        }
      ]
    },
    {
      "name": "海信",
      "brand": "海信",
      "value": 0.6904937214414083,
      "children": [
        {
          "name": "海信 HS-X8T",
          "value": 0.0321
        },
        {
          "name": "其他",
          "value": 0.0267
        }
      ]
    },
    {
      "name": "天语",
      "brand": "天语",
      "value": 0.5429533549715655,
      "children": [
        {
          "name": "天语Touch3",
          "value": 0.0498
        },
        {
          "name": "其他",
          "value": 0.0217
        }
      ]
    },
    {
      "name": "TCL",
      "brand": "TCL",
      "value": 0.3655895764217495,
      "children": [
        {
          "name": "TCL P301M",
          "value": 0.0787
        },
        {
          "name": "其他",
          "value": 0.0136
        }
      ]
    },
    {
      "name": "努比亚",
      "brand": "努比亚",
      "value": 0.3532994868802954,
      "children": [
        {
          "name": "努比亚NX505J",
          "value": 0.1058
        },
        {
          "name": "努比亚NX503A",
          "value": 0.0202
        }
      ]
    },
    {
      "name": "LG",
      "brand": "LG",
      "value": 0.32957718500706507,
      "children": [
        {
          "name": "LG Nexus4",
          "value": 0.1412
        },
        {
          "name": "其他",
          "value": 0.0124
        }
      ]
    },
    {
      "name": "朵唯",
      "brand": "朵唯",
      "value": 0.2858420985694951,
      "children": [
        {
          "name": "朵唯S1",
          "value": 0.0254
        },
        {
          "name": "其他",
          "value": 0.0097
        }
      ]
    },
    {
      "name": "全志",
      "brand": "全志",
      "value": 0.27148714077502867,
      "children": [
        {
          "name": "SoftwinerEvb",
          "value": 0.2714
        },
        {
          "name": "其他",
          "value": 0.0001
        }
      ]
    },
    {
      "name": "摩托罗拉",
      "brand": "摩托罗拉",
      "value": 0.2629327830198232,
      "children": [
        {
          "name": "摩托罗拉Atrix 4G",
          "value": 0.0308
        },
        {
          "name": "其他",
          "value": 0.0098
        }
      ]
    },
    {
      "name": "台电",
      "brand": "台电",
      "value": 0.12471093194559665,
      "children": [
        {
          "name": "台电A11",
          "value": 0.0975
        },
        {
          "name": "其他",
          "value": 0.004
        }
      ]
    }
  ]
  mobiles.forEach(function (mobile) {
    mobile.value = null;
  });
  const data = {
    name: 'root',
    children: mobiles,
  };
  const dv = new DataView();
  dv.source(data, {
    type: 'hierarchy',
  }).transform({
    field: 'value',
    type: 'hierarchy.treemap',
    tile: 'treemapResquarify',
    as: ['x', 'y'],
  });
  // 将 DataSet 处理后的结果转换为 G2 接受的数据
  const nodes = [];
  for (const node of dv.getAllNodes()) {
    if (!node.children) {
      const eachNode = {
        name: node.data.name,
        x: node.x,
        y: node.y,
        depth: node.depth,
        value: node.value,
      };
      if (!node.data.brand && node.parent) {
        eachNode.brand = node.parent.data.brand;
      } else {
        eachNode.brand = node.data.brand;
      }

      nodes.push(eachNode);
    }
  }
  const chart = new Chart({
    container: 'rect',
    autoFit: true,
    height: WordEle.offsetHeight - 110,
    padding: 0,
  });
  chart.coordinate().scale(1, -1); // 习惯性最小的在最下面
  chart.data(nodes);
  chart.axis(false);
  chart.legend(false);
  chart.tooltip({
    showTitle: false,
    showMarkers: false
  });
  chart
    .polygon()
    .position('x*y')
    .color('brand')
    .tooltip('name*value', function (name, value) {
      return {
        name,
        value,
      };
    })
    .style({
      lineWidth: 1,
      stroke: '#fff',
    })
    .label(
      'name',
      {
        offset: 0,
        style: {
          textBaseline: 'middle',
          fill: '#000',
          shadowBlur: 10,
          shadowColor: '#fff',
        },
        layout: {
          type: 'limit-in-shape'
        }
      }
    );
  chart.interaction('element-active');
  chart.render();
}

function fifth() {
  onMount(() => {
    TrendChart()
    RectChart()
  })
  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%)"
        }
      ]
    }
  ]
  return (
    <div className="page row FifthLayout">
      <div className="col1">
        <ItemHead title="专题监测信息" subtitle="Thematic monitoring information" />
        <Table head={tHead} body={tBody} />
      </div>
      <div className="col1">
        <div className="height50" ref={WordEle}>
          <ItemHead title="倾向趋势" subtitle="Tendency Trend" />
          <div className="chart3" id="Trend"></div>
        </div>
        <div className="height50">
          <ItemHead title="聚焦媒体榜" subtitle="Key point propogation node" />
          <div className="chart" id="rect"></div>
        </div>
      </div>
    </div>
  );
}

export default fifth;
