
import { Flex, Progress } from 'antd'
import styles from './index.less'
import BaseCard from '@/pages/Common/components/BaseCard'
import PieChart from './PieCharts'

const AreaDistribution = () => {
  const list = [
    {
      name: '成华区',
      percent: 80,
      num: 300
    },
    {
      name: '锦江区',
      percent: 80,
      num: 300
    },
    {
      name: '青羊区',
      percent: 80,
      num: 300
    },
    {
      name: '武侯区',
      percent: 80,
      num: 300
    },
    {
      name: '金牛区',
      percent: 80,
      num: 300
    },
    {
      name: '龙泉驿区',
      percent: 80,
      num: 300
    },
    {
      name: '都江堰市',
      percent: 80,
      num: 300
    }
  ]

  const chartData: any = [
    {
      name: '“5+2”中心城区',
      value: 1625,
      percent: 33
    },
    {
      name: '其它中心城区',
      value: 1625,
      percent: 33
    },
    {
      name: '郊区新城',
      value: 1625,
      percent: 33
    }
  ]

  return (
    <Flex justify='space-between' gap={80} className={styles.wrap}>
      <Flex vertical gap={23} style={{ flex: 1 }} className={styles.progressWrap}>
        {
          list.map((item, index) => (
            <Flex key={index} align='center' justify='space-between'>
              <div className={styles.itemName}>{item.name}</div>
              <div className={styles.progress}>
                <Progress
                  size={{ height: 16 }}
                  status="active"
                  percent={item.percent}
                  showInfo={false}
                  strokeColor={{ from: '#38F2E3', to: '#3DC3FF' }}
                />
              </div>
              <div className={styles.itemNum}>
                <span className={styles.num}>{item.num}</span>
                <span>件</span>
              </div>
            </Flex>
          ))
        }
      </Flex>
      <BaseCard
        width={552}
        height={353}
        title="区域分布总结"
        style={{
          padding: '20px 0',
          overflow: 'hidden'
        }}
      >
        <Flex vertical className={styles.content}>
          <PieChart data={chartData} chartStyle={{ width: '118px', height: '118px' }} />
          <div className={styles.desc}>
            从具体区（市）县看，有<span className={styles.tipsText}>6</span> 个区（市）县案件均超过<span className={styles.tipsText}>300</span> 件，
            其中<span className={styles.tipsText}>成华区</span> 和<span className={styles.tipsText}>成都高新区</span> 超过了400件；<span className={styles.tipsText}>11</span>有个区（市）县处理投诉案件数在100-300件之间；
            有<span className={styles.tipsText}>6</span>个区（市）县处理投诉案件少于100 件，分别是青白江区、新津区、彭州市、大邑县、成都东部新区、蒲江县。
          </div>
        </Flex>
      </BaseCard>
    </Flex>
  )
}

export default AreaDistribution