import React, { useState, useCallback, useEffect } from 'react'
import { Spin, Card, Layout, Row, Col, Form, Input, Checkbox, AntdSelect as Select, Button, Message } from '@ttk/component'
import { Modal } from "antd"
import { useData, useActions, useCommit } from '@ttk/app-loader'
import moment from 'moment'

export default function Component(props) {

  const commit = useCommit()
  const actions = useActions(props)
  const validateState = useData([props, 'validateState']).toJS()
  const formObj = useData([props, 'formObj']).toJS()
  const showModal = useData([props, 'tempState', 'showModal'])
  const isEdit = useData([props, 'tempState', 'isEdit'])
  const editId = useData([props, 'tempState', 'editId'])
  const selectKey = useData([props, 'selectKey']).toJS()
  const depName = useData([props, 'selectKey', '0', 'depName'])
  
  // 内部管理loading状态
  const [loading, setLoading] = useState(false)

  // 初始化
  useEffect(() => {
    async function fetch() {
      setLoading(true)
      await actions.initForm({userId: editId})
      setLoading(false)
    }
    fetch();
  }, [editId]) 

  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateFormObj(e)
    }
    asyncFun(e)
  }, [])

  // 提交方法
  const onSave = useCallback(() => {
    async function asyncFun() {
      // 使用commit直接更新reducer数据。这种方式可跳过action直接更新reducer数据
      setLoading(true)
      const resutl = await actions.dialogSave()
      if (resutl) {
        Message.info('提交成功')
      }
      setLoading(false)
      commit([props, 'tempState'], { type: 'setModal', data: false })
    }
    async function validate() {
      let { form } = props;
      const result = await actions.updateFormObj()
      if (!result) return;
      asyncFun() 
    }
    validate()
  }, [formObj.parentId])

  // 清除方法
  const onCancel = useCallback(() => {
    commit([props, 'tempState'], { type: 'setModal', data: false })
    commit([props, 'validateState'], { type: 'clear' })
    actions.initForm()
  }, [])
  
  return (
    <Modal
      className="ttk-card-form"
      width={800}
      title={isEdit ? '新增用户' : '修改用户信息'}
      visible={showModal}
      okText="保存"
      cancelText="取消"
      onOk={onSave}
      onCancel={onCancel}
    >
      <Spin spinning={loading} delay={50}>
        <Layout className="content">
          <Form className="label160">
            <Row>
              <Col span={12}>
                <Form.Item
                  label="登录账号"
                  required={true}
                  validateStatus={validateState.loginName.state}
                  help={validateState.loginName.message}>
                  <Input placeholder="请输入登录账号" disabled={false} value={formObj.loginName} onChange={e => updateForm({ loginName: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="姓名"
                  required={true}
                  validateStatus={validateState.userName.state}
                  help={validateState.userName.message}>
                  <Input placeholder="请输入姓名" disabled={false} value={formObj.userName} onChange={e => updateForm({ userName: e.target.value })} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="手机号码"
                  required={true}
                  validateStatus={validateState.mobilePhone.state}
                  help={validateState.mobilePhone.message}>
                  <Input placeholder="请输入手机号码" value={formObj.mobilePhone} onChange={e => updateForm({ mobilePhone: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="所属部门"
                >
                  <Input  disabled={true} value={formObj.depName || depName} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="电子邮箱"
                >
                  <Input placeholder="请输入电子邮箱" value={formObj.email} onChange={e => updateForm({ email: e.target.value })} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="身份证号码"
                >
                  <Input placeholder="请输入身份证号码" value={formObj.idcard} onChange={e => updateForm({ idcard: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="QQ"
                >
                  <Input placeholder="请输入QQ号码" value={formObj.qq} onChange={e => updateForm({ qq: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="微信号"
                // required={true}
                >
                  <Input placeholder="请输入微信号" value={formObj.wechat} onChange={e => updateForm({ wechat: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="工号"
                >
                  <Input placeholder="请输入工号" value={formObj.empNo} onChange={e => updateForm({ empNo: e.target.value })} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="职位"
                >
                  <Input placeholder="请输入职位" value={formObj.dicName} onChange={e => updateForm({ dicName: e.target.value })} />
                </Form.Item>
              </Col>

              <Col span={24}>
                <Form.Item
                  label="备注"
                >
                  <Input.TextArea  placeholder="请输入备注" row={4} value={formObj.remark} onChange={e => updateForm({ remark: e.target.value })} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Modal>
  )
}