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

import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { TooltipComponent, LegendComponent } from "echarts/components";

import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import HotMap from "./HotMap";
import classNames from "classnames";
import {
  getHotInfo1API,
  getHotInfo2API,
  getHotInfo3API,
  getHotInfo4API,
  getHotInfo5API,
  getHotInfo6API,
} from "@/store/action/A1Hot";
import { HotInfo1Type, HotInfo3Type, HotInfo4Type } from "@/types";
import { hotChangeObj } from "@/utils/changeData";

echarts.use([
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  TooltipComponent,
  LegendComponent,
  PieChart,
  LabelLayout,
]);

function Hot() {
  // 数量总计
  const [allNum1, setAllNum1] = useState(0);
  const [allNum2, setAllNum2] = useState(0);
  const [allNum3, setAllNum3] = useState(0);
  const [allNum4, setAllNum4] = useState(0);
  const [allNum5, setAllNum5] = useState(0);

  // 日期下拉框
  const [select1, setSelect1] = useState<1 | 7 | 30 | "">(7);
  // 藏品排行下拉框
  const [select2, setSelect2] = useState("visit");
  // 场景排行下拉框
  const [select3, setSelect3] = useState("visit");
  // 馆藏统计下拉框
  const [select4, setSelect4] = useState("texture");

  const [likeData, setLikeData] = useState<HotInfo4Type[]>([]);
  const [likeData2, setLikeData2] = useState<HotInfo4Type[]>([]);

  // 获取echarts图表的函数

  // 折线图
  const echartsFu1 = useCallback(
    (dom: string, data1: string[], data2: number[], color: string[]) => {
      const chartDom1: any = document.querySelector(dom)!;
      const myChart1 = echarts.init(chartDom1);
      const option1 = {
        color: color,
        grid: {
          left: "-24", //距左边边框的距离
          right: "0%", //距右边边框的距离
          bottom: "10", //距下面边框的距离
          top: "15", //距上面边框的距离
          containLabel: true,
        },

        xAxis: {
          type: "category",
          data: data1,
          axisLine: {
            show: false, //隐藏X轴
          },
          axisTick: {
            show: false, //隐藏刻度线
          },
          axisLabel: {
            show: false, //隐藏X轴文字
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data2,
            type: "line",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          // formatter: "{a} <br/>{b} : {c}"
        },
      };
      option1 && myChart1.setOption(option1);
    },
    []
  );

  // 饼图集合
  const echartsFu2 = useCallback(
    (dom: any, data: { value: number; name: string }[], obj: any) => {
      let chartDom2: any = document.querySelector(dom);
      let myChart2 = echarts.init(chartDom2);
      let option2 = {
        color: ["#11A480", "#00BBF6", "#F97C7C", "#93876D", "#ECDFBF"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          ...obj.legend,
          data,
          formatter: (name: string) => {
            let resName = "";
            data.forEach((v) => {
              if (name === v.name) {
                if (name.length > 4)
                  resName = name.slice(0, 4) + "... " + v.value;
                else resName = name + " " + v.value;
              }
            });

            return resName;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            ...obj.series,
            avoidLabelOverlap: false,
            // 设置圆角
            itemStyle: {
              borderRadius: 6,
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },
            data,
          },
        ],
      };
      option2 && myChart2.setOption(option2);
    },
    []
  );

  // 第一个饼图--浏览总数
  const echartsB1 = useCallback(async () => {
    const res3 = await getHotInfo3API(select1);
    const data3: HotInfo3Type[] = res3.data;
    let allNum4 = 0;
    const data4: any = [];
    data3.forEach((v) => {
      data4.push({
        icon: "circle",
        value: v.pcs,
        name: hotChangeObj[v.groupKey],
      });
      allNum4 += v.pcs;
    });
    setAllNum4(allNum4);
    // 左边饼图配置文件
    const data4Obj = {
      legend: { left: "center", bottom: 20 },
      series: { center: ["50%", "35%"], radius: ["50%", "70%"] },
    };
    echartsFu2("#echarts4", data4, data4Obj);
  }, [echartsFu2, select1]);

  // 藏品排行
  const getlikeData1Fu = useCallback(async () => {
    const res = await getHotInfo4API(select1, select2);
    const data: HotInfo4Type[] = res.data;
    setLikeData(data);
  }, [select1, select2]);

  // 场景排行
  const getlikeData2Fu = useCallback(async () => {
    const res = await getHotInfo5API(select1, select3);
    const data: HotInfo4Type[] = res.data;
    setLikeData2(data);
  }, [select1, select3]);

  // 馆藏统计---第二个饼图
  const getGoodsAllFu = useCallback(async () => {
    const res = await getHotInfo6API();
    const data: any = res.data;
    const data7: any = [];
    setAllNum5(data.total);
    for (const k in data) {
      if (k === select4) {
        data[k].forEach((v: any) => {
          data7.push({ icon: "circle", value: v.pcs, name: v.type });
        });
      }
    }
    // 右边饼图配置文件
    const data7Obj = {
      legend: { left: "center", bottom: 5 },
      series: { center: ["50%", "35%"], radius: ["40%", "60%"] },
    };
    echartsFu2("#echarts7", data7, data7Obj);
  }, [echartsFu2, select4]);

  // 关于浏览总数改变重新发请求拿数据
  useEffect(() => {
    echartsB1();
  }, [echartsB1]);

  // 关于藏品排行改变数据重新发请求拿数据
  useEffect(() => {
    getlikeData1Fu();
  }, [getlikeData1Fu]);

  // 关于场景排行改变数据重新发请求拿数据
  useEffect(() => {
    getlikeData2Fu();
  }, [getlikeData2Fu]);

  // 关于馆藏统计改变数据重新发请求拿数据
  useEffect(() => {
    getGoodsAllFu();
  }, [getGoodsAllFu]);

  const getInfoFu = useCallback(async () => {
    // 第一个折线 echarts----------------------------
    const res1 = await getHotInfo1API();
    const data1: HotInfo1Type[] = res1.data.reverse();
    let allNum1 = 0;
    const data1_1: string[] = [];
    const data1_2: number[] = [];
    data1.forEach((v) => {
      data1_1.push(v.today);
      data1_2.push(v.pcsUser);
      allNum1 += v.pcsUser;
    });
    setAllNum1(allNum1);
    echartsFu1("#echarts1", data1_1, data1_2, ["#11A480"]);

    // 第二、三个折线 echarts----------------------------
    const res2 = await getHotInfo2API();
    const data2: HotInfo1Type[] = res2.data.reverse();
    let allNum2 = 0;
    const data2_1: string[] = [];
    const data2_2: number[] = [];

    let allNum3 = 0;
    const data3_1: string[] = [];
    const data3_2: number[] = [];

    data2.forEach((v) => {
      data2_1.push(v.today);
      data2_2.push(v.pcsWall);
      allNum2 += v.pcsWall;

      data3_1.push(v.today);
      data3_2.push(v.pcsWearable);
      allNum3 += v.pcsWearable;
    });
    setAllNum2(allNum2);
    setAllNum3(allNum3);

    echartsFu1("#echarts2", data2_1, data2_2, ["#00BBF6"]);
    echartsFu1("#echarts3", data3_1, data3_2, ["#F97C7C"]);
  }, [echartsFu1]);

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

  return (
    <div className={styles.Hot}>
      <div className="pageTitlt">热度统计</div>

      <div className="hotMainBox">
        {/* 上面 */}
        <div className="topBox">
          <div className="topBoxL">
            {/* 线上访客盒子 */}
            <div className="topBoxL1">
              <div className="hotTit">
                线上访客&nbsp;&nbsp;
                <span style={{ color: "#11A480" }}>{allNum1}</span>
                <Tooltip title="近14个自然日的访客数；一天内同一访客多次访问记为1">
                  <div className="inco">
                    <ExclamationCircleFilled />
                  </div>
                </Tooltip>
              </div>
              {/* 第一个echarts盒子 */}
              <div id="echarts1"></div>
              <div className="hotTime">近十四天数据</div>
            </div>
            <div className="topBoxL2">
              {/* 万物墙热度盒子 */}
              <div className="topBoxL2L">
                <div className="hotTit">
                  万物墙热度&nbsp;&nbsp;
                  <span style={{ color: "#00BBF6" }}>{allNum2}</span>
                  <Tooltip title="查看场景/文物/视频时，记为1点热度">
                    <div className="inco">
                      <ExclamationCircleFilled />
                    </div>
                  </Tooltip>
                </div>
                {/* 第二个echarts盒子 */}
                <div id="echarts2"></div>
                <div className="hotTime">近七天数据</div>
              </div>
              {/* 穿戴设备热度盒子 */}
              <div className="topBoxL2R">
                <div className="hotTit">
                  穿戴设备热度&nbsp;&nbsp;
                  <span style={{ color: "#F97C7C" }}>{allNum3}</span>
                  <Tooltip title="穿戴设备每次启动，记为1点热度">
                    <div className="inco">
                      <ExclamationCircleFilled />
                    </div>
                  </Tooltip>
                </div>
                {/* 第三个echarts盒子 */}
                <div id="echarts3"></div>
                <div className="hotTime">近七天数据</div>
              </div>
            </div>
          </div>
          {/* 地图盒子 */}
          <div className="topBoxR">
            <div className="hotTit">
              访客来源
              <Tooltip title="根据近30天访问情况进行统计">
                <div className="inco">
                  <ExclamationCircleFilled />
                </div>
              </Tooltip>
            </div>
            <HotMap />
          </div>
        </div>
        {/* 下面 */}
        <div className="downBox">
          <div className="downBoxL">
            <div className="downBoxLTop">
              <div className="downBoxLTopInco">
                <CalendarOutlined />
              </div>
              <Select
                value={select1}
                style={{ width: 100 }}
                onChange={(e) => setSelect1(e)}
                options={[
                  { value: 1, label: "今日" },
                  { value: 7, label: "近七日" },
                  { value: 30, label: "近三十日" },
                  { value: "", label: "所有时间" },
                ]}
              />
              <div className="downBoxLTopTit">
                可对浏览总数、馆藏排行、场景排行进行日期区间的筛选
              </div>
            </div>
            <div className="downBoxLMain">
              <div className="downBoxLMain2">
                <div className="downBoxLMain2EchBox">
                  <div className="hotTit">
                    浏览总数
                    <Tooltip title="在所选时间段内，每查看一次对应内容记为1">
                      <div className="inco">
                        <ExclamationCircleFilled />
                      </div>
                    </Tooltip>
                  </div>
                  <div className="echarts4Box">
                    <div className="echarts4BoxTxt">
                      <div>总数</div>
                      <p>{allNum4}</p>
                    </div>
                    <div id="echarts4"></div>
                  </div>
                </div>

                <div className="downBoxLMain2L">
                  <div className="hotTitSelect">
                    <div>藏品排行</div>
                    <Select
                      value={select2}
                      style={{ width: 100 }}
                      onChange={(e) => setSelect2(e)}
                      options={[
                        { value: "visit", label: "按浏览" },
                        { value: "star", label: "按点赞" },
                        { value: "barrage", label: "按弹幕" },
                      ]}
                    />
                  </div>
                  {likeData.length ? (
                    <div className="downBoxLMain2LRowBox">
                      {likeData.map((v, i) => (
                        <div className="downBoxLMain2LRow" key={v.name}>
                          <div className="downBoxLMain2LRow1" title={v.name}>
                            <div
                              className={classNames(
                                "num",
                                i === 0
                                  ? "num1"
                                  : i === 1
                                  ? "num2"
                                  : i === 2
                                  ? "num3"
                                  : i === 3
                                  ? "num4"
                                  : "num5"
                              )}
                            >
                              {i + 1}
                            </div>
                            <div className="txt">{v.name}</div>
                          </div>
                          <div className="downBoxLMain2LRow2">{v.pcs}</div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="noneInfo">
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    </div>
                  )}
                </div>
                <div className="downBoxLMain2R">
                  <div className="hotTitSelect">
                    <div>场景排行</div>
                    <Select
                      value={select3}
                      style={{ width: 100 }}
                      onChange={(e) => setSelect3(e)}
                      options={[
                        { value: "visit", label: "按浏览" },
                        { value: "star", label: "按点赞" },
                      ]}
                    />
                  </div>

                  {likeData2.length ? (
                    <div className="downBoxLMain2LRowBox">
                      {likeData2.map((v, i) => (
                        <div className="downBoxLMain2LRow" key={v.name}>
                          <div className="downBoxLMain2LRow1" title={v.name}>
                            <div
                              className={classNames(
                                "num",
                                i === 0
                                  ? "num1"
                                  : i === 1
                                  ? "num2"
                                  : i === 2
                                  ? "num3"
                                  : i === 3
                                  ? "num4"
                                  : "num5"
                              )}
                            >
                              {i + 1}
                            </div>
                            <div className="txt">{v.name}</div>
                          </div>
                          <div className="downBoxLMain2LRow2">{v.pcs}</div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="noneInfo">
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    </div>
                  )}

                  <div className="downBoxLMain2LRow"></div>
                </div>
              </div>
            </div>
          </div>
          <div className="downBoxR">
            <div className="hotTitSelect">
              <div>馆藏统计</div>
              <Select
                value={select4}
                style={{ width: 100 }}
                onChange={(e) => setSelect4(e)}
                options={[
                  { value: "texture", label: "按类别" },
                  { value: "age", label: "按年代" },
                  { value: "level", label: "按级别" },
                ]}
              />
            </div>
            <div className="downBoxRBox">
              <div id="echarts7"></div>
              <div className="downBoxRBoxTxt">
                <div>总数</div>
                <p>{allNum5}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const MemoHot = React.memo(Hot);

export default MemoHot;
