import React, { useState, useCallback, useEffect } from 'react'
import { Spin, Card, Layout, Row, Col, Form, Input, Radio, Checkbox, AntdSelect as Select, Switch, Button, Message, DatePicker, Modal } from '@ttk/component'
import { useData, useActions, useCommit } from '@ttk/app-loader'
import moment from 'moment'
import form from '@/';
const { TextArea } = Input;
export default function Component(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const validateState = useData([props, 'validateState']).toJS()
  const formObj = useData([props, 'attributeForm']).toJS()
  // loading状态
  const loading = useData([props, 'status', 'loading'])
  // step状态
  const step = useData([props, 'status', 'step'])
  const isCycle = ['否', '是']
  const isUse = ['否', '是']
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    name: null,
    sortNo: null
  }

  // 初始化
  useEffect(() => {
    console.log(formObj);
    !formObj.hasOwnProperty('name') && actions.initForm(formData)
  }, []) 
  
  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateFormObj(e)
    }
    asyncFun(e)
  }, [])

  // 步骤跳转
  const onSkip = useCallback((direction) => {
    async function asyncFunc () {
      // 这个步骤只需校验两个字段
      let fields = {
        name: formObj.name,
        sortNo: formObj.sortNo
      }
      let result = direction == -1
      if (direction == 1) {
        result = await actions.updateFormObj(fields)
      }
      result && actions.skipToStep(step + direction)
    }
    asyncFunc()
  }, [formObj, step])

  return (
    <Card
      title="第一步"
      className="ttk-card-form"
    >
      <Spin spinning={loading} delay={50}>
        <Layout className="content">
          <Form className="label100">
            <Row>
              <Col span={12}>
                <Form.Item
                  label="名称"
                  required={true}
                  validateStatus={validateState.name.state}
                  help={validateState.name.message}>
                  <Input placeholder="请输入名称" value={formObj.name} onChange={e => updateForm({ name: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="排序"
                  required={true}
                  validateStatus={validateState.sortNo.state}
                  help={validateState.sortNo.message}>
                  <Input placeholder="请输入优先级" value={formObj.sortNo} onChange={e => updateForm({ sortNo: e.target.value })} />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col className="form-footer" span={24}>
                <Button type="primary" onClick={(e) => onSkip(1)}>下一步</Button>
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Card>
  )
}