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 EditModal = props => {
  const { option, visible, messageVersion } = props;

  const [form] = Form.useForm();
  const [templateName, setTemplateName] = useState([]);
  const [loading, setLoading] = useState(false);
  const [flag, setFlag] = useState(0);
  const onSubmit = () => {
    form.submit();
  };
  const onSubmitSuccess = () => {
    const result = form.getFieldValue();
    if (result.type == 'APP' || result.type == 'WEB') {
      delete result.third_id;
      delete result.third_name;
      delete result.weixin;
    }
    props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result });
    form.resetFields();
  };

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        name: props.template.name,
        type: props.template.type,
        third_name: props.template.third_name == '-' ? '' : props.template.third_name,
        third_id: props.template.third_id == '-' ? '' : props.template.third_id,
        weixin: props.template.weixin == '-' ? '' : props.template.weixin,
        params: props.template.template_params1 == '-' ? '' : props.template.template_params1,
        param1: props.template.template_params2 == '-' ? '' : props.template.template_params2,
        desc: props.template.desc == '-' ? '' : props.template.desc,
        analysis_params:
          props.template.analysis_params == '-' ? '' : props.template.analysis_params,
      });
      setTimeout(() => {
        console.log(form.getFieldsValue().type);
        setFlag(flag + 1);
      }, 0);

      if (option) {
        setTemplateName(option.filter(item => item.Type === props.template.type));
      }
    }
  }, [props.template, visible]);

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 10,
    },
    wrapperCol: {
      span: 19,
    },
  };

  const onChangeType = value => {
    form.setFieldsValue({ third_name: '', third_id: '', weixin: '' });
    console.log(option.filter(item => item.Type === value), '123');
    setTemplateName(option.filter(item => item.Type === value));
  };
  const onChange = (value, options) => {
    form.setFieldsValue({
      third_id: options.code,
    });
    // setTemplateName(option.filter(item => item.Type === value))
  };

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

  return (
    <SiteModal
      {...props}
      title={
        <span>
          <span style={{ marginRight: '20px' }}>
            <span>模板编辑</span>
          </span>
          <span style={{ fontSize: '14px' }}>当前解析版本规则</span>
          <span style={{ color: 'rgb(24, 144, 255)' }}>{messageVersion}</span>
        </span>
      }
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: 200, borderRadius: '20px' }}
      width="820px"
      destroyOnClose
      afterClose={() => {
        form.resetFields();
      }}
      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="APP">APP</Select.Option>
                  <Select.Option value="WEB">WEB</Select.Option>
                  <Select.Option value="企业微信">企业微信</Select.Option>
                </Select>
              </Item>
            </Col>
          </Row>
          {form.getFieldsValue().type === 'APP' || form.getFieldsValue().type === 'WEB' ? (
            <></>
          ) : (
            <>
              {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 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="API解析参数(仅针对2.0规则)" labelCol={{ span: 6 }} name="param1">
            <TextArea rows={2} style={{ width: '95%' }} placeholder="first|Second|Third|Four" />
          </Item>
          <Item label="参数说明" labelCol={{ span: 6 }} name="desc">
            <TextArea
              style={{ width: '95%' }}
              rows={4}
              placeholder="first: 标题信息|Second: 展示内容|Third: 时间|Four: 备注信息"
            />
          </Item>
          <Item label="解析规则版本(仅针对1.0规则)" labelCol={{ span: 6 }} name="analysis_params">
            <TextArea style={{ width: '95%' }} rows={2} placeholder="param1|param2|param3|param4" />
          </Item>
        </Form>
      </div>
    </SiteModal>
  );
};
export default EditModal;
