import DescriptionItem from '@/components/DescriptionItem';
import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Flex } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

const DataElement: React.FC = () => {
  const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false);
  const { dispatch } = useGlobalModalServices();

  return (
    <div className={styles.container}>
      <Flex gap={20} align="center">
        <DescriptionItem
          onClick={() => setIsGovernanceModalOpen(true)}
          value={12.06}
          decimals={2}
          name="已汇聚数据"
          unit="亿条"
          valueStyle={{
            background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            fontFamily: 'D-DIN',
            fontSize: '36px',
            fontWeight: 700,
          }}
          labelStyle={{
            color: '#BCCEE9',
            // fontFamily: 'DingTalk JinBuTi',
            fontSize: '20px',
            fontWeight: 400,
            lineHeight: '26px',
          }}
          unitStyle={{
            color: '#BCCEE9',
            // fontFamily: '微软雅黑',
            fontSize: '20px',
            fontWeight: 400,
            lineHeight: '26px',
          }}
        />
        <div
          className={styles.box}
          onClick={() => dispatch.push('DataActivity')}
        >
          <span className={styles.name}>三级标签体系</span>
        </div>
      </Flex>
      <DataGovernance
        open={isGovernanceModalOpen}
        onCancel={() => setIsGovernanceModalOpen(false)}
      />
    </div>
  );
};

export default DataElement;
