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()
  // loading状态
  const loading = useData([props, 'status', 'loading'])
  // step状态
  const step = useData([props, 'status', 'step'])
  const isCycle = ['否', '是']
  const isUse = ['否', '是']
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    dateStart: null,
    testType: [],
    dateEnd: '2015/01/01',
    isDefault: null
  }

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

  // 步骤跳转
  const onSkip = useCallback((direction) => {
    let result = direction == -1
      actions.skipToStep(step + direction)
  }, [])
  
  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="有效期起"
                >
                  <DatePicker placeholder="请选择有效期起" defaultValue={formData.dateStart ? moment(formData.dateStart) : null} value={formObj.dateStart && moment(formObj.dateStart)} onChange={e => updateForm({ dateStart: e })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="有效期止"
                >
                  <DatePicker placeholder="请选择有效期止" value={formObj.dateEnd && moment(formObj.dateEnd)} onChange={e => updateForm({ dateEnd: e })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="测试类型"
                >
                  <Checkbox.Group style={{ width: '100%' }} value={formObj.testType} onChange={value => updateForm({ testType: value })}>
                    <Row>
                      <Col span={8}>
                        <Checkbox value="A">A</Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox disabled value="B">
                          B
                        </Checkbox>
                      </Col>
                      <Col span={8}>
                        <Checkbox value="C">C</Checkbox>
                      </Col>
                    </Row>
                  </Checkbox.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="是否默认"
                >
                  <Switch defaultChecked checked={formObj.isDefault} onChange={value => updateForm({ isDefault: value })}/>
                </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>
  )
}