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'
const { TextArea } = Input;
export default function Component(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const formObj = useData([props, 'attributeForm']).toJS()
  const validateState = useData([props, 'validateState']).toJS()
  // loading状态
  const loading = useData([props, 'status', 'loading'])
  // step状态
  const step = useData([props, 'status', 'step'])
  const isCycle = ['否', '是']
  const isUse = ['否', '是']
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    remark: null
  }

  // 初始化
  useEffect(() => {
    !formObj.hasOwnProperty('remark') && 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.remark
      }
      let result = direction == -1
      if (direction == 1) {
        result = await actions.updateFormObj(fields)
      }
      result && actions.skipToStep(step + direction)
    }
    asyncFunc()
  }, [formObj, step])
  
  // 提交方法
  const save = useCallback(() => {
    async function asyncFunc () {
      let fields = {
        remark: formObj.remark
      }
      let result = await actions.updateFormObj(fields)
      if (result) {
        const modal = Modal.confirm({
          title: '确认',
          content: '是否确认提交表单',
          onOk: () => { 
            console.log('submit');
          }
        })
      }
    }
    asyncFunc()
  }, [formObj])

  return (
    <Card
      title="第四步"
      className="ttk-card-form"
    >
      <Spin spinning={loading} delay={50}>
        <Layout className="content">
          <Form className="label100">
            <Row>
              <Col span={24}>
                <Form.Item
                  label="描述"
                  validateStatus={validateState.remark.state}
                  help={validateState.remark.message}>
                  <Input.TextArea  placeholder="请输入描述" row={4} value={formObj.remark} onChange={e => updateForm({ remark: e.target.value })} />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col className="form-footer" span={24}>
                <Button onClick={(e) => onSkip(-1)}>上一步</Button>
                <Button type="primary" onClick={save}>保存</Button>
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Card>
  )
}