import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React, { useMemo } from 'react';

import { getStatus } from '@/pages/TheOperationOfTheDistrictCityAndCounty/components/DIstrictDetailBar';
import dayjs from 'dayjs';
import LineCharts from '../LineCharts';
import styles from './index.less';

const RealtimeCQI: React.FC<{ data: any; indexs: any }> = ({
  data,
  indexs,
}) => {
  const cards = useMemo(() => {
    return [
      {
        name: '安全',
        value:
          indexs?.indexs?.find((item: any) => item.name === '安全')?.value ?? 0,
        color: '#57EF58',
        background: 'rgba(39, 211, 134, 0.2)',
      },
      {
        name: '整洁',
        value:
          indexs?.indexs?.find((item: any) => item.name === '整洁')?.value ?? 0,
        color: '#FFA250',
        background: 'rgba(255, 188, 130, 0.2)',
      },
      {
        name: '有序',
        value:
          indexs?.indexs?.find((item: any) => item.name === '有序')?.value ?? 0,
        color: '#447FF0',
        background: 'rgba(130, 173, 255, 0.2)',
      },
      {
        name: '便民',
        value:
          indexs?.indexs?.find((item: any) => item.name === '便民')?.value ?? 0,
        color: '#57EF58',
        background: 'rgba(39, 211, 134, 0.2)',
      },
      {
        name: '美观',
        value:
          indexs?.indexs?.find((item: any) => item.name === '美观')?.value ?? 0,
        color: '#57EF58',
        background: 'rgba(39, 211, 134, 0.2)',
      },
    ];
  }, [indexs]);
  const ranks = [
    {
      title: '公共广场私搭乱建',
      categroy: '安全',
    },
    {
      title: '建筑物外立面不洁',
      categroy: '安全',
    },
    {
      title: '人行道（含盲道）破损',
      categroy: '安全',
    },
  ];
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <Space className={styles.title}>
          实时CQI
          <span className={styles.title_time}>{data?.indexTime}</span>
        </Space>
        <Flex justify="flex-end" className={styles.compare}>
          <Space size={10}>
            <span className={styles.tips}>
              较{dayjs().diff(data?.indexTime, 'h')}小时前
            </span>
            <div>
              <Space>
                {data?.status === 'up' ? (
                  <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
                ) : (
                  <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
                )}
                <div
                  className={styles.rightValue}
                  style={{
                    color:
                      data.status === 'up'
                        ? 'rgb(9, 195, 92)'
                        : 'rgb(255, 71, 71)',
                  }}
                >
                  {Math.abs(data.diffValue)}%
                </div>
              </Space>
            </div>
          </Space>
        </Flex>
      </Flex>

      <Flex
        justify="space-between"
        align="center"
        className={styles.chartSection}
      >
        <div>
          <Flex align="center" gap={13}>
            <span
              className={styles.num}
              style={{
                color: getStatus(data?.qualitySign)?.bg,
              }}
            >
              {data?.qualitySign}
            </span>
            <span
              className={styles.tag}
              style={{ color: getStatus(data?.qualitySign)?.bg }}
            >
              {getStatus(data.qualitySign)?.tag}
            </span>
          </Flex>
          <span className={styles.title}>
            {getStatus(data.qualitySign)?.desc}
          </span>
        </div>
        <LineCharts
          style={{
            width: 336,
            height: 85,
          }}
          data={indexs?.indexDataList?.map((item) => ({
            value: item?.qualitySign,
            name: item?.objectName,
          }))}
        />
      </Flex>

      <div className={styles.cardSection}>
        <Flex justify="space-between">
          {cards.map((item, index) => (
            <Flex
              vertical
              justify="center"
              align="center"
              gap={10}
              key={index}
              className={styles.card}
              style={{ background: item.background }}
            >
              <div className={styles.name}>{item.name}</div>
              <div className={styles.value} style={{ color: item.color }}>
                {item.value}
              </div>
            </Flex>
          ))}
        </Flex>
      </div>
      <div className={styles.subTitle}>影响指标TOP3</div>
      <div>
        {ranks.map((item, index) => (
          <Flex
            className={styles.listCard}
            justify="space-between"
            align="center"
            key={item.title}
          >
            <Flex gap={25} align="center">
              <div className={styles.rankTag}>TOP{index + 1}</div>
              <div className={styles.desc}>
                <p>{item.title}</p>
                <span>{item.categroy}</span>
              </div>
            </Flex>
            <div className={styles.infRate}>
              <span>影响占比</span>
              <span>41</span>
              <span>%</span>
            </div>
          </Flex>
        ))}
      </div>
    </div>
  );
};

export default RealtimeCQI;
