import React, { useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import {
  DataResTabListType,
  DataResType,
  colorRes,
  echResData,
  echResMax,
} from "../data";

type Props = {
  info: DataResTabListType;
  hidden: boolean;
};

function EchTxt({ info, hidden }: Props) {
  const [dataRes, setDataRes] = useState<DataResType[]>([]);

  // 总得分 和 总数
  const [maxNum, setMaxNum] = useState(0);

  const oldDataFlagId = useRef(0);

  useEffect(() => {
    // 防止多次渲染
    if (oldDataFlagId.current === info.id || info.tabAc === "表格") return;

    oldDataFlagId.current = info.id;

    // console.log("222222222222", info);

    const lodArr = info.optionsCount || [];

    const flag = info.type === "排序";
    // 获取总数

    const max = echResMax(lodArr, flag);

    setMaxNum(max);

    const arr: DataResType[] = echResData(lodArr, flag, max);

    setDataRes(arr);
  }, [info]);

  return (
    <div className={styles.EchTxt} hidden={hidden}>
      <div className="EchBox2Num" hidden={dataRes.length <= 0 || maxNum === 0}>
        {info.type === "排序" ? "总得分" : "总数"}：{maxNum}
      </div>
      {dataRes.map((v, i) => (
        <div key={i} className="EchBox2Son">
          {v.name === "其他" ? (
            <div className="EchBox2Son1">
              <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
                自定义回答：
              </div>
              <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
                {v.value}({v.bai})
              </div>
              <div className="EchBox2Son1_3">
                {v.customDesc.map((v2, i2) => (
                  <div key={i2}>
                    {i2 + 1}：{v2}
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div className="EchBox2Son1">
              <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
                {v.index}：
              </div>
              <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
                {v.value}({v.bai})
              </div>
              <div className="EchBox2Son1_3">{v.name}</div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

const MemoEchTxt = React.memo(EchTxt);

export default MemoEchTxt;
