
import { useMemo, useState } from 'react'
import { Flex, Tabs } from 'antd'
import a1 from '@/assets/images/sign/a1.png'
import a2 from '@/assets/images/sign/a2.png'
import a3 from '@/assets/images/sign/a3.png'
import styles from './index.less'
import BaseCard from '@/pages/Common/components/BaseCard'
import LineCharts from './LineCharts'
import EventPicList from '@/pages/Common/components/EventPicList'
import { eventList } from '@/mock/event'

/**
 * 
 * @description 行业体征部分
 */

const IndustrySign = () => {

  const params = {
    page: 1,
    count: 10,
    caseStatus: '',
    eventType: '',
    isDispose: '1',
  }

  //事件列表
  const [listData, setListData] = useState<any>({
    items: eventList,
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });

  const [fetchParams, setFetchParams] = useState<any>(params)

  const tabItems = useMemo(() => {
    return [
      {
        label: `道桥问题`,
        key: '1',
        children: (
          <EventPicList
            listData={listData}
            listHeight={540}
            setParams={(data) => {
              setFetchParams({ ...fetchParams, page: data.page })
            }} />
        )
      },
      {
        label: `疑难杂症案件`,
        key: '2',
        children: (
          <EventPicList
            listData={listData}
            listHeight={540}
            setParams={(data) => {
              setFetchParams({ ...fetchParams, page: data.page })
            }} />
        ),
      },
      {
        label: `应急预案案件`,
        key: '3',
        children: (
          <EventPicList
            listData={listData}
            listHeight={540}
            setParams={(data) => {
              setFetchParams({ ...fetchParams, page: data.page })
            }} />
        ),
      }
    ];
  }, []);

  const list = [
    {
      name: '过街天桥',
      value: 56
    },
    {
      name: '立交桥',
      value: 56
    },
    {
      name: '地下通道',
      value: 56
    },
    {
      name: '高架桥',
      value: 56
    },
    {
      name: '道路',
      value: 56
    }
  ]

  return (
    <Flex gap={28} className={styles.wrap}>
      <Flex vertical gap={15} className={styles.left}>
        <BaseCard
          title="诚管执法指数"
          height={304}
          extra={
            <span className={styles.signNum}>90.5</span>
          }
          style={{
            paddingTop: 20
          }}
        >
          <div style={{ marginTop: 20, padding: '0 20px' }}>
            <LineCharts data={[]} />
          </div>
        </BaseCard>
        <BaseCard
          title="诚管执法设施"
          height={394}
          style={{
            paddingTop: 20
          }}
        >
          <div className={styles.list}>
            {
              list.map((item, index) => (
                <Flex className={styles.listItem} justify='space-between' align='center' key={index}>
                  <span className={styles.name}>{item.name}</span>
                  <span>
                    <span className={styles.num}>{item.value}</span>
                    <span>座</span>
                  </span>
                </Flex>
              ))
            }
          </div>
        </BaseCard>
      </Flex>
      <div className={styles.right}>
        <Flex className={styles.top} justify='space-between'>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(39, 211, 134, 0.2)' }}
          >
            <span>
              <img src={a3} alt="" />
              <span className={styles.name}>桥梁管理指数</span>
            </span>
            <span className={styles.num} style={{ color: '#57EF58' }}>99.5</span>
          </Flex>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(255, 188, 130, 0.2)' }}
          >
            <span>
              <img src={a2} alt="" />
              <span className={styles.name}>道路管理指数</span>
            </span>
            <span className={styles.num} style={{ color: '#FFA250' }}>99.5</span>
          </Flex>
          <Flex
            align='center'
            justify='space-between'
            className={styles.card}
            style={{ background: 'rgba(130, 173, 255, 0.2)' }}
          >
            <span>
              <img src={a1} alt="" />
              <span className={styles.name}>占道挖掘指数</span>
            </span>
            <span className={styles.num} style={{ color: '#447FF0' }}>99.5</span>
          </Flex>
        </Flex>
        <Tabs size="large" defaultActiveKey="1" centered items={tabItems} />
      </div>
    </Flex>
  )
}

export default IndustrySign