import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { A1baseFromData } from '../A1record'
import { A2_APIgetList, A2_APIgetToken } from '@/store/action/A2disease'
import { RootState } from '@/store'
import { Button, Input, Select } from 'antd'
import { A1select1 } from '../A1record/data'
import MyTable from '@/components/MyTable'
import { envFlag } from '@/utils/http'
import { A2ListType } from './data'
function A2disease() {
  const dispatch = useDispatch()

  const [fromData, setFromData] = useState(A1baseFromData)

  const getListFu = useCallback(() => {
    dispatch(A2_APIgetList(fromData))
  }, [dispatch, fromData])

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

  const tableInfo = useSelector((state: RootState) => state.A2disease.tableInfo)

  // 作品名称的输入
  const timeRef = useRef(-1)
  const [inputKey, setInputKey] = useState(0)
  const fromKeyChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
      clearTimeout(timeRef.current)
      timeRef.current = window.setTimeout(() => {
        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 })
      }, 500)
    },
    [fromData]
  )

  // 下拉框的改变
  const selectChangeFu = useCallback(
    (value: any, key: 'type') => {
      setFromData({ ...fromData, [key]: value, pageNum: 1 })
    },
    [fromData]
  )

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setInputKey(Date.now())
    setFromData({ ...A1baseFromData })
  }, [])

  // 点击查看
  const lookKK = useCallback((code: string) => {
    window.open(
      `${envFlag ? 'https://sit-yunnanguqiao.4dage.com' : ''}/scene/index.html/#/?m=${code}`,
      '_blank'
    )
  }, [])

  // 点击编辑
  const editKK = useCallback(async (code: string) => {
    const res = await A2_APIgetToken()
    if (res.code === 0) {
      const token = res.data

      window.open(
        `https://www.4dkankan.com/projects/yngc/epg.html?m=${code}&lang=zh&token=${token}#/tag`,
        '_blank'
      )
    }
  }, [])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A2ListType) => {
          return (
            <>
              <Button size='small' type='text' onClick={() => lookKK(item.sceneCode)}>
                查看
              </Button>

              <Button size='small' type='text' onClick={() => editKK(item.sceneCode)}>
                编辑
              </Button>
            </>
          )
        }
      }
    ]
  }, [editKK, lookKK])

  return (
    <div className={styles.A2disease}>
      <div className='pageTitle'>病害管理</div>

      {/* 顶部筛选 */}
      <div className='A2top'>
        <div className='A2topLeft'>
          <div>
            <Input
              key={inputKey}
              maxLength={30}
              showCount
              style={{ width: 300 }}
              placeholder='请输入古桥名称'
              allowClear
              onChange={e => fromKeyChangeFu(e, 'searchKey')}
            />
          </div>

          <div>
            <Select
              allowClear
              style={{ width: 150 }}
              placeholder='结构类型'
              value={fromData.type || null}
              onChange={e => selectChangeFu(e, 'type')}
              options={A1select1}
            />
          </div>
        </div>

        <div>
          <Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className='A2tableBox'>
        <MyTable
          yHeight={645}
          list={tableInfo.list}
          columnsTemp={[
            ['txt', '古桥名称', 'name'],
            ['txt', '结构形式', 'type']
          ]}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
        />
      </div>
    </div>
  )
}

const MemoA2disease = React.memo(A2disease)

export default MemoA2disease
