import React, { useState, useEffect } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select, Row, Col } from 'antd';

const { Item } = Form;
const { TextArea } = Input;

const AddModal = props => {
  const { option } = props;

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [templateName, setTemplateName] = useState([]);
  const onSubmit = () => {
    form.submit();
  };
  const onSubmitSuccess = () => {
    const result = form.getFieldValue();
    props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result });
    form.resetFields();
  };
  useEffect(() => {
    console.log(option);
    if (option) {
      setTemplateName(option.filter(item => item.Type === '公众号'));
      form.setFieldsValue({
        type: '公众号',
      });
    }
  }, [props]);
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 19,
    },
  };
  // useEffect(()=>{

  // },[props.template])
  const onChange = (value, option) => {
    form.setFieldsValue({
      third_id: option.code,
    });
    // setTemplateName(option.filter(item => item.Type === value))
  };
  const onChangeType = value => {
    setTemplateName(option.filter(item => item.Type === value));
    console.log(option.filter(item => item.Type === value));
  };

  const onChangeType1 = value => {
    form.setFieldsValue({
      third_id: value,
    });
  };

  return (
    <SiteModal
      {...props}
      title="模板添加"
      style={{ top: 200, borderRadius: '20px' }}
      width="820px"
      destroyOnClose
      cancelText="取消"
      okText="确认"
      onOk={() => onSubmit()}
      confirmLoading={loading}
    >
      <div style={{ height: '500px', overflowY: 'scroll', overflowX: 'hidden' }}>
        <Form form={form} {...layout} onFinish={onSubmitSuccess}>
          <Row>
            <Col span={3} />
            <Col span={12}>
              <Item
                label="模板名称"
                name="name"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                rules={[
                  {
                    required: true,
                    message: '请输入模板名称',
                  },
                ]}
              >
                <Input style={{ width: '80%' }} placeholder="请输入模板名称" />
              </Item>
            </Col>
            <Col span={9}>
              <Item
                label="模板类型"
                name="type"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                rules={[
                  {
                    required: true,
                    message: '请选择模板类型',
                  },
                ]}
              >
                <Select style={{ width: '85%' }} onChange={value => onChangeType(value)}>
                  <Select.Option value="公众号">公众号</Select.Option>
                  <Select.Option value="短信">短信</Select.Option>
                  <Select.Option value="企业微信">企业微信</Select.Option>
                </Select>
              </Item>
            </Col>
          </Row>

          {form.getFieldsValue().type !== '企业微信' ? (
            <>
              <Row>
                <Col span={12}>
                  <Item
                    label="请选择第三方模板名称"
                    name="third_name"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    rules={[
                      {
                        required: true,
                        message: '请选择第三方模板名称',
                      },
                    ]}
                  >
                    {/* <Input placeholder="请输入模板名称" /> */}
                    <Select
                      placeholder="请选择模板名称"
                      style={{ width: '120%' }}
                      onChange={(value, option) => onChange(value, option)}
                    >
                      {templateName &&
                        templateName.length > 0 &&
                        templateName.map((item, index) => (
                          <Select.Option value={item.Name} key={index} code={item.Code}>
                            {item.Name}
                          </Select.Option>
                        ))}
                    </Select>
                  </Item>
                </Col>
                <Col span={12}>
                  <Item
                    label="第三方模板编号"
                    name="third_id"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    rules={[
                      {
                        required: true,
                        message: '请输入第三方模板编号',
                      },
                    ]}
                  >
                    <Input disabled placeholder="请输入第三方模板编号" style={{ width: '85%' }} />
                  </Item>
                </Col>
              </Row>
            </>
          ) : (
            <>
              <Row>
                <Col span={12}>
                  <Item
                    label="请选择第三方模板名称"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    name="third_name"
                    rules={[
                      {
                        required: true,
                        message: '请选择第三方模板名称',
                      },
                    ]}
                  >
                    <Select
                      style={{ width: '120%' }}
                      onChange={value => onChangeType1(value)}
                      placeholder="请选择模板名称"
                    >
                      <Select.Option value="普通文本">普通文本</Select.Option>
                      <Select.Option value="文字卡片">文字卡片</Select.Option>
                      <Select.Option value="图片消息">图片消息</Select.Option>
                      <Select.Option value="图片">图片</Select.Option>
                    </Select>
                  </Item>
                </Col>
                <Col span={12}>
                  <Item
                    label="企业微信应用id"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    name="weixin"
                    rules={[
                      {
                        required: true,
                        message: '请输入企业微信号',
                      },
                    ]}
                  >
                    <Input placeholder="请输入企业微信号" style={{ width: '160px' }} />
                  </Item>
                </Col>
              </Row>
            </>
          )}

          <Item label="模板参数(仅限2.0)" labelCol={{ span: 6 }} name="params">
            <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" />
          </Item>
          <Item label="模板参数(仅限2.0)" labelCol={{ span: 6 }} name="param1">
            <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" />
          </Item>
          <Item label="参数说明" name="desc" labelCol={{ span: 6 }}>
            <TextArea
              style={{ width: '95%' }}
              rows={4}
              placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息"
            />
          </Item>
          <Item label="解析规则(仅限1.0)" name="analysis_params" labelCol={{ span: 6 }}>
            <TextArea rows={2} style={{ width: '95%' }} placeholder="param1|param2|param3|param4" />
          </Item>
        </Form>
      </div>
    </SiteModal>
  );
};
export default AddModal;
