import { getTokenInfo } from "@/utils/storage";
import { useEffect, useMemo, useRef, useState } from "react";
import styles from "./index.module.scss";
import dayjs from "dayjs";
import { Button } from "antd";
import classNames from "classnames";
import * as echarts from "echarts/core";
import { TooltipComponent, GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

export default function Home() {
  // 实时时间
  const [nowTime, setNowTime] = useState(
    dayjs(Date.now()).format("YYYY年MM月DD HH:mm")
  );

  // 头部右侧
  const tabList = useMemo(() => {
    return [
      { id: 1, path: "/", name: "藏品登记" },
      { id: 2, path: "/object", name: "藏品总账" },
      { id: 3, path: "/stores", name: "入库管理" },
      { id: 4, path: "/system", name: "出库管理" },
      { id: 5, path: "/system", name: "藏品注销" },
    ];
  }, []);

  const timeRef = useRef(-1);
  useEffect(() => {
    timeRef.current = window.setInterval(() => {
      setNowTime(() => {
        return dayjs(Date.now()).format("YYYY年MM月DD HH:mm");
      });
    }, 1000);
    return () => {
      clearInterval(timeRef.current);
    };
  }, []);

  const userInfo = useMemo(() => {
    return getTokenInfo().user;
  }, []);

  // -----------图表
  useEffect(() => {
    const chartDom: any = document.querySelector(".chart");
    const myChart = echarts.init(chartDom);
    const option = {
      color: ["#9F1927"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLabel: {
            textStyle: {
              color: "#000", //坐标值得具体的颜色
            },
          },
          axisLine: {
            //Y轴坐标轴
            show: true,
            // 坐标的颜色和宽度
            lineStyle: {
              width: 2,
              color: "#9F1927",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#000", //坐标值得具体的颜色
            },
          },
          axisLine: {
            //Y轴坐标轴
            show: true,
            lineStyle: {
              width: 2,
              color: "#9F1927",
            },
          },
          // 隐藏背景坐标线段
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(159, 25, 39, .5)" }, //渐变头部色
                { offset: 1, color: "rgba(159, 25, 39, 1)" },
              ]),

              barBorderRadius: 2,
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#9F1927",
                  fontSize: 16,
                },
              },
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
  }, []);

  // -------代办提醒
  // 头部右侧
  const doneList = useMemo(() => {
    return [
      { id: 1, num: 0, name: "藏品登记" },
      { id: 2, num: 7, name: "入库管理" },
      { id: 3, num: 5, name: "出库管理" },
      { id: 4, num: 0, name: "藏品修改" },
      { id: 5, num: 21, name: "藏品注销" },
    ];
  }, []);

  return (
    <div className={styles.Home}>
      <div className="homeMain">
        {/* 顶部页面 */}
        <div className="title">
          <div className="titleL">
            <h3>
              欢迎 {userInfo.userName} 进入
              <br />
              乐山大佛博物馆
              <br />
              馆藏管理系统！
            </h3>
            <p>{nowTime}</p>
          </div>
          <div className="titleR">
            {tabList.map((v) => (
              <div className="row" key={v.id}>
                <div className={`bac${v.id}`}></div>
                <p>{v.name}</p>
              </div>
            ))}
          </div>
        </div>
        {/* 下面数据 */}
        <div className="flooBox">
          <div className="flooBoxL">
            <div className="flooTit">
              <div>藏馆统计</div>
              <Button>查看更多</Button>
            </div>
            {/* 图表 */}
            <div className="chartBox">
              <div className="chartTit">（件）</div>
              <div className="chart"></div>
            </div>
          </div>
          <div className="flooBoxR">
            <div className="flooTit">
              <div>代办提醒</div>
            </div>
            <div className="doneBox">
              {doneList.map((v, i) => (
                <div
                  className={classNames("doneRow", i >= 4 ? "noneRow" : "")}
                  key={v.id}
                >
                  <div className="doneRow_tit">{v.name}</div>
                  <div className="doneRow_txt">
                    共有&emsp;<span>{v.num}</span>&emsp;代办事项
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
