/*
 * @Description: 自定义测试化用例
 * @Author: tangjiang
 * @Github:
 * @Date: 2019-11-27 19:46:14
 * @LastEditors  : tangjiang
 * @LastEditTime : 2019-12-26 20:07:35
 */
import './index.scss';
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
import { Form, Input } from 'antd';
const FormItem = Form.Item;
const { TextArea } = Input;

/**
 * @description 初始化测试用例: 当有inputValue值时, 显示表单输入框，否则显示文本提示信息
 * @param {*} props
 *  props: {
 *    inputValue: '' // 初始值
 *    onDebuggerCode: func // 点击调试代码执行函数
 * }
 */
function InitTabCtx(props, ref) {
  const el = useRef(null);

  const { inputValue, onDebuggerCode } = props;

  useImperativeHandle(ref, () => ({
    handleTestCodeFormSubmit: (cb) => {
      _handleTestCodeFormSubmit(cb);
    }
  }));


  // 渲染文本提示信息
  const renderText = () => (<span className={'ctx_default'}>请在这里添加测试用例，点击“调试代码”时将从这里读取输入来测试你的代码...</span>);
  // 渲染表单信息
  const renderForm = () => {
    const { form: { getFieldDecorator } } = props;
    return (
      <Form className={'user_case_form'}>
        <FormItem
          className={'input_area flex_l'}
        >
          {
            getFieldDecorator('input', {
              initialValue: inputValue
            })(<TextArea
              ref={el}
              className="input_textarea_style"
              rows={8}
              autoFocus={true}
              placeholder="请填写测试用例的输入值，点击“调试代码”"
            />)
          }
        </FormItem>
      </Form>
    )
  }
  // 初始渲染内容
  const [renderCtx, setRenderCtx] = useState(() => {
    return function () {
      return renderText();
    };
  })

  useEffect(() => {
    if (el.current) {
      setTimeout(() => {
        el.current.focus()
      }, 100);
    }
  }, [el.current])

  // 输入值变化时更新渲染内容
  useEffect(() => {
    setRenderCtx(() => {
      return renderForm;
    });
  }, [inputValue]);

  const _handleTestCodeFormSubmit = (cb) => {
    const { form } = props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) { // 表单验证通过时，调用测试接口
        cb && cb(); // 调用回调函数，切换 tab
        onDebuggerCode && onDebuggerCode(values);
      }
    });
  }

  return (
    <div >
      {renderCtx()}
    </div>
  )
}

export default Form.create()(forwardRef(InitTabCtx));


