import { FC, useEffect, useMemo, useState } from "react";
import { Table } from "antd";
import style from "../../index.module.scss";
import { DageLoading } from "@dage/pc-components";
import { getAssIndexDetailApi } from "@/api";
import { IAssIndexDetail, YES_OR_NO } from "@/types";
import { CONNECT_WITH_SYMBOL_OPTIONS, SYMBOL_OPTIONS } from "../../constants";

export interface ContainerProps {
  currentId: number | null;
}

export const Container: FC<ContainerProps> = ({ currentId }) => {
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState<IAssIndexDetail | null>(null);
  // 打分点
  const isPoint = detail?.isPoint === YES_OR_NO.YES;
  const point = useMemo(
    () => (detail && isPoint ? JSON.parse(detail.jsonPoint) : null),
    [detail]
  );
  // 告警阈值
  const isWarn = detail?.isWarn === YES_OR_NO.YES;
  const warnStr = useMemo(() => {
    if (!isWarn) return;

    const data = JSON.parse(detail.jsonWarn);
    const symbol = SYMBOL_OPTIONS.find((i) => i.value === data.symbol);
    let str = `${symbol?.label}${data.num}`;

    const connect = CONNECT_WITH_SYMBOL_OPTIONS.find(
      (i) => i.value === data.and
    );
    const symbol2 = SYMBOL_OPTIONS.find((i) => i.value === data.symbol2);
    if (connect && symbol2 && data.num2) {
      str += ` ${connect.label} ${symbol2.label}${data.num2}`;
    }
    return str;
  }, [detail]);

  const getDetail = async () => {
    if (!currentId) return;

    try {
      setLoading(true);
      const data = await getAssIndexDetailApi(currentId);
      setDetail(data);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className={style.container}>
      <h4 className={style.containerTitle}>指标详情</h4>

      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>指标名称</p>
        <div className={style.tableItemInner}>{detail?.name}</div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>指标编号</p>
        <div className={style.tableItemInner}>{detail?.num}</div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>指标说明</p>
        <div className={style.tableItemInner}>{detail?.remark}</div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>是否为打分点</p>
        <div className={style.tableItemInner}>{!isPoint ? "否" : "是"}</div>
      </div>
      {isPoint && point && (
        <>
          <div className={style.tableItem}>
            <p className={style.tableItemLabel}>数据API</p>
            <div className={style.tableItemInner}>{point.api || "--"}</div>
          </div>
          <div className={style.tableItem}>
            <p className={style.tableItemLabel}>是否为加分项</p>
            <div className={style.tableItemInner}>
              {point.isAdd === 1 ? "是" : "否"}
            </div>
          </div>
          <div className={style.tableItem}>
            <p className={style.tableItemLabel}>分值</p>
            <div className={style.tableItemInner}>{point.score}</div>
          </div>
        </>
      )}
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>告警阈值</p>
        {!isWarn ? (
          "未开启"
        ) : (
          <div className={style.tableItemInner}>{warnStr}</div>
        )}
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>需上传资料</p>
        <div className={style.tableItemInner}>
          <Table
            className="cus-table"
            rowKey="id"
            dataSource={detail?.materials}
            columns={[
              {
                title: "资料名称",
                dataIndex: "name",
                key: "name",
                align: "center",
              },
              {
                title: "必须上传",
                align: "center",
                render: (e) => (e.isUpload === YES_OR_NO.YES ? "是" : "否"),
              },
              {
                title: "模板",
                dataIndex: "fileName",
                key: "fileName",
                align: "center",
              },
            ]}
          />
        </div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>排序值</p>
        <div className={style.tableItemInner}>{detail?.sort}</div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>编辑时间</p>
        <div className={style.tableItemInner}>{detail?.updateTime}</div>
      </div>
      <div className={style.tableItem}>
        <p className={style.tableItemLabel}>编辑人</p>
        <div className={style.tableItemInner}>{detail?.creatorName}</div>
      </div>

      {loading && <DageLoading />}
    </div>
  );
};