import React, { useMemo, useState } from 'react';
import Styles from './index.less';

export const ChartBoxTitle1 = (props:DataMeter.ITitleProps) => {
  const { title, showTabs, setShowTabs, width = 0 } = props;
  const [rotate, setRotate] = useState('');
  const isMini = useMemo(() => {
    return width < 10;
  }, [width]);
  return (
    <div className={Styles.main}>
      <div className={`${Styles.titleBg} ${isMini ? Styles.titleBgMini : ''}`}>
        {/* <img className={Styles.titleImg} src={require('@/Project/assets/chartBox/titleBar01.png')}/>
        <div className={Styles.titleBar02}/>
        <img className={Styles.titleImg} src={require('@/Project/assets/chartBox/titleBar03.png')}/>
        <div className={Styles.titleBar04}/>
        <img className={Styles.titleImg} src={require('@/Project/assets/chartBox/titleBar05.png')}/>
        <div className={Styles.titleBar06}/>
        <img className={Styles.titleImg} src={require('@/Project/assets/chartBox/titleBar07.png')}/> */}
      </div>
      <img className={Styles.jiao1} src={require('@/Project/assets/chartBox/jiao1.png')} />
      <img className={Styles.jiao2} src={require('@/Project/assets/chartBox/jiao2.png')} />
      {/* <img className={Styles.jiao3} src={require('@/Project/assets/chartBox/jiao4.png')}/>
      <img className={Styles.jiao4} src={require('@/Project/assets/chartBox/jiao3.png')}/> */}
      <div className={Styles.title} style={{ top: isMini ? '7px' : '' }}>
        {title}
      </div>
      {setShowTabs && (
        <img
          style={{ transform: rotate }}
          className={Styles.arrow}
          src={require('@/Project/assets/chartBox/arrow.png')}
          onClick={() => {
            setRotate(showTabs ? '' : 'rotate(180deg)');
            setShowTabs(!showTabs);
          }}
        />
      )}
    </div>
  );
};

export const ChartBoxBottom = () => {
  return (
    <>
      <img className={Styles.jiao3} src={require('@/Project/assets/chartBox/jiao4.png')} />
      <img className={Styles.jiao4} src={require('@/Project/assets/chartBox/jiao3.png')} />
    </>
  );
};

export const ChartBoxThreeAngle = () => {
  return (
    <div className={Styles.main}>
      <img className={Styles.jiao1} src={require('@/Project/assets/chartBox/jiao1.png')} />
      <img className={Styles.jiao2} src={require('@/Project/assets/chartBox/jiao2.png')} />
    </div>
  );
};

export const ChartBoxTitle = (props:DataMeter.ITitleProps) => {
  const { title, showTabs, setShowTabs, width = 0 } = props;
  const [rotate, setRotate] = useState('');
  // const isMini = useMemo(() => {
  //   return width < 10;
  // }, [width]);
  return (
    <div className={Styles.main}>
      <div className={Styles.titleLeft}>
        <img className={Styles.titleImg} src={require('@/Project/assets/chartBox/titleBefor.png')} />
        <span className={Styles.title}>{title}</span>
      </div>
      {setShowTabs && (
        <img
          // style={{ transform: rotate }}
          className={Styles.icon}
          src={require('@/Project/assets/chartBox/titleIcon.png')}
          onClick={() => {
            // setRotate(showTabs ? '' : 'rotate(180deg)');
            setShowTabs(!showTabs);
          }}
        />
      )}
      <img className={Styles.titleBorder} src={require('@/Project/assets/chartBox/titleBorder.png')} />
    </div>
  );
};
