
import { useState, useEffect } from 'react'
import { Flex, Space } from 'antd'
import styles from './index.less'
import Modal from '@/components/HncyModal'
import IndustrySign from '@/pages/Common/Sign/IndustrySign'
import services from '@/services';
import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui'

const SignCard = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '',
  })

  const [list, setList] = useState<any>([])


  const getDepartIndustryPhysicalSignIndexData = () => {
    const params = {
      physicalSignType: 1
    }
    services.Physicalsign.getDepartIndustryPhysicalSignIndex(params).then((res) => {
      console.log(res)
      if(res.code === 200) {
        setList(res.data)
      }
    })
  }

  useEffect(() => {
    getDepartIndustryPhysicalSignIndexData()
  }, [])

  return (
    <div className={styles.wrap}>
      <Flex justify='space-between' align='center'>
        {
          list.map((item: any) => (
            <div key={item.objectId} className={styles.card} onClick={() => setModalOpt({ open: true, title: item.objectName })}>
              <div className={styles.name}>{item?.objectName}</div>
              <Space style={{ cursor: 'pointer'}}>
                <span className={styles.num} style={{ color: getCqiStatusStyle(item?.cqi)?.color }}>{item?.cqi}</span>
                <div className={styles.tag} style={{ ...getCqiStatusStyle(item?.cqi) }}>{item?.status || getCqiStatusTexts(item?.cqi)?.text}</div>
              </Space>
              <Space>
                <span className={styles.riskName}>{item.riskName}</span>
                {
                  item.riskNum && <div className={styles.riskNum}>{item.riskNum}</div>
                }
              </Space>
            </div>
          ))
        }
      </Flex>
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: ''})}
        width={1772}
        height={846}
      >
        <IndustrySign />
      </Modal>
    </div>
  )
}

export default SignCard;