import { Flex } from 'antd'

import TopSearch from './TopSearch'

import styles from './index.less'


const tagColors = ['#FCB129', '#588CF4', '#4BCF81', '#8D9EB6']

export default () => {


  const list = [
    {
      title: '这里是问题的标题这里是问题的标题',
      desc: '发现了问题',
      pic: 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg',
      time: "2024.08.30日 10:00:00发现",
      loc: "成都市锦华路二段123号",
      tag: 'TOP1',
      compAdr: '锦江区',
      compName: '成都移动'
    },
    {
      title: '这里是问题的标题这里是问题的标题',
      desc: '发现了问题',
      pic: 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg',
      time: "2024.08.30日 10:00:00发现",
      loc: "成都市锦华路二段123号",
      tag: 'TOP2',
      compAdr: '锦江区',
      compName: '成都移动'
    },
    {
      title: '这里是问题的标题这里是问题的标题',
      desc: '发现了问题',
      pic: 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg',
      time: "2024.08.30日 10:00:00发现",
      loc: "成都市锦华路二段123号",
      tag: 'TOP3',
      compAdr: '锦江区',
      compName: '成都移动'
    },
    {
      title: '这里是问题的标题这里是问题的标题',
      desc: '发现了问题',
      pic: 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg',
      time: "2024.08.30日 10:00:00发现",
      loc: "成都市锦华路二段123号",
      tag: 'TOP4',
      compAdr: '锦江区',
      compName: '成都移动'
    }
  ]



  return <div className={styles.container}>
    <TopSearch />
    <div className={styles.listWrap}>
      {
        list.map((item: any, index: number) => {
          return (
            <Flex justify='space-between' align='center' className={styles.card} key={item.title}>
              <Flex gap={20}>
                <div className={styles.imgBox}>
                  <img className={styles.pic} src={item.pic} alt="" />
                  <div className={styles.tag} style={{ background: tagColors[index]}}>{item.tag}</div>
                </div>
                <div>
                  <div className={styles.title}>{item.title}</div>
                  <div className={styles.desc}>
                    {item.time}
                  </div>
                  <div className={styles.loc}>
                    {item.loc}
                  </div>
                </div>
              </Flex>
              <Flex align='center' className={styles.comp}>
                <div className={styles.compAdr}>
                  <span className={styles.dot}></span>
                  {item.compAdr}
                </div>
                <div className={styles.name}>责任单位：{item.compName}</div>
              </Flex>
            </Flex>
          )
        })
      }

    </div>
  </div>
}