import { Flex, Space, Progress } from 'antd'
import styles from './index.less'
import PieCharts from '@/components/PieCharts'
import CategoryItem from './CategoryItem'
import ListTabs from '@/pages/Common/components/ListTabs'
import IssueDescription from '@/pages/Common/components/IssueDescription' 

const ImportantEvents = () => {

  const changeListTab = () => {

  }

  const areas = [
    {
      name: '高新区',
      progress: 50,
      value: 300,
      rate: 30.6
    },
    {
      name: '新都区',
      progress: 50,
      value: 300,
      rate: 30.6
    },
    {
      name: '龙泉驿区',
      progress: 50,
      value: 300,
      rate: 30.6
    }
  ]

  return (
    <Flex gap={30} className={styles.wrap}>
      <Space direction='vertical' size={15} className={styles.left}>
        <div className={styles.top}>
          <Flex justify='space-between' className={styles.status}>
            <Space>
              <span>待办理</span>
              <span className={styles.num}>68</span>
              <span>件</span>
            </Space>
            <Space>
              <span>处置中</span>
              <span className={styles.num}>68</span>
              <span>件</span>
            </Space>
            <Space>
              <span>已结案</span>
              <span className={styles.num}>68</span>
              <span>件</span>
            </Space>
          </Flex>
          <div className={styles.rate}>
            <span>较传统通道处置时效提升</span>
            <span>150%</span>
          </div>
        </div>
        <div className={styles.middle}>
          <div className={styles.title}>主要处理类型（近30天）</div>
          <Flex className={styles.content}>
            <div>
              <PieCharts style={{ width: 120, height: 150 }} />
            </div>
            <div>
              <CategoryItem />
              <CategoryItem />
              <CategoryItem />
            </div>
          </Flex>
        </div>
        <div className={styles.bottom}>
          <div className={styles.title}>高发区域</div>
          <div className={styles.content}>
            {
              areas.map((item, index) => (
                <Flex key={index} align='center'>
                  <div className={styles.area}>{item.name}</div>
                  <Progress
                    size={[160, 20]}
                    percent={item.progress}
                    showInfo={false}
                    style={{ width: 160, marginTop: 10 }}
                    strokeColor={{
                      '0%': '#FFCCCC',
                      '100%': '#EEFFEB',
                    }}
                  />
                  <Space size={10} className={styles.numBox}>
                    <span>
                      <span className={styles.num}>{item.value}</span>
                      <span>件</span>
                    </span>
                    <span>
                      <span className={styles.num}>{item.rate}</span>
                      <span>%</span>
                    </span>
                  </Space>
                </Flex>
              ))
            }
          </div>
        </div>
      </Space>
      <div className={styles.right}>
        <Flex justify='flex-end'>
          <div>
            <ListTabs onChange={changeListTab} />
          </div>
        </Flex>
        <IssueDescription />
      </div>
    </Flex>
  )
}

export default ImportantEvents