import styles from './index.less';

const NewNumberBar = (props) => {
  const { breakdown = [], exception = [], current, scale = false } = props;
  let number = [];
  breakdown.forEach((item) => {
    number.push(item.ThresholdValue);
    if (item.ThresholdValue2) number.push(item.ThresholdValue2);
  });
  exception.forEach((item) => {
    number.push(item.ThresholdValue);
    if (item.ThresholdValue2) number.push(item.ThresholdValue2);
  });
  let numbers = [...new Set(number)].sort((a, b) => a - b);
  if (current) number.push(current);
  let scaleList = [...new Set(number)].sort((a, b) => a - b);
  const section = scaleList.length + 1; //current || current == 0 ? scaleList.length + 2 :

  const getLeft = (cur) => {
    let index = scaleList.findIndex((value) => value == cur);
    return `${((index + 1) * 100) / section}%`;
  };
  const getWidth = (cur) => {
    let index = scaleList.findIndex((value) => value == cur);
    return `${((section - (index + 1)) * 100) / section}%`;
  };

  const getMarginLeft = (item) => {
    const { ThresholdValue, ThresholdValue2 } = item;
    let index = scaleList.findIndex((value) => value == ThresholdValue);
    let index2 = scaleList.findIndex((value) => value == ThresholdValue2);
    return `${((index2 - index) * 100) / section}%`;
  };

  const getStyle = (item) => {
    // let [min, max] = item;
    const { ThresholdType: type, ThresholdValue, ThresholdValue2 } = item;
    if (type == 0) return {};
    else if (type == 1 || type == 12)
      // 大于、大于等于
      return {
        width: '100%',
        width: getWidth(item.ThresholdValue),
        marginLeft: getLeft(item.ThresholdValue),
      };
    else if (type == 2 || type == 13)
      // 小于、小于等于
      return {
        width: getLeft(item.ThresholdValue),
      };
    else if (type == 3) {
      // 等于
      return { width: '1%', marginLeft: getLeft(item.ThresholdValue) };
    }
    // 区间内
    else {
      let index1 = scaleList.findIndex((value) => value == ThresholdValue);
      let index2 = scaleList.findIndex((value) => value == ThresholdValue2);
      return {
        // width: ((ThresholdValue2 - ThresholdValue) / state.total) * 100 + '%',
        width: (index2 - index1) * (100 / section) + '%',
        marginLeft: getLeft(item.ThresholdValue),
      };
    }
  };

  const renderBar = (barType, item, index) => {
    const { ThresholdType: type } = item;
    let key = `${barType}-${index}`;
    const backgroundColor = barType == 'exception' ? '#FFE26D' : '#D45C41';

    if (type == 5 || type == 9 || type == 10 || type == 11) {
      // 区间外
      return (
        <div
          key={key}
          className={styles.sectionOut}
          // style={{ display: 'flex', height: '100%', width: '100%', position: 'absolute', top: 0 }}
        >
          <div
            style={{
              height: '100%',
              backgroundColor,
              width: getLeft(item.ThresholdValue),
            }}
          >
            {/* {scaleBlack} */}
          </div>
          <div
            style={{
              height: '100%',
              backgroundColor,
              width: getWidth(item.ThresholdValue2),
              marginLeft: getMarginLeft(item),
            }}
          >
            {/* {scaleBlack} */}
          </div>
        </div>
      );
    } else {
      // 其他类型
      return (
        <div
          style={{
            ...getStyle(item),
            backgroundColor,
            height: '100%',
            position: 'absolute',
            top: 0,
          }}
        >
          {/* {scaleBlack} */}
        </div>
      );
    }
  };
  let padding = scale ? 30 : 0;
  return (
    <>
      <div
        className={styles.box}
        style={{ marginTop: padding, marginBottom: padding }}
      >
        {exception.map((item, index) => renderBar('exception', item, index))}
        {breakdown.map((item, index) => renderBar('breakdown', item, index))}
        {(current || current === 0) && (
          <>
            <div
              className={`${styles.scale} ${styles.top}`}
              style={{ left: getLeft(current) }}
            >
              {parseFloat(current).toFixed(2)}
            </div>
            <div className={styles.current} style={{ left: getLeft(current) }}>
              <div className={styles.currentBar}></div>
            </div>
          </>
        )}
        {scale &&
          (numbers || []).map((item) => (
            <div
              key={`scale-${item}`}
              className={styles.scale}
              style={{ left: getLeft(item) }}
            >
              {item}
            </div>
          ))}
      </div>
    </>
  );
};
export default NewNumberBar;
