import React, { useState } from 'react'
import GrentReducer from './grent'
import Upload from '../components/Upload'
import { Link } from 'react-router-dom'
import styles from './index.module.css'

const infos = ['x平移米数', 'y平移米数', 'z平移米数', 'rx旋转米数', 'ry旋转米数', 'rz旋转米数', 's缩放',]


export default function GeoList({ className }: any) {
  const { referData, Element, models } = GrentReducer({
    delUrl: '/vector/delete/',
    getUrl: '/vector/list/',
    zipUrl: '/vector/unzip/',
    sectionUrl: '/vector/command/slice/',
    transferUrl: '/vector/move/',
    transformUrl: '/vector/command/geojson/',
    judgeUrl: '/vector/command/judge/coord/',
    ItemFn (model: Model) {
      if (model.status === 8) {
        return <Link to={"/style/" + model.id}>编辑样式</Link>
      }
    }
  })

  let [dir, setDir] = useState('')
  let [coor, setCoor] = useState('')
  let [info, setInfo] = useState('')

  for (let i = 0; i < models.length; i++) {
    let model = models[i] as Model
    if (model.status !== 9) continue
    setTimeout(() => referData(), 1000)
    break;
  }

  const changeInput = (ev: React.ChangeEvent<HTMLInputElement>) => {
    let val = (ev.target.value as string)
    let args = val.split(',')
    let i = 0
    if (args.length > 7) {
      return setInfo('参数超过限制')
    }

    if (!args[args.length - 1]) {
      setInfo('正在输入' + infos[args.length - 1])
    } else {
      for (; i < args.length; i++) {
        if (!args[i] || isNaN(Number(args[i]))) break;
      }
      if (i !== args.length) {
        return setInfo(infos[i] + '格式不正确')
      } else {
        setInfo('正在输入' + infos[args.length - 1])
      }
    }
    setCoor(ev.target.value)
  }

  return (
    <div className={className}>
      {Element}
      <div className={styles.uplayer + ' ' + styles.inuplayer} >
        <div className={styles.tip}>
          输入坐标：<input value={coor} placeholder="输入对应坐标" onChange={changeInput} onFocus={changeInput} onBlur={() => setInfo('')} />
          <div style={{ display: info ? 'block' : 'none' }}>
            <p>{info}</p>
            <p>以,(英文符号)结束输入，并输入下一个参数如0,0,0</p>
          </div>
        </div>
        <div>
          输入目录：<input value={dir} placeholder="输入对应文件夹" onChange={ev => setDir(ev.target.value)} />
        </div>
        <Upload api={'/vector/uploadMult/' + dir + '/'} body={{ coord: coor || null }} upHandle={referData} multiple />
      </div>
    </div>
  )
}