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 = {
    isCycle: null,
    isUse: null,
  }

  // 初始化
  useEffect(() => {
    !formObj.hasOwnProperty('isCycle') && 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 = {
        isCycle: formObj.isCycle,
        isUse: formObj.isUse
      }
      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.isCycle.state}
                  help={validateState.isCycle.message}>
                  <Select
                    placeholder="请选择是否循环"
                    filterOption={null}
                    allowClear={true}
                    value={formObj.isCycle}
                    onChange={e => updateForm({ isCycle: e })} >
                    {
                      isCycle.map((item, index) => <Select.Option key={`${index}${item}`} value={Number(index)}>{item}</Select.Option>)
                    }
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="启用"
                  required={true}
                  validateStatus={validateState.isUse.state}
                  help={validateState.isUse.message}>
                  <Select
                    key={'select2'}
                    placeholder="请选择启用"
                    filterOption={null}
                    allowClear={true}
                    value={formObj.isUse}
                    onChange={e => updateForm({ isUse: e })} >
                    {
                      isUse.map((item, index) => <Select.Option key={`${index}${item}`} value={Number(index)}>{item}</Select.Option>)
                    }
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col className="form-footer" span={24}>
                <Button onClick={(e) => onSkip(-1)}>上一步</Button>
                <Button type="primary" onClick={(e) => onSkip(1)}>下一步</Button>
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Card>
  )
}