
import ModuleTitle from '@/pages/Home_v_2504/components/common/ModuleTitle'
import styles from './index.less'
import { Flex, Space } from 'antd'
import { useMemo, useState } from 'react';
import DateSelector from '@/components/V2504/DateSelector';
import SmoothLineChart from '@/components/V2504/SmoothLineChart';
import DescriptionItem from '@/components/DescriptionItem';
import classNames from 'classnames';

type DateType = 'day' | 'month' | 'year' | 'range' | 'yesterday' | 'lastMonth';

const RubbishFacilitiesDetails = () => {

  const commonValueStyle = {
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: '28px',
    fontWeight: 700,
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    marginRight: '8px',
    fontSize: '14px',
    fontWeight: 400,
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '14px',
  };

  const timeOptions: DateType[] = ['month', 'year']

  const [activeType, setActiveType] = useState<DateType>('month');

  // 企业详情数据
  const [enterpriseInfo] = useState({
    enterpriseName: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    type: '环保发电厂',
    unit: '锦江区牛市口街道办事...',
    buildTime: '2024-05-28 10:20:20',
    address: 'XXXXXXXXXXXXXXXXXXXXXXXX',
  });

  // 处理日期变化
  const handleDateTypeChange = (type: DateType) => {
    console.log('Date changed: RightContent!!', type);
    setActiveType(type)
  }

  const chartStyle = useMemo(() => ({
    height: '178px',
    width: '100%'
  }), []);

  const getButtonLabel = (type: DateType) => {
    switch (type) {
      case 'day': return '日';
      case 'month': return '月';
      case 'year': return '年';
      case 'yesterday': return '昨日';
      case 'lastMonth': return '上月';
      case 'range': return null; // 日期范围不需要按钮
      default: return '';
    }
  };

  const mockData: any[] = [
    { time: '1月1日', value: 145 },
    { time: '1月2日', value: 160 },
    { time: '1月3日', value: 155 },
    { time: '1月4日', value: 165 },
    { time: '1月5日', value: 175 },
    { time: '1月6日', value: 185 },
    { time: '1月7日', value: 180 },
    { time: '1月8日', value: 190 },
    { time: '1月9日', value: 195 },
    { time: '1月10日', value: 205 },
    { time: '1月11日', value: 210 },
    { time: '1月12日', value: 215 },
    { time: '1月13日', value: 220 },
    { time: '1月14日', value: 210 },
    { time: '1月15日', value: 205 },
    { time: '1月16日', value: 195 },
    { time: '1月17日', value: 200 },
    { time: '1月18日', value: 205 },
    { time: '1月19日', value: 210 },
    { time: '1月20日', value: 215 },
    { time: '1月21日', value: 225 },
    { time: '1月22日', value: 230 },
    { time: '1月23日', value: 235 },
    { time: '1月24日', value: 240 },
    { time: '1月25日', value: 245 },
    { time: '1月26日', value: 250 },
    { time: '1月27日', value: 255 },
    { time: '1月28日', value: 250 },
    { time: '1月29日', value: 245 },
    { time: '1月30日', value: 240 },
    { time: '1月31日', value: 235 },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.enterpriseInfo}>
        <ModuleTitle title="企业详情" />
        <div className={styles.infoContent}>
          <Space direction="vertical" size={9} className={styles.scrollArea}>
            <div className={styles.infoItem}>
              <span className={styles.label}>企业名称：</span>
              <span className={styles.value}>{enterpriseInfo.enterpriseName}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.label}>类型：</span>
              <span className={styles.value}>{enterpriseInfo.type}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.label}>管理单位：</span>
              <span className={styles.value}>{enterpriseInfo.unit}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.label}>建设时间：</span>
              <span className={styles.value}>{enterpriseInfo.buildTime}</span>
            </div>
            <div className={styles.infoItem}>
              <span className={styles.label}>企业地址：</span>
              <span className={styles.value}>{enterpriseInfo.address}</span>
            </div>
          </Space>
        </div>
      </div>
      <div className={styles.trendInfo}>
        <Flex justify='space-between' align='center'>
          <Flex align='center' gap={20}>
            <ModuleTitle title="处置趋势" />
            {timeOptions.map(type => {
              const label = getButtonLabel(type);
              if (!label) return null;

              return (
                <div
                  key={type}
                  className={classNames(styles.button, { [styles.active]: activeType === type })}
                  onClick={() => handleDateTypeChange(type)}
                >
                  {label}
                </div>
              );
            })}
          </Flex>
          <div style={{ paddingRight: 28 }}>
            <DescriptionItem
              direction="horizontal"
              name={'处置量'}
              unit={'万吨'}
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              style={{ justifyContent: 'start' }}
              decimals={2}
              value={990.05}
            />
          </div>
        </Flex>
        <div style={{ width: '100%', padding: '0 28px'}}>
          <SmoothLineChart
            data={mockData}
            unitText=""
            lineColor="rgb(136, 238, 248)"
            lineColorStop1="rgba(136, 238, 248, 0.36)"
            lineColorStop2="rgba(136, 238, 248, 0)"
            style={chartStyle}
          />
        </div>
      </div>
    </div>
  )
}

export default RubbishFacilitiesDetails