import React, { useState,useEffect } from 'react';
import { CloseOutlined} from '@ant-design/icons';
import { Modal, Form, Input, Button, Select,Alert  } from 'antd';
import unitoption from '../unit'

const CreateTopis = (props) => {
  const { Option, OptGroup } = Select;
  const [form] = Form.useForm();
  const { TextArea } = Input;
  const [topics, settopics] = useState('');
  const [tip,settip]=useState("Topic 格式必须以“/”进行分层，区分每个类目。其中前三个类目已经规定好，第一个代表产品标识 ProductKey，第二个 ${deviceKey} 通配 deviceKey，第三个 user 用来标识产品的自定义 Topic 类。简单来说，Topic 类：/a15T****dhK/${deviceKey}/user/update 是具体 Topic：/a15T****dhK/mydevice1/user/update 和 /a15T****dhK/mydevice2/user/update 等的集合。")
    useEffect(() => {
      
      if(props?.values?.id){
        form.setFieldsValue({
          id: props?.values?.id,
          topics: props?.values?.topics,
          topicsType: props?.values?.topicsType,
          description:props?.values?.description,
        });
      }
    },[props?.values])

const onChange=(e)=>{
    console.log(e)
    settopics(e.target.value)
}
  return (
    <Modal
      title={props?.values?.id ? '编辑' : '新建'}
      width={640}
      visible={props?.createModalVisible}
      bodyStyle={{ padding: '32px 40px 8px' }}
      footer={null}
      onCancel={() => { 
        props?.onCancel();
      }}
      destroyOnClose
      maskClosable={false}
    >
        <Alert
      message="说明"
      description={tip}
      type="info"
    />
        
      <Form
        layout="vertical"
        preserve={false}
        form={form}
        // initialValues={props?.values}
        onFinish={()=>{
            form.setFieldsValue({
                topics:"/"+props.productCode+"/"+props.productVesion+"/${deviceKey}/use/"+topics
            })
          console.log(form.getFieldsValue())
          props?.onFinish(form.getFieldsValue())
        }}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="topics" label="Topics类" rules={[{ required: true, max: 64, whitespace: true }]}>
          <Input addonBefore={props.productCode+"/"+props.productVesion+"/${deviceKey}/use/"} onChange={onChange} placeholder="请输入Topics类" />
        </Form.Item>
        <Form.Item label={'类型'} name="topicsType" rules={[{ required: true }]}>
          <Select  options={[
                {
                value: 0,
                label: '发布',
                },
                {
                    value: 1,
                    label: '订阅',
                },
                {
                    value: 2,
                    label: '发布和订阅',
                },
            ]}/>
        </Form.Item>
        <Form.Item  name="description" label="描述" rules={[{ required: false }]}>
          <TextArea showCount maxLength={100}  style={{height: 120, resize: 'none'}} placeholder="请输入描述"  />
       
        </Form.Item>
        <Form.Item>
        <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
                    <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateTopis;
