import DescriptionItem from '@/components/DescriptionItem';

import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import {
  CaretDownOutlined,
  CaretUpOutlined,
  DoubleRightOutlined,
} from '@ant-design/icons';
import { Col, Flex, Row, Space } from 'antd';
import React, { useEffect, useMemo } from 'react';

import services from '@/services';
import { useModel, useRequest } from '@umijs/max';
import dayjs from 'dayjs';
import LineCharts from '../LineCharts';
import styles from './index.less';
export const getStatus = (val: number) => {
  if (val > 95) {
    return {
      bg: 'rgb(87, 239, 88)',
      desc: '城市运行良好',
      tag: '理想型',
    };
  }
  if (val < 95 && val > 85) {
    return {
      bg: '#0680f4',
      desc: '城市运行基本正常',
      tag: '标准型',
    };
  }
  if (val < 85 && val > 60) {
    return {
      bg: '#ffa250',
      desc: '城市运行随时会出现问题',
      tag: '预警型',
    };
  }

  return {
    bg: '#ff372f',
    desc: '城市运行出现问题',
    tag: '应急型',
  };
};
const DistrictDetailBar: React.FC = () => {
  /** @description store */
  const { selectDistrict, areaListDto, getIndexs, indexs } = useModel(
    'regionalIndex',
    (store) => ({
      areaListDto: store.areaListDto,
      selectDistrict: store.selectDistrict!,
      getIndexs: store.getIndexs,
      indexs: store.indexs,
    }),
  );

  const { dispatch } = useGlobalModalServices();
  const { data, run: getIndexDetailEvent } = useRequest(
    services.Physicalsign.getIndexDetailEventStatic,
  );
  useEffect(() => {
    if (!selectDistrict.objectId) return;
    getIndexs({
      physicalSignType: 1,
      indexType: 1,
      indexHierarchy: '1,2',
      objectId: selectDistrict.objectId,
    });
    getIndexDetailEvent({
      physicalSignType: 2,
      indexType: 1,
      indexId: 1,
      objectId: selectDistrict.objectId,
    });
  }, [selectDistrict]);
  console.log(data);

  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]);

  return (
    <div className={styles.container}>
      <div className={styles.leftWrap}>
        <Flex gap={20} align="center">
          <div className={styles.title}> 实时CQI</div>
          <LineCharts
            data={indexs?.indexDataList?.map((item) => ({
              value: item?.qualitySign,
              name: item?.objectName,
            }))}
          ></LineCharts>
          <Space size={10} align="center">
            <span className={styles.tips}>
              较{dayjs().diff(selectDistrict?.indexTime, 'h')}小时前
            </span>
            <div>
              <Space>
                {selectDistrict?.status === 'up' ? (
                  <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
                ) : (
                  <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
                )}
                <div
                  className={styles.rightValue}
                  style={{
                    color:
                      selectDistrict.status === 'up'
                        ? 'rgb(9, 195, 92)'
                        : 'rgb(255, 71, 71)',
                  }}
                >
                  {Math.abs(selectDistrict.diffValue)}%
                </div>
              </Space>
            </div>
          </Space>
          <div className={styles.tips}>
            实时排名
            <span>
              {areaListDto?.findIndex(
                (item) => item?.objectName === selectDistrict?.objectName,
              ) + 1}
            </span>
          </div>
        </Flex>
        <Flex gap={10}>
          <div>
            <div
              className={styles.value}
              style={{ color: getStatus(selectDistrict.qualitySign)?.bg }}
            >
              {selectDistrict.qualitySign}
            </div>
            <div className={styles.desc}>
              {getStatus(selectDistrict.qualitySign)?.desc}
            </div>
          </div>
          {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.rightWrap}>
        <Row>
          <Col span={8}>
            <div className={styles.rightTitle}>近30日最低CQI</div>
            <div
              className={styles.lowIndex}
              style={{ color: getStatus(62.2)?.bg }}
            >
              {data?.lastMonthMinimumIndex?.cqi}
            </div>
            <div className={styles.labelStyle}>2024-10-02 周一</div>
          </Col>
          <Col span={8}>
            <div className={styles.rightTitle}>城市问题</div>
            <DescriptionItem
              value={data?.noHandleEventCount}
              name={'当前还未处置完结的案件'}
              unit={'万件'}
              labelStyle={{
                color: '#83ABC3',
                fontSize: 16,
              }}
            ></DescriptionItem>
          </Col>
          <Col span={8}>
            <div className={styles.rightTitle}>城市安全</div>
            <DescriptionItem
              value={data?.safetyWarningEventCount}
              name={'城市安全风险预警'}
              unit={'个'}
              labelStyle={{
                color: '#83ABC3',
                fontSize: 16,
              }}
            ></DescriptionItem>
          </Col>
        </Row>
      </div>

      <div
        className={styles.moreBtn}
        onClick={() => {
          console.log(selectDistrict);
          dispatch.push('districtIndex', {
            title: selectDistrict.objectName + '运行情况',
            props: {
              data: selectDistrict,
              indexs: indexs,
            },
          });
        }}
      >
        查看更多
        <DoubleRightOutlined></DoubleRightOutlined>
      </div>
    </div>
  );
};

export default DistrictDetailBar;
