import { FC, useRef } 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 { ASSESSMENT_STATUS_MAP } from "@/constants";

const AssessmentDetailPage: FC = () => {
  // 判断是否为考核填报进入
  const isReportDetail = useRef(window.location.hash.indexOf("form") > -1);
  // 判断是否为考核评定进入
  const isEvalutionDetail = useRef(
    window.location.hash.indexOf("evaluation") > -1
  );
  const [tab, setTab] = useHashQuery("tab", "1");

  return (
    <>
      <PageContainer
        title="考核标题"
        style={{
          background: "white",
          borderRadius: 5,
          padding: "0 25px",
          boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.05)",
        }}
        headerSlot={
          <div style={{ flex: 1 }}>
            <Tag color={ASSESSMENT_STATUS_MAP[0].color}>
              {ASSESSMENT_STATUS_MAP[0].label}
            </Tag>
          </div>
        }
      >
        <div className={style.topContent}>
          <div className={style.topContentLeft}>
            <div className={style.topContentItem}>
              <label>总分值</label>
              <span>432</span>
            </div>
          </div>

          <div className={style.topContentRight}>
            <div className={style.topContentItem}>
              <label>考核周期</label>
              <span>2020.1.1~2021.1.1</span>
            </div>
            <div className={style.topContentItem}>
              <label>钱桂英</label>
              <span style={{ fontWeight: "normal" }}>2024-09-22 21:19:20</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
                  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;
