import React from 'react';
import { Form, Input, Row, Col, Descriptions } from 'antd';

const { TextArea } = Input;

const TemplateActionHeader = (props) => {
  const { editable, form, templateData } = props;

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 19 },
    },
  };

  return (
    editable ? (
      <Form
        form={form}
        {...formItemLayout}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="中文名称"
              name="cnName"
              labelAlign="left"
              rules={[{ required: true, message: '请输入中文名称!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="英文名称"
              name="name"
              labelAlign="left"
              rules={[{ required: true, message: '请输入英文名称!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="描述"
              name="remark"
              labelAlign="left"
              rules={[{ required: true, message: '请输入描述!' }]}
            >
              <TextArea row={4} />
            </Form.Item>
          </Col>
        </Row>
      </Form> 
    ) : (
      <Descriptions column={2}>
        <Descriptions.Item label="中文名称">{templateData.cnName||''}</Descriptions.Item>
        <Descriptions.Item label="英文名称">{templateData.name||''}</Descriptions.Item>
        <Descriptions.Item label="描述">{templateData.remark||''}</Descriptions.Item>
      </Descriptions>
    ) 
  )
}

export default TemplateActionHeader;