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();
    props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result });
  };

  useEffect(() => {
    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 => {
    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="企业微信">企业微信</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: '请输入第三方模板名称',
                      },
                    ]}
                  >
                    <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>
            </>
          ) : (
            ''
          )}
          {form.getFieldsValue().type !== '企业微信' &&
          form.getFieldsValue().type !== 'APP' &&
          form.getFieldsValue().type !== 'WEB' ? (
            <>
              <Row>
                <Col span={12}>
                  <Item
                    label="第三方模板名称"
                    name="third_name"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    rules={[
                      {
                        required: true,
                        message: '请输入第三方模板名称',
                      },
                    ]}
                  >
                    <Select
                      placeholder="请选择模板名称"
                      style={{ width: '120%' }}
                      onChange={(value, option) => onChange(value, option)}
                    >
                      {templateName &&
                        templateName.length > 0 &&
                        templateName.map((item, index) => (
                          <Option value={item.Name} key={item.Name + index} code={item.Code}>
                            {item.Name}
                          </Option>
                        ))}
                    </Select>
                  </Item>
                </Col>
                <Col span={12}>
                  <Item
                    label="第三方模板编号"
                    wrapperCol={{ span: 12 }}
                    labelCol={{ span: 12 }}
                    name="third_id"
                    rules={[
                      {
                        required: true,
                        message: '请输入第三方模板编号',
                      },
                    ]}
                  >
                    <Input placeholder="请输入模板名称" style={{ width: '85%' }} />
                  </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="参数说明" 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;