import { useEffect, useState } from "react";
import * as echarts from "echarts";
import "./pv.less";
import { SnippetsTwoTone } from "@ant-design/icons";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import PvTable from "./pvTable";
import PoverDetail from "../poverDetail";
const PoverPage = (props: Store) => {
  const { usrStore } = props;
  const [poverData, setPover] = useState<any>();
  const initChart = (id: string, count: number, total: number) => {
    var myChart = echarts.init(document.getElementById(id));
    var option = {
      title: {
        text: "10%",
        left: "center",
        top: "center",
        textStyle: {
          color: "#fff",
          fontSize: "18px",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["70%", "100%"],
          center: ["50%", "50%"],
          color: "#000",
          data: [
            {
              value: count,
              itemStyle: { color: "#254e99", borderRadius: 100 },
              emphasis: { scale: false },
            },
            {
              value: total,
              itemStyle: { color: "#f5f5f5" },
              emphasis: { scale: false },
            },
          ],
          label: {
            show: false,
          },
          animationDelay: function (idx) {
            return Math.random() * 200;
          },
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    usrStore.getPover().then((e) => {
      initChart("pover_jg",e.data.o_type_nums,e.data.total);
      initChart("pover_jgs",e.data.o_type_num,e.data.total);
      initChart("pover1",e.data.a_member,e.data.total);
      initChart("pover2",e.data.p_team,e.data.total);
      setPover(e.data);
    });
  }, [usrStore]);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div className="nav-header">
        <div style={{ textAlign: "center" }}>
          <div style={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
          <span style={{ color: "#fff" }}>机关单位</span>
        </div>
        <div className="pv-head-item">
          <SnippetsTwoTone style={{ fontSize: 30 }} />
          <div>
            <div>{poverData?.militia_meber}人</div>
            <span>基干民兵</span>
          </div>
        </div>
        <div className="pv-head-item">
          <SnippetsTwoTone style={{ fontSize: 30 }} />
          <div>
            <div>{poverData?.easy_meber}人</div>
            <span>普通民兵</span>
          </div>
        </div>
        <div className="pv-head-item">
          <SnippetsTwoTone style={{ fontSize: 30 }} />
          <div>
            <div>{poverData?.vet_meber}人</div>
            <span>退役军人</span>
          </div>
        </div>
        <div className="pv-head-item">
          <SnippetsTwoTone style={{ fontSize: 30 }} />
          <div>
            <div>{poverData?.c_member}人</div>
            <span>社干力量</span>
          </div>
        </div>
        <div className="pv-head-item">
          <SnippetsTwoTone style={{ fontSize: 30 }} />
          <div>
          <div>{poverData?.o_member}人</div>
            <span>三方力量</span>
          </div>
        </div>
      </div>
      <div className="nav-content" >
        <div className="content-left" onClick={(e)=>{
        usrStore.setPoverDe(false)
      }}>
          <div style={{ textAlign: "center" }}>
            <div style={{ width: "100%", height: "100%" }} id="pover_jg"></div>
            <span style={{ color: "#fff" }}>企事业单位</span>
          </div>
          <p></p>
          <div style={{ textAlign: "center" }}>
            <div style={{ width: "100%", height: "100%" }} id="pover1"></div>
            <span style={{ color: "#fff" }}>积极力量</span>
          </div>
          <p></p>
          <div style={{ textAlign: "center" }}>
            <div style={{ width: "100%", height: "100%" }} id="pover2"></div>
            <span style={{ color: "#fff" }}>专业队伍</span>
          </div>
        </div>
        <div className="content-right">
          <p style={{ margin: 0, fontSize: "20px", marginBottom: "10px" }}>
            双流区黄水镇人民武装部基干民兵力量
          </p>
          {usrStore.poverDetail? <PoverDetail />: <PvTable />}
        </div>
      </div>
    </div>
  );
};

export default inject("usrStore")(observer(PoverPage));