import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Checkbox, Modal } from 'antd'
import { useSelector } from 'react-redux'
import store, { RootState } from '@/store'
import { ExInfoType } from '@/store/reducer/layout'
import { MessageFu } from '@/utils/message'
import classNames from 'classnames'
import dayjs from 'dayjs'
import ExportJsonExcel from 'js-export-excel'

function Zexport() {
  const { exInfo } = useSelector((state: RootState) => state.A0Layout)

  const [arr, setArr] = useState<{ label: string; value: boolean }[]>([])

  useEffect(() => {
    setArr(exInfo.arr.map(v => ({ label: v.txt, value: true })))
  }, [exInfo.arr])

  // 选中的txt集合
  const txtAcArr = useMemo(() => {
    return arr.filter(v => v.value).map(c => c.label)
  }, [arr])

  const btnOk = useCallback(() => {
    if (txtAcArr.length === 0) return MessageFu.warning('最少选择一个字段')

    const keyArr = exInfo.arr.filter(v => txtAcArr.includes(v.txt)).map(c => c.key)

    const name = exInfo.name + dayjs(new Date()).format('YYYY-MM-DD HH:mm')

    const numArr = keyArr.map(v => 10)

    const resData = exInfo.data.map(v => ({
      ...v,
      date: v.date ? dayjs(v.date).format('YYYY-MM-DD') : ''
    }))

    // if (1 + 1 === 2) {
    //   console.log('---', resData, keyArr, txtAcArr)

    //   return
    // }

    const option = {
      fileName: name,
      datas: [
        {
          sheetData: resData,
          sheetName: name,
          sheetFilter: keyArr,
          sheetHeader: txtAcArr,
          columnWidths: numArr
        }
      ]
    }

    const toExcel = new ExportJsonExcel(option) //new
    toExcel.saveExcel() //保存
    MessageFu.success('导出成功')
    store.dispatch({ type: 'layout/exInfo', payload: {} as ExInfoType })
  }, [exInfo, txtAcArr])

  return (
    <Modal
      wrapClassName={styles.Zexport}
      destroyOnClose
      open={true}
      title='导出设置'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='ZexMain'>
        {arr.map(v => (
          <Checkbox
            key={v.label}
            checked={v.value}
            onChange={e =>
              setArr(
                arr.map(c => ({
                  label: c.label,
                  value: c.label === v.label ? !c.value : c.value
                }))
              )
            }
          >
            {v.label}
          </Checkbox>
        ))}

        <div className='ZexBtn'>
          <Button type='primary' onClick={btnOk} disabled={txtAcArr.length === 0}>
            导出
          </Button>
          &emsp;
          <Button
            onClick={() => store.dispatch({ type: 'layout/exInfo', payload: {} as ExInfoType })}
          >
            取消
          </Button>
        </div>
        <div className={classNames('ZexTit', txtAcArr.length === 0 ? 'ZexTitAc' : '')}>
          最少选择一个字段
        </div>
      </div>
    </Modal>
  )
}

const MemoZexport = React.memo(Zexport)

export default MemoZexport
