import Col from "antd/es/col";
import { Row } from "antd/lib/grid";
import * as echarts from "echarts";

import "./kanban.less";
import { useEffect } from "react";

const KanBan = () => {
  const initChart = () => {
    var myChart = echarts.init(document.getElementById("yibiaopan"));
    var option = {
      series: [
        {
          type: "gauge",
          center: ["50%", "70%"],
          startAngle: 200,
          endAngle: -20,
          radius:70,
          min: 0,
          max: 30,
          splitNumber: 12,
          itemStyle: {
            color: "#FFAB91",
          },
          axisLabel: {
            distance: -20,
            color: "#999",
            fontSize: 20,
          },
          anchor: {
            show: false,
          },
          title: {
            show: true,
          },
          detail: {
            valueAnimation: true,
            width: "40%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "-10%"],
            fontSize: 20,
            fontWeight: "bolder",
            formatter: "{value} °C",
            color: "inherit",
          },
          data: [
            {
              value: 20,
            },
          ],
        },
        {
          type: "gauge",
          center: ["50%", "70%"],
          startAngle: 200,
          radius:70,
          endAngle: -20,
          min: 0,
          max: 60,
          itemStyle: {
            color: "#FD7347",
          },
          progress: {
            show: true,
            width: 6,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 20,
            },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  };
  const sourece = (id: string) => {
    var myChart = echarts.init(document.getElementById(id));
    var option = {
      legend: {
        top: "bottom",
        show: false,
      },
      series: [
        {
          type: "pie",
          radius: [30, 80],
          center: ["50%", "50%"],
          itemStyle: {
            borderRadius: 2,
          },
          label: {
            normal: {
              show: true,
              position: "inner",
              formatter: "{b}:{c}",
            },
          },
          data: [
            { value: 40, name: "第三方" },
            { value: 18, name: "购买" },
            { value: 18, name: "自有" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  };
  const guoqi = (id: string) => {
    var myChart = echarts.init(document.getElementById(id));
    var option = {
      legend: {
        top: "bottom",
        show: false,
      },
      series: [
        {
          type: "pie",
          radius: [30, 80],
          center: ["50%", "50%"],
          itemStyle: {
            borderRadius: 2,
          },
          label: {
            normal: {
              show: true,
              position: "inner",
              formatter: "{b}:{c}",
            },
          },
          data: [
            { value: 40, name: "即将过期" },
            { value: 18, name: "已经过期" },
            { value: 18, name: "未过期" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  };
  const outin = (id: string) => {
    var myChart = echarts.init(document.getElementById(id));
    var option = {
      legend: {
        top: "bottom",
        show: false,
      },
      series: [
        {
          type: "pie",
          radius: [30, 80],
          center: ["50%", "50%"],
          itemStyle: {
            borderRadius: 2,
          },
          label: {
            normal: {
              show: true,
              position: "inner",
              formatter: "{b}:{c}",
            },
          },
          data: [
            { value: 40, name: "出库" },
            { value: 18, name: "入库" },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
  };
  const gailan = () => {
    var myChart = echarts.init(document.getElementById("gailan"));
    var option = {
      xAxis: {
        type: "category",
        data: [
          "个人携行",
          "反恐维稳",
          "反恐维稳",
          "地震救援",
          "防汛抗洪",
          "灭火救援",
        ],
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 30,
        },
      },
      grid: { top: "10%", bottom: "15%", right: "5%" },
      yAxis: {
        type: "value",
        splitLine: {
          show: false, // 去除网格线
        },
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330],
          type: "line",
          smooth: true,
          areaStyle: {
            opacity: 0.1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(128, 255, 165)",
              },
              {
                offset: 1,
                color: "rgb(1, 191, 236)",
              },
            ]),
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    initChart();
    sourece("sourece");
    guoqi("yujing");
    outin("baozhiqi");
    sourece("level");
    gailan();
  }, []);
  return (
    <>
      <Row style={{ margin: "10px" }}>
        <Col className="gutter-row" span={6}>
          <div
            className="kanban-item"
            style={{ backgroundColor: "rgba(37, 52, 70, 0.4)" }}
          >
            <div>
              <p
                style={{
                  backgroundColor: "#29ecb4",
                  width: "100%",
                  padding: "10px",
                }}
              >
                安全运行天数
              </p>
              <p
                style={{
                  fontSize: "30px",
                  margin: "0px",
                  fontWeight: "800",
                  color: "#29ecb4",
                }}
              >
                109
              </p>
              <p style={{ color: "#29ecb4" }}>2024 / 12 / 12 星期四 09:10</p>
            </div>
          </div>
          <div className="kanban-item" style={{ margin: "10px 0px" }}>
            <div>
              <div
                id="yibiaopan"
                style={{ width: "240px", height: "240px" }}
              ></div>
            </div>
          </div>
          <div className="kanban-item">
            <div>
              <div
                id="sourece"
                style={{ width: "240px", height: "240px" }}
              ></div>
            </div>
          </div>
        </Col>

        <Col className="gutter-row" span={12}>
          <div className="kanban-item">
            <div>暂无视频</div>
          </div>
          <div className="kanban-item" style={{ margin: "10px 0px" }}>
            <div>暂无视频</div>
          </div>
          <div className="kanban-item">
            <div id="gailan" style={{ width: "100%", height: "240px" }}></div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="kanban-item">
            <div id="yujing" style={{ width: "240px", height: "240px" }}></div>
          </div>
          <div className="kanban-item" style={{ margin: "10px 0px" }}>
            <div
              id="baozhiqi"
              style={{ width: "240px", height: "240px" }}
            ></div>
          </div>
          <div className="kanban-item">
            <div id="level" style={{ width: "240px", height: "240px" }}></div>
          </div>
        </Col>
      </Row>
    </>
  );
};

export default KanBan;
