/** @format */

import '../../../baseComponents/Modal/style/iconfont.css';
import '../../../assets/rank.svg';

import _ from 'lodash';
import React from 'react';

interface BusinessIndexProps {
  titleStyle?: Record<string, any>;
  [key: string]: any;
}

const BusinessIndex = (props: BusinessIndexProps) => {
  const {
    size = { height: 200, width: 300 },
    data = {
      dataValue: 50,
      base: 10,
    },
    rowStyle = {
      justifyContent: 'flex-start',
      alignItems: 'flex-start',
      letterSpacin: 0,
      lineHeight: 0,
    },
    titleStyle = {
      content: '标题',
      textStyle: {
        fontSize: 20,
        fontFamily: '微软雅黑',
        fontWeight: 'normal',
        color: '',
        titleLineFeed: false,
      },
    },
    // [xiaosanjiao, xiangshangjiantou, qushi, shuangjiantou, paihang]
    iconStyle = {
      iconfont: {
        value: 'xiaosanjiao',
      },
      fontSize: 20,
      iconColorUp: '#db422a', // 区分趋势显示颜色 上升
      iconColorLevel: 'orange', // 区分趋势显示颜色 持平
      iconColorDown: 'green', // 区分趋势显示颜色  下降
      isSync: true, // 同步数据字体颜色
    },
    numberSet = {
      textStyle: {
        fontSize: 20,
        fontFamily: '微软雅黑',
        fontWeight: 'normal',
        color: '',
      },
      baseValue: 10,
      delimiter: ',', // 分割符号
      isShowThousands: true, // 千分位展示
      suffix: '%',
      isShow: true, // 不合法数据展示
    },
  } = props;

  const sourceValue = _.toNumber(data.dataValue);
  const baseValue = _.toNumber(data.base || numberSet.baseValue) || 0;

  const titleStyleSpec = {
    whiteSpace: titleStyle.titleLineFeed ? 'normal' : 'nowrap',
  };

  const titleSt = _.merge(titleStyleSpec, titleStyle.textStyle);

  const setIconfontStyle = () => {
    let showcolor = 'iconColorUp';
    let idRotate = false;

    if (sourceValue > baseValue) {
      showcolor = 'iconColorUp';
    }
    if (sourceValue == baseValue) {
      showcolor = 'iconColorLevel';
    }
    if (sourceValue < baseValue) {
      showcolor = 'iconColorDown';
      idRotate = true;
    }

    return {
      color: iconStyle[showcolor],
      rotate: idRotate && 'rotate(180deg)',
    };
  };

  const iconSt = _.merge(iconStyle, {
    display: 'inline-block',
    color: _.get(setIconfontStyle(), 'color'),
    transform: _.get(setIconfontStyle(), 'rotate'),
  });

  const showNum = () => {
    let num = data.dataValue;

    if (_.isNumber(num)) {
      const reg = new RegExp(',', 'g');
      num = numberSet.isShowThousands
        ? num.toLocaleString().replace(reg, numberSet.delimiter)
        : num;
    } else {
      num = numberSet.isShow ? num : 0;
    }
    return num;
  };

  const showFlatsymbol = sourceValue == baseValue;

  const showSyncColor = () => {
    let showColor = '';
    if (iconStyle.isSync) {
      showColor = _.get(setIconfontStyle(), 'color', '');
    } else {
      showColor = numberSet.color;
    }

    return _.merge(numberSet.textStyle, { color: showColor });
  };

  return (
    <div style={_.merge(rowStyle, size, { display: 'flex' })}>
      <span style={titleSt}>{titleStyle.content}</span>
      <div style={iconSt}>
        {showFlatsymbol ? (
          '='
        ) : (
          <span
            className={`iconfont icon-${iconStyle.iconfont.value}`}
            style={{ fontSize: iconStyle.fontSize }}
          ></span>
        )}
      </div>
      <span style={showSyncColor()}>
        {showNum()}
        {numberSet.suffix}
      </span>
    </div>
  );
};

export default BusinessIndex;