import { FC, useEffect, useRef, useState } from "react";
import { Button, Tabs, Tag } from "antd";
import { FormPageFooter, PageContainer } from "@/components";
import { OverallAssessment } from "./components/OverallAssessment";
import { IndexAssessment } from "./components/IndexAssessment";
import style from "./index.module.scss";
import { useHashQuery } from "@/hooks";
import { DEPT_STATUS_MAP, PUBLISH_STATUS_MAP } from "@/constants";
import { useParams } from "react-router-dom";
import {
  getManageEvaluationDetailApi,
  getManageFormDetailApi,
  getManageIndexDetailApi,
} from "@/api";
import { IManageFormDetail, IManageIndexDetail } from "@/types";
import { DageLoading } from "@dage/pc-components";
import { isNumber } from "lodash";

const AssessmentDetailPage: FC = () => {
  // 判断是否为考核填报进入
  const isReportDetail = useRef(window.location.hash.indexOf("form") > -1);
  // 判断是否为考核评定进入
  const isEvalutionDetail = useRef(
    window.location.hash.indexOf("evaluation") > -1
  );
  // 判断是否为考核管理进入
  const isIndexDetail = useRef(window.location.hash.indexOf("index") > -1);
  const [tab, setTab] = useHashQuery("tab", "1");
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState<
    IManageIndexDetail | IManageFormDetail | null
  >(null);
  const params = useParams();

  const getDetail = async () => {
    try {
      setLoading(true);
      const data = await (isReportDetail.current
        ? getManageFormDetailApi
        : isEvalutionDetail.current
        ? getManageEvaluationDetailApi
        : getManageIndexDetailApi)(params.id as string);
      setDetail(data);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <>
      <PageContainer
        title={detail?.name || ""}
        style={{
          background: "white",
          borderRadius: 5,
          padding: "0 25px",
          boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.05)",
        }}
        headerSlot={
          detail ? (
            <div style={{ flex: 1 }}>
              {!isIndexDetail.current ? (
                <Tag
                  color={
                    DEPT_STATUS_MAP[(detail as IManageFormDetail).deptStatus]
                      .color
                  }
                >
                  {
                    DEPT_STATUS_MAP[(detail as IManageFormDetail).deptStatus]
                      .label
                  }
                </Tag>
              ) : (
                <Tag
                  color={
                    PUBLISH_STATUS_MAP[(detail as IManageIndexDetail).status]
                      .color
                  }
                >
                  {
                    PUBLISH_STATUS_MAP[(detail as IManageIndexDetail).status]
                      .label
                  }
                </Tag>
              )}
            </div>
          ) : undefined
        }
      >
        {loading && <DageLoading />}
        <div className={style.topContent}>
          <div className={style.topContentLeft}>
            <div className={style.topContentItem}>
              <label>总分值</label>
              <span>{isNumber(detail?.score) ? detail?.score : "--"}</span>
            </div>
          </div>

          <div className={style.topContentRight}>
            <div className={style.topContentItem}>
              <label>考核周期</label>
              <span>
                {detail?.dateStart}~{detail?.dateEnd}
              </span>
            </div>
            <div className={style.topContentItem}>
              <label>{detail?.creatorName}</label>
              <span style={{ fontWeight: "normal" }}>{detail?.createTime}</span>
            </div>
          </div>
        </div>
      </PageContainer>
      <div className={style.pane}>
        <Tabs
          size="large"
          defaultActiveKey={tab}
          tabBarGutter={60}
          className={style.tabs}
          indicator={{
            size: 75,
          }}
          items={[
            {
              key: "1",
              label: "总体考核",
              children: (
                <OverallAssessment
                  detail={detail}
                  isReportDetail={isReportDetail.current}
                  isEvalutionDetail={isEvalutionDetail.current}
                />
              ),
            },
            {
              key: "2",
              label: "指标考核",
              children: (
                <IndexAssessment
                  isReportDetail={isReportDetail.current}
                  isEvalutionDetail={isEvalutionDetail.current}
                />
              ),
            },
          ]}
          onChange={(v) => setTab(v)}
        />
      </div>

      {isReportDetail.current && (
        <FormPageFooter>
          <Button size="large" type="primary">
            提交
          </Button>
          <Button size="large">保存并关闭</Button>
        </FormPageFooter>
      )}

      {isEvalutionDetail.current && (
        <FormPageFooter>
          <Button size="large" type="primary">
            完成评定
          </Button>
          <Button size="large" type="primary" ghost>
            保存
          </Button>
          <Button size="large" danger style={{ width: 160 }}>
            退回不合格的资料
          </Button>
          <Button size="large">关闭</Button>
        </FormPageFooter>
      )}
    </>
  );
};

export default AssessmentDetailPage;