import { Select } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import { CalendarOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";

import * as echarts from "echarts/core";
import {
  ToolboxComponent,
  LegendComponent,
  TooltipComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

function Hot() {
  // 日期下拉框
  const [select1, setSelect1] = useState<1 | 7 | 30 | "">(7);

  // 热门场馆下拉
  const [select2, setSelect2] = useState<"visit" | "star">("visit");

  // 热门馆藏下拉
  const [select3, setSelect3] = useState<"visit" | "star">("visit");

  // 获取饼图的函数
  const getEchartsFu = useCallback(
    (
      data: {
        value: number;
        name: string;
      }[]
    ) => {
      const chartDom = document.getElementById("echarts1")!;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "center",
          bottom: "20%",
          data,
          formatter: (name: string) => {
            let resName = "";
            data.forEach((v) => {
              if (name === v.name) {
                if (name.length > 8)
                  resName = name.slice(0, 8) + "... " + v.value;
                else resName = name + " " + v.value;
              }
            });

            return resName;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: [80, 120],
            center: ["50%", "30%"],
            // 设置圆角
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },

            data,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    []
  );

  // 获取数据
  const getInfoAPIFu = useCallback(() => {
    const data = [
      { value: 124, name: "新闻资讯", icon: "circle" },
      { value: 100, name: "虚拟漫游", icon: "circle" },
      { value: 200, name: "馆藏鉴赏", icon: "circle" },
      { value: 80, name: "场馆导览", icon: "circle" },
      { value: 70, name: "周边查询", icon: "circle" },
      { value: 155, name: "游客服务", icon: "circle" },
    ];
    getEchartsFu(data);
  }, [getEchartsFu]);

  useEffect(() => {
    getInfoAPIFu();
  }, [getInfoAPIFu]);

  return (
    <div className={styles.Hot}>
      <div className="pageTitle">热度统计</div>
      <div className="hotTopTime">
        <CalendarOutlined />
        &emsp;
        <Select
          value={select1}
          style={{ width: 100 }}
          onChange={(e) => setSelect1(e)}
          options={[
            { value: 1, label: "今日" },
            { value: 7, label: "近七天" },
            { value: 30, label: "近三十天" },
            { value: "", label: "全部" },
          ]}
        />
      </div>
      <div className="hotMain">
        <div className="hotBox1">
          <div className="hotBoxTit">热门板块</div>
          {/* 第一个echarts盒子 */}
          <div id="echarts1"></div>
        </div>
        <div className="hotBox2">
          <div className="hotBoxTit">
            热门场馆
            <div className="hotBoxTitRight">
              <Select
                value={select2}
                style={{ width: 100 }}
                onChange={(e) => setSelect2(e)}
                options={[
                  { value: "visit", label: "按浏览" },
                  { value: "star", label: "按点赞" },
                ]}
              />
            </div>
          </div>
        </div>
        <div className="hotBox3">
          <div className="hotBoxTit">
            热门馆藏
            <div className="hotBoxTitRight">
              <Select
                value={select3}
                style={{ width: 100 }}
                onChange={(e) => setSelect3(e)}
                options={[
                  { value: "visit", label: "按浏览" },
                  { value: "star", label: "按点赞" },
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const MemoHot = React.memo(Hot);

export default MemoHot;
