import Modal from '@/components/HncyModal';
import BaseCard from '@/pages/Common/components/BaseCard';
import LineCharts from '@/pages/SecurityServiceOverview/SecurityState/SecurityCqi/LineCharts';
import services from '@/services';
import { getCqiStatusStyle } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import { useState } from 'react';
import { colorConfig } from '../../SecurityState/RightLayout/RiskNotice';
import BaseInfo from '../BaseInfo';
import EventPicList from '../EventPicList';
import styles from './index.less';

/**
 *
 * @description 行业体征部分
 */

const IndustrySign = ({ param }: { param: any }) => {
  const { areaId } = useModel('areaGrid');
  const indexIdMap: Record<string, string> = {
    dlql: '202', //道桥
    gf: '209', //固废
    ggzp: '205', //广告牌
    gl: '208', //管廊
    hw: '204', //环卫
    yyrq: '208', //油烟
    zm: '203', //照明
  };
  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });
  const [fetchParams, setFetchParams] = useState<any>({
    page: 1,
    count: 10,
    parentTypeCode: param?.typeCode,
  });
  const { data: signData } = useRequest(() => {
    return services.Physicalsign.getComparisonIndexInstance({
      indexId: indexIdMap[param?.typeCode],
      physicalSignType: 1,
      indexType: 1,
      objectId: areaId,
    });
  });
  const { data: eventData } = useRequest(
    () => services.CityRiskApi.getEventPage(fetchParams),
    {
      refreshDeps: [fetchParams],
      onSuccess: (res) => {
        console.log(res);

        setListData({
          ...res?.data,
          items: [
            ...listData.items,
            ...res?.data?.items?.map((item: any) => ({
              ...item,
              standardEventTitle: item?.eventType,
              caseStatusText: item?.currentStatus,
              reportTime: item?.warningTime,
              collectionModeName: item?.sourceType,
            })),
          ],
        });
      },
    },
  );
  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <div className={styles.title}>{detailModalOpt?.eventType}</div>
        <span
          className={styles.tag}
          style={{
            backgroundImage: `url(${
              colorConfig[detailModalOpt?.riskLevelName]?.bg
            })`,
            color: colorConfig[detailModalOpt?.riskLevelName]?.color,
          }}
        >
          {detailModalOpt?.riskLevelName}
        </span>
        <span className={styles.type}>{detailModalOpt?.position}</span>
      </Flex>
    );
  };
  return (
    <Flex gap={28} className={styles.wrap}>
      <Flex vertical gap={15} className={styles.left}>
        <BaseCard
          
          title={param?.title+"指数"}
          height={304}
          extra={
            <span
              className={styles.signNum}
              style={{
                color: getCqiStatusStyle(
                  Number(signData?.data?.currentIndex?.cqi),
                )?.color,
              }}
            >
              {signData?.data?.currentIndex?.cqi}
            </span>
          }
          style={{
            paddingTop: 20,
          }}
        >
          <div style={{ marginTop: 20, padding: '0 20px' }}>
            <LineCharts
              lineColor={
                getCqiStatusStyle(Number(signData?.data?.currentIndex?.cqi))
                  ?.color
              }
              colorStops={[
                {
                  offset: 0,
                  color: 'rgba(240, 248, 255, 0.064)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: getCqiStatusStyle(
                    Number(signData?.data?.currentIndex?.cqi),
                  )?.background, // 100% 处的颜色
                },
              ]}
              data={
                signData?.data?.currentIndex?.indexDataList?.map(
                  (item: any) => ({
                    name: item.time,
                    value: item.qualitySign,
                  }),
                ) || []
              }
              style={{
                width: 410,
                height: 160,
              }}
            />
          </div>
        </BaseCard>
        <BaseCard
          title={param?.title+"风险源"}
          height={394}
          style={{
            paddingTop: 20,
          }}
        >
          <div className={styles.list}>
            {param?.parentData?.children?.map((item, index) => (
              <Flex
                className={styles.listItem}
                justify="space-between"
                align="center"
                key={index}
              >
                <span className={styles.name}>{item?.typeName}</span>
                <span>
                  <span className={styles.num}>{item.total}</span>
                  <span>个</span>
                </span>
              </Flex>
            ))}
          </div>
        </BaseCard>
      </Flex>
      <div className={styles.right}>
        {/* <Flex className={styles.top} justify='space-between'>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(39, 211, 134, 0.2)' }}
          >
            <span>
              <img src={a3} alt="" />
              <span className={styles.name}>桥梁管理指数</span>
            </span>
            <span className={styles.num} style={{ color: '#57EF58' }}>99.5</span>
          </Flex>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(255, 188, 130, 0.2)' }}
          >
            <span>
              <img src={a2} alt="" />
              <span className={styles.name}>道路管理指数</span>
            </span>
            <span className={styles.num} style={{ color: '#FFA250' }}>99.5</span>
          </Flex>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(130, 173, 255, 0.2)' }}
          >
            <span>
              <img src={a1} alt="" />
              <span className={styles.name}>占道挖掘指数</span>
            </span>
            <span className={styles.num} style={{ color: '#447FF0' }}>99.5</span>
          </Flex>
        </Flex> */}
        {/* <Tabs size="large" defaultActiveKey="1" centered items={tabItems} /> */}
        <EventPicList
          listData={listData}
          listHeight={700}
          setParams={(data) => {
            setFetchParams({ ...fetchParams, page: data.current.page });
          }}
          handleDetail={(details) => {
            setDetailModalOpt({
              open: true,
              eventId: details?.asriskId,
              ...details,
            });
          }}
        />
      </div>
      {/* 事件详情 */}
      <Modal
        open={detailModalOpt?.open}
        titleRender={titleRender}
        onCancel={() => {
          setDetailModalOpt({
            open: false,
            title: '事件详情',
            eventId: '',
          });
        }}
        width={1144}
        height={740}
      >
        {detailModalOpt?.open && (
          <BaseInfo
            eventId={detailModalOpt?.eventId}
            detail={detailModalOpt}
            onChangeOpt={(val) => {
              console.log(val);

              setDetailModalOpt({
                ...detailModalOpt,
                position: val?.position,
                eventType: val?.event_type,
                riskLevelName: val?.risklevel,
              });
            }}
          />
        )}
      </Modal>
    </Flex>
  );
};

export default IndustrySign;
