import React, { Fragment } from 'react'
import { zipItemAction, sectionItemAction, judgeItemAction, transferItemAction } from './ListState'
import Item from '../../components/item'
import Dialog from '../../components/Dialog'
import styles from './index.module.css'

const JUDGEING = 1, JUGESUCCESS = 2, JUGEERR = 3
const SECTIONING = 4, SECTIONSUCCESS = 5, SECTIONEERR = 6
const TRANING = 7, TRANSUCCESS = 8, TRANEERR = 9
const ZIPING = 10, ZIPSUCCESS = 11, ZIPEERR = 12
const TRANSFERING = 13, TRANSFERSUCCESS = 14, TRANSFEREERR = 15


export default function Grent({ setItemStaus, modelDispatch, referData, delHandle, api, region }: any) {
  let [identity, setIdentity] = ['', (dom: HTMLSelectElement) => { identity = dom.value }]
  let [text, setText] = ['', (dom: HTMLInputElement) => { text = dom.value }]
  let [min, setMin] = ['9', (dom: HTMLInputElement) => {
    let i = Number(dom.value)
    let imx = Number(max)
    if (isNaN(i) || (imx && i > imx) || i < 9 || i > 20) {
      dom.value = min
    } else {
      min = dom.value
    }
  }]
  let [max, setMax] = ['17', (dom: HTMLInputElement) => {
    let i = Number(dom.value)
    let imi = Number(min)
    if (isNaN(i) || (imi && i < imi) || i < 9 || i > 20) {
      dom.value = max
    } else {
      max = dom.value
    }
  }]

  const judge = async (model: Model) => {
    model = setItemStaus(model, JUDGEING)
    let data = await judgeItemAction(modelDispatch, api.judge + model.id + '/', model)

    if (data.status !== 200) {
      alert(data.message)
      setItemStaus(model, JUGEERR)
    } else {
      setItemStaus(model, JUGESUCCESS)
      referData()
    }
  }
  const zipHandle = async (model: Model) => {
    model = setItemStaus(model, ZIPING)
    let data = await zipItemAction(modelDispatch, api.zip + model.id + '/', model)
    if (data.status !== 200) {
      alert(data.message)
      setItemStaus(model, ZIPEERR)
    } else {
      setItemStaus(model, ZIPSUCCESS)
      referData()
    }

  }
  const section = async (model: Model) => {
    let param = region ? (min + '/' + max + '/') : ''
    model = setItemStaus(model, SECTIONING)
    sectionItemAction(modelDispatch, api.section + model.id + '/' + param, model)
      .then(data => {
        if (data.status !== 200) {
          model = setItemStaus(model, SECTIONEERR)
          alert(data.message)
        } else {
          model = setItemStaus(model, SECTIONSUCCESS)
          referData()
        }
      });
  }

  const transform = async (model: Model) => {
    model = setItemStaus(model, TRANING)
    sectionItemAction(modelDispatch, api.transform + model.id + '/', model)
      .then(data => {
        if (data.status !== 200) {
          model = setItemStaus(model, TRANEERR)
          alert(data.message)
        } else {
          model = setItemStaus(model, TRANSUCCESS)
          referData()
        }
      });
  }

  const transfer = async (model: Model) => {
    model = setItemStaus(model, TRANSFERING)
    transferItemAction(modelDispatch, api.transfer + model.id + '/', model, { text: text, role: identity })
      .then(data => {
        if (data.status !== 200) {
          model = setItemStaus(model, TRANSFEREERR)
          alert(data.message)
        } else {
          model = setItemStaus(model, TRANSFERSUCCESS)
          referData()
        }
      });
  }

  class ItemFn extends React.Component<any, any> {
    constructor(props: any) {
      super(props)
      this.state = {
        showDialog: false
      }
    }
    setShowDialog = (b: any) => {
      this.setState({showDialog: b})
    }
    render() {
      let {model, privItem} = this.props
      let Zip: any = <b onClick={() => zipHandle(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>解压</b>
      let Sect: any = <b onClick={() => section(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>切片</b>
      let Jude: any = <b onClick={() => judge(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>判断</b>
      let Tran: any = <b onClick={() => transform(model)} style={{ cursor: 'pointer', color: '#3e7cd3' }}>转geojson</b>
      let Tf: any = (
        <Fragment>
          <Dialog title="服务发布" show={this.state.showDialog} stateChange={(enter: boolean) => { this.setShowDialog(false); enter && transfer(model) }}>
            <div className={styles.dialogitem}>
              <label className={styles.init}>图层名称</label>
              <input type="text" defaultValue={text} onChange={ev => setText(ev.target)} placeholder="图层名称" />
            </div>
            <div className={styles.dialogitem}>
              <label className={styles.init}>身份</label>
              <select defaultValue={identity} onChange={ev => setIdentity(ev.target)}>
                <option value="admin">admin</option>
                <option value="user">user</option>
              </select>
            </div>
          </Dialog>
          <b style={{ cursor: 'pointer', color: '#3e7cd3' }} onClick={() => this.setShowDialog(true)}>发布</b>
        </Fragment>
      )

      if (region) {
        Sect = (
          <Fragment>
            <Dialog title="数据切片" show={this.state.showDialog} stateChange={(enter: boolean) => { this.setShowDialog(false); enter && section(model) }}>
              <div className={styles.dialogitem + ' ' + styles.min}>
                <label>层级设置</label>
                <input type="text" defaultValue={min} onBlur={ev => setMin(ev.target)} placeholder="最小层级" />
                <input type="text" defaultValue={max} onBlur={ev => setMax(ev.target)} placeholder="最大层级" />
              </div>
            </Dialog>
            <b style={{ cursor: 'pointer', color: '#3e7cd3' }} onClick={() => this.setShowDialog(true)}>切片</b>
          </Fragment>
        )
      }

      Zip = model.ajaxStatue === ZIPING ? '解压中…' : model.ajaxStatue === ZIPSUCCESS ? '成功解压' : Zip
      Sect = model.ajaxStatue === SECTIONING ? '切片中…' : model.ajaxStatue === SECTIONSUCCESS ? '成功切片' : Sect
      Jude = model.ajaxStatue === JUDGEING ? '判断中…' : model.ajaxStatue === JUGESUCCESS ? '成功判断' : Jude
      Tran = model.ajaxStatue === TRANING ? '转换中…' : model.ajaxStatue === TRANSUCCESS ? '成功转换' : Tran
      Tf = model.ajaxStatue === TRANSFERING ? '发布中…' : model.ajaxStatue === TRANSFEREERR ? '成功发布' : Tf

      if (model.status === 9) {
        Jude = '判断中…'
      }

      if (model.status === 6) {
        Sect = '切片中…'
      }

      if (model.status === 13) {
        Tf = '发布中…'
      }

      return (
        <Item key={model.id} {...model} >
          {() => (
            <Fragment>
              {api.zip && (model.status === 1 && Zip)}
              {api.judge && ((model.status === 2 || model.status === 9) && Jude)}
              {api.transform && ((model.status === 3 || model.status === 7) && Tran)}
              {api.section && (model.status === 4 && Sect)}
              {api.transfer && ((model.status === 5 || model.status === 10) && Tf)}
              {privItem && privItem(model)}
              {(
                model.state === 9 || model.status === 6 || model.status === 13 || 
                model.ajaxStatue === ZIPING || model.ajaxStatue === SECTIONING || 
                model.ajaxStatue === JUDGEING || model.ajaxStatue === TRANING || 
                model.ajaxStatue === TRANSFERING) ? '' : <b onClick={() => delHandle(model)} style={{ cursor: 'pointer', color: '#f46579' }}>删除</b>
              }
            </Fragment>
          )}
        </Item>
      )
    }
  }
  return {
    ItemFn,
    text
  }
}