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 QualityModal from '@/pages/Common/Quality/Modal';

import services from '@/services';
import { useModel, useRequest } from '@umijs/max';
import dayjs from 'dayjs';
import LineCharts from '../LineCharts';
import styles from './index.less';
import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';

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 { setModalOpen, setModalOpt, setCurrentCqiData } = useModel(
    'qualityModal',
    (model) => ({
      setModalOpen: model.setModalOpen,
      setModalOpt: model.setModalOpt,
      setCurrentCqiData: model.setCurrentCqiData,
    }),
  );

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

  const cards = useMemo(() => {
    return [
      {
        name: '安全',
        value:
          indexs?.indexs?.find((item: any) => item.name === '安全')?.value ?? 0,
          ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '安全')?.value)
      },
      {
        name: '整洁',
        value:
          indexs?.indexs?.find((item: any) => item.name === '整洁')?.value ?? 0,
          ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '整洁')?.value)
      },
      {
        name: '有序',
        value:
          indexs?.indexs?.find((item: any) => item.name === '有序')?.value ?? 0,
          ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '有序')?.value)
      },
      {
        name: '便民',
        value:
          indexs?.indexs?.find((item: any) => item.name === '便民')?.value ?? 0,
          ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '便民')?.value)
      },
      {
        name: '美观',
        value:
          indexs?.indexs?.find((item: any) => item.name === '美观')?.value ?? 0,
          ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '美观')?.value)
      },
    ];
  }, [indexs]);

  console.log('selectDistrict ===', selectDistrict)
  console.log('index ===', 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:any) => ({
              value: item?.qualitySign,
              name: item?.objectName,
            }))}
          ></LineCharts>
          <Space size={10} align="center">
            <span className={styles.tips}>
              {selectDistrict?.desc}
            </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)',
                  }}
                >
                  {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: getCqiStatusStyle(selectDistrict.qualitySign)?.color }}
            >
              {selectDistrict.qualitySign}
            </div>
            <div className={styles.desc}>
              {getCqiStatusTexts(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 }}
              onClick={() => {
                setModalOpen(true);
                setModalOpt([{ title: item.name, type: 'category' }]);
                setCurrentCqiData({...item, objectId: selectDistrict?.objectId});
              }}
            >
              <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: getCqiStatusStyle(data?.lastMonthMinimumIndex?.cqi)?.color }}
            >

              {data?.lastMonthMinimumIndex?.cqi}
            </div>
            <Space size={5} className={styles.labelStyle}>
              <span>{dayjs(data?.lastMonthMinimumIndex?.time).format('YYYY-MM-DD HH:mm')}</span>
              <span>{data?.lastMonthMinimumIndex?.week}</span>
            </Space>
          </Col>
          <Col span={8}>
            <div className={styles.rightTitle}>城市问题</div>
            <DescriptionItem
              value={selectDistrict?.eventCount}
              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>

      <QualityModal />
    </div>
  );
};

export default DistrictDetailBar;
