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'
import Coor from './Coor'

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>
      }
    },
    region: true
  })

  let [dir, setDir] = useState('')
  let [coorstr, setCoor] = useState('')

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

  return (
    <div className={className}>
      {Element}
      <div className={styles.uplayer + ' ' + styles.inuplayer} >
        <Coor coor={coorstr} onChange={(val:string) => setCoor(val)} />
        <div>
          输入目录：<input value={dir} placeholder="输入对应文件夹" onChange={ev => setDir(ev.target.value)} />
        </div>
        <Upload api={'/vector/uploadMult/' + dir + '/'} body={{ coord: coorstr.split(',') }} upHandle={referData} multiple />
      </div>
    </div>
  )
}