import { Form, Input, Row, Col, Descriptions } from "antd";

const { TextArea } = Input;

const UpdateBasicInfo = (props) => {
  const {form, editable, template} = props;

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
  };

  return (
    <div>
      <h3>基本信息</h3>
      {
        editable ? <Form 
          form={form}
          {...formItemLayout}
        > 
          <Row gutter={10}>
            <Col xs={24} sm={24} lg={12}>
              <Form.Item label='中文名称' name='cnName' rules={[{ required: true, message: '请填写模版中文名称' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} lg={12}>
              <Form.Item label='英文名称' name='name' rules={[{ required: true, message: '请填写模版名称' }]}>
                <Input />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} lg={12}>
              <Form.Item label='模版描述' name='comment'>
                <TextArea rows={4} />
              </Form.Item>
            </Col>
          </Row>  
        </Form> : <Descriptions column={2}>
          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{template?.cnName||''}</Descriptions.Item>
          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{template?.name||''}</Descriptions.Item>
          <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>模版描述</div>}>{template?.comment||''}</Descriptions.Item>
        </Descriptions>    
      }
    </div>    
  );
}

export default UpdateBasicInfo;