import { useMemo } from 'react';
import styles from './index.less';
/**
 *
 * @param {object} props
 * @param {array[object]} props.breakdown 异常值数据范围 [{ThresholdType: 0,ThresholdValue:1,ThresholdValue2:2}]
 * @param {array[object]} props.exception 警告值数据范围 [{ThresholdType: 0,ThresholdValue:1,ThresholdValue2:2}]
 * @param {number} ThresholdType 数值类型 
 *                                <Option value={0}>无</Option>
                                  <Option value={1}>大于</Option>
                                  <Option value={2}>小于</Option>
                                  <Option value={3}>等于</Option>
                                  <Option value={4}>区间</Option>
                                  <Option value={5}>区间外</Option>
                                  <Option value={6}>区间左包含</Option>
                                  <Option value={7}>区间右包含</Option>
                                  <Option value={8}>区间全包含</Option>
                                  <Option value={9}>区间外左包含</Option>
                                  <Option value={10}>区间外右包含</Option>
                                  <Option value={11}>区间外全包含</Option>
                                  <Option value={12}>大于等于</Option>
                                  <Option value={13}>小于等于</Option>
 * @param {number} ThresholdValue 第一个数值 
 * @param {number} ThresholdValue2 第二个数值 
 * @returns
 */
const NumberBar = (props) => {
  const { breakdown = [], exception = [], current, scale = false } = props;
  const state = useMemo(() => {
    let number = [];
    // if (current || current === 0) number.push(current);
    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 scaleList = [...new Set(number)].sort((a, b) => a - b);
    // if (current || current === 0) {
    //   // 如果current存在，则计算最大最小值时带上current
    //   number.push(current);
    // }
    let max = Math.max.apply(null, number);
    let min = Math.min.apply(null, number);
    let total;
    // 后续定位的计算依赖最大值和最小值
    // 如果最大值等于最小值则定位异常
    if (max == min) {
      // 手动修改最小值和最大值
      max = max * 2;
      min = min > 0 ? 0 : min / 2;
    }
    total = max - min;

    return {
      total,
      max,
      min,
      scaleList,
    };
  }, [breakdown, exception]);

  // 将所有阈值放在一个数组里并排序
  // 宽度为300%的阈值状态条分为(阈值数量+1)段
  // 再根据阈值在数组中的顺序关联在状态条上的位置
  const getLeft = (current) => {
    let index = state.scaleList.findIndex((value) => value == current);
    let number = (index + 1) * (300 / (state.scaleList.length + 1)) - 100;
    // let number = ((current - state.min) / state.total) * 100
    // if(number > 140) number = 140
    // if(number < -40) number = -40
    return number + '%';
  };
  const getRight = (current) => {
    let index = state.scaleList.findIndex((value) => value == current);
    let number = 200 - (index + 1) * (300 / (state.scaleList.length + 1));
    // let number = ((state.max - current) / state.total) * 100;
    // if (number > 140) number = 140;
    // if (number < -40) number = -40;
    return number + '%';
  };

  const getCurrent = (current) => {
    //找到阈值列表中小于current的第一个数字的序号
    let index, number;
    index = state.scaleList.findIndex((value) => value == current);
    if (index == -1) {
      let temp = state.scaleList.filter((value) => value < current);
      index = temp.length - 1;
      //取对应分段的中间值
      number = (index + 1.5) * (300 / (state.scaleList.length + 1)) - 100;
    } else {
      number = (index + 1) * (300 / (state.scaleList.length + 1)) - 100;
    }
    if (number > 142) number = 142;
    if (number < -142) number = -142;
    return number + '%';
  };

  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: '300%',
        left: getLeft(ThresholdValue),
      };
    else if (type == 2 || type == 13)
      // 小于、小于等于
      return {
        width: '300%',
        right: getRight(ThresholdValue),
      };
    else if (type == 3) {
      // 等于
      return { width: '1%', left: getLeft(ThresholdValue) };
    }
    // 区间内
    else {
      let index1 = state.scaleList.findIndex(
        (value) => value == ThresholdValue,
      );
      let index2 = state.scaleList.findIndex(
        (value) => value == ThresholdValue2,
      );
      return {
        // width: ((ThresholdValue2 - ThresholdValue) / state.total) * 100 + '%',
        width: (index2 - index1) * (300 / (state.scaleList.length + 1)) + '%',
        left: getLeft(ThresholdValue),
      };
    }
  };

  const renderBar = (barType, item, index) => {
    const { ThresholdType: type } = item;
    let key = `${barType}-${index}`;
    let className =
      barType == 'exception' ? styles.exception : styles.breakdown;
    // let scaleBlack = (
    //   <>
    //     <div className={styles.scaleBlackLeft}></div>
    //     <div className={styles.scaleBlackRight}></div>
    //   </>
    // );
    if (type == 5 || type == 9 || type == 10 || type == 11) {
      // 区间外
      return (
        <div key={key}>
          <div
            className={className}
            style={{
              width: '300%',
              right: getRight(item.ThresholdValue),
            }}
          >
            {/* {scaleBlack} */}
          </div>
          <div
            className={className}
            style={{
              width: '300%',
              left: getLeft(item.ThresholdValue2),
            }}
          >
            {/* {scaleBlack} */}
          </div>
        </div>
      );
    } else {
      // 其他类型
      return (
        <div key={key} className={className} style={getStyle(item)}>
          {/* {scaleBlack} */}
        </div>
      );
    }
  };

  let padding = scale ? 30 : 0;

  return (
    <div
      className={styles.bar}
      style={{ paddingTop: padding, paddingBottom: padding }}
    >
      <div className={styles.box}>
        <div className={styles.success}></div>
        {exception.map((item, index) => renderBar('exception', item, index))}
        {breakdown.map((item, index) => renderBar('breakdown', item, index))}
        {scale &&
          (state.scaleList || []).map((item) => (
            <div
              key={`scale-${item}`}
              className={styles.scale}
              style={{ left: getLeft(item) }}
            >
              {item}
            </div>
          ))}

        {(current || current === 0) && (
          <>
            <div
              className={`${styles.scale} ${styles.top}`}
              style={{ left: getCurrent(current) }}
            >
              {parseFloat(current).toFixed(2)}
            </div>
            <div
              className={styles.current}
              style={{ left: getCurrent(current) }}
            >
              <div className={styles.currentBar}></div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default NumberBar;
