import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Table } from 'antd'
import { B1tableAreaType } from '@/types'
import history from '@/utils/history'
import PlanModal from '../PlanModal'
import { B1_APIgetlistAreaSon } from '@/store/action/B1Plan'
import dayjs from 'dayjs'
import ExportJsonExcel from 'js-export-excel'
import { MessageFu } from '@/utils/message'

type Props = {
  closeSon: () => void
  city1: string
}

function B1LookCity({ closeSon, city1 }: Props) {
  // 表格数据
  const [tabList, setTabList] = useState<B1tableAreaType[]>([])

  const getListFu = useCallback(async () => {
    const res = await B1_APIgetlistAreaSon({ province: city1 })

    if (res.code === 0) {
      let arr: B1tableAreaType[] = res.data.region || []

      arr = arr.map((v, i) => ({
        ...v,
        id: i + ''
      }))

      setTabList(arr)
    }
  }, [city1])

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

  // 跳到 机房管理 或者 场景审核
  const skipUrlFu = useCallback((val: string, url: '/psychz' | '/scene') => {
    if (val.includes('其他')) history.push(encodeURI(`${url}?N=1`))
    else history.push(encodeURI(`${url}?C=${val}`))
  }, [])

  // 点击 按日期统计
  const [modalTitle, setModalTitle] = useState('')

  const columns = useMemo(() => {
    return [
      {
        title: '站址地区',
        render: (item: B1tableAreaType) => item.city || '空'
      },
      {
        title: '机房总数',
        render: (item: B1tableAreaType) => (
          <span
            onClick={() => skipUrlFu(city1 + '/' + item.city, '/psychz')}
            className='B1tableClick'
          >
            {item.pcsRoom || 0}
          </span>
        )
      },
      {
        title: '上传机房',
        render: (item: B1tableAreaType) => item.pcsSceneDistinct || 0
      },
      {
        title: '上传场景',
        render: (item: B1tableAreaType) => (
          <span
            onClick={() => skipUrlFu(city1 + '/' + item.city, '/scene')}
            className='B1tableClick'
          >
            {item.pcsScene || 0}
          </span>
        )
      },
      {
        title: '完成场景计算',
        render: (item: B1tableAreaType) => item.pcsCalculate || 0
      },
      {
        title: '审核驳回',
        render: (item: B1tableAreaType) => item.pcsReject || 0
      },
      {
        title: '初审通过',
        render: (item: B1tableAreaType) => item.pcsFirst || 0
      },
      {
        title: '审核通过',
        render: (item: B1tableAreaType) => item.pcsPass || 0
      },

      {
        title: '场景推送成功',
        render: (item: B1tableAreaType) => item.pcsPushScene || 0
      },
      {
        title: '链接推送成功',
        render: (item: B1tableAreaType) => item.pcsPushLink || 0
      },
      {
        title: 'Json推送成功',
        render: (item: B1tableAreaType) => item.pcsPushJson || 0
      },
      {
        title: '操作',
        render: (item: B1tableAreaType) => (
          <>
            <Button size='small' type='text' onClick={() => setModalTitle(city1 + '/' + item.city)}>
              按日期统计
            </Button>
          </>
        )
      }
    ]
  }, [city1, skipUrlFu])

  // 点击导出
  const deriveFu = useCallback(async () => {
    if (tabList.length > 30000)
      return MessageFu.warning('只支持导出最多30000条数据。请增加筛选条件，并重新尝试')

    if (tabList.length === 0) return MessageFu.warning('当前搜索条件没有数据!')
    const name = `进度统计-${city1}` + dayjs(new Date()).format('YYYY-MM-DD HH:mm')

    const option = {
      fileName: name,
      datas: [
        {
          sheetData: tabList.map((v: B1tableAreaType) => ({
            ...v,
            city: city1 + '-' + v.city
          })),
          sheetName: name,
          sheetFilter: [
            'city',
            'pcsRoom',
            'pcsSceneDistinct',
            'pcsScene',
            'pcsCalculate',
            'pcsReject',
            'pcsFirst',
            'pcsPass',
            'pcsPushScene',
            'pcsPushLink',
            'pcsPushJson'
          ],
          sheetHeader: [
            '站址地区',
            '机房总数',
            '上传机房',
            '上传场景',
            '完成场景计算',
            '审核驳回',
            '初审通过',
            '审核通过',
            '场景推送成功',
            '链接推送成功',
            'Json推送成功'
          ],
          columnWidths: [10, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
        }
      ]
    }

    const toExcel = new ExportJsonExcel(option) //new
    toExcel.saveExcel() //保存
  }, [city1, tabList])

  return (
    <div className={styles.B1LookCity}>
      <div className='B1Ltop'>
        <div className='B1LtopL'>
          <Button onClick={closeSon}>返回</Button>
          <span>进度统计-{city1}</span>
        </div>

        <Button type='primary' onClick={deriveFu}>
          导出表格
        </Button>
      </div>
      {/* 表格主体 */}
      <div className='tableMain'>
        <Table
          size='small'
          scroll={{ y: 590 }}
          dataSource={tabList}
          columns={columns}
          rowKey='id'
          pagination={false}
        />
      </div>

      {/* 点击 按日期查看 出来的页面 */}
      {modalTitle ? <PlanModal title={modalTitle} closePageFu={() => setModalTitle('')} /> : null}
    </div>
  )
}

const MemoB1LookCity = React.memo(B1LookCity)

export default MemoB1LookCity
