import industry6_1 from '@/assets/images/industryNew/industry6-1.png';
import industry6_2 from '@/assets/images/industryNew/industry6-2.png';
import industry6_3 from '@/assets/images/industryNew/industry6-3.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { convertUnits, formatNumber } from '@/utils/ui';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import React from 'react';
import styles from './index.less';

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

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

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

  const { data } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-xzcf-xzcfsl',
    }),
  );

  const commonStyle = {
    alignItems: 'center',
  };

  return (
    <div className={styles.container}>
      <Flex gap={20}>
        <div className={styles.dataBox}>
          <img src={industry6_1} alt="" className={styles.bgImage} />
          <DescriptionItem
            // value={data?.data?.data?.records?.[0]?.xzcf ?? 0}
            value={
              convertUnits(Number(data?.data?.data?.records?.[0]?.xzcf))?.num
            }
            name="上月行政处罚"
            unit={
              formatNumber(Number(data?.data?.data?.records?.[0]?.xzcf))?.unit
            }
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={commonStyle}
            decimals={
              formatNumber(Number(data?.data?.data?.records?.[0]?.xzcf))
                ?.unit == '件'
                ? 0
                : 2
            }
            onClick={() => {
              dispatch.push('AdministPunish');
            }}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry6_2} alt="" className={styles.bgImage} />
          <DescriptionItem
        
            value={
              convertUnits(Number(data?.data?.data?.records?.[0]?.sqxt))?.num
            }
            unit={
              formatNumber(Number(data?.data?.data?.records?.[0]?.sqxt))?.unit
            }
            name="上月市区协同"
         
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={commonStyle}
            decimals={
              formatNumber(Number(data?.data?.data?.records?.[0]?.sqxt))
                ?.unit == '件'
                ? 0
                : 2
            }
            onClick={() => {
              dispatch.push('AreaSynergy');
            }}
          />
        </div>
        <div className={styles.dataBox}>
          <img src={industry6_3} alt="" className={styles.bgImage} />
          <DescriptionItem
           value={
            convertUnits(Number(data?.data?.data?.records?.[0]?.rcxc))?.num
          }
          unit={
            formatNumber(Number(data?.data?.data?.records?.[0]?.rcxc))?.unit
          }
        
            name="昨日日常巡查"
            decimals={
              formatNumber(Number(data?.data?.data?.records?.[0]?.rcxc))
                ?.unit == '件'
                ? 0
                : 2
            }
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
            style={commonStyle}
            onClick={() => {
              dispatch.push('DyaPatrol');
            }}
          />
        </div>
      </Flex>
    </div>
  );
};

export default LawEnforcement;
