import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Space, TreeSelect, Empty, Switch, Button, message } from 'antd';
import { FolderFilled, FileOutlined, MobileOutlined } from '@ant-design/icons';
import { AddWechatStatus } from '@/services/messagemanage/messagemanage';
const { Option } = Select;
const { TextArea } = Input;
const { TreeNode } = TreeSelect;
const typeList = [{ name: '报警通知', value: 1 }, { name: '运行简报', value: 2 }];

const WeChatConfig = props => {
  const { menuMoblieList, formValue, id, template } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    getFormData();
  }, []);

  const getFormData = () => {
    console.log(formValue, 'formValue');
    if (formValue) {
      form.setFieldsValue({ ...formValue, WechatStatus: formValue.WechatStatus === 1 });
    }
  };
  // 监听表单
  const changeValue = (changedFields, allFields) => {
    // console.log(Object.keys(changedFields), allFields, 'changedFields');
    if (Object.keys(changedFields)[0] === 'WechatContent') {
      let regex = /\{@(.+?)\}/g;
      let originalList = allFields.lines || [];
      let list = changedFields.WechatContent.match(regex)?.map(item => {
        let Name = item.substring(2, item.length - 1);
        let orgItem = originalList.find(ele => ele.Name === Name);
        return {
          Name,
          Description: orgItem ? orgItem.Description : '',
          DefaultValue: orgItem ? orgItem.DefaultValue : '',
        };
      });
      if (list) {
        form.setFieldsValue({ lines: list });
      } else {
        form.setFieldsValue({ lines: [] });
      }
    }
    if (Object.keys(changedFields)[0] === 'WechatType') {
      let content = template.find(item => item.id === changedFields.WechatType);
      let regex = /\{@(.+?)\}/g;
      let list = content.Param.match(regex)?.map(item => {
        let Name = item.substring(2, item.length - 1);
        return {
          Name,
          Description: '',
          DefaultValue: '',
        };
      });
      form.setFieldsValue({ WechatContent: content.Param, lines: list, WechatCode: content.Code });
    }
  };
  const mapAppTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    let icon;
    let value = org.id;

    if (org.menuType === 'MiniAppsingleStation') {
      value = org.stationID;
      icon = <MobileOutlined />;
    }
    if (org.menuType === 'MiniAppMenuGroup' || org.menuType === '"MiniAppMenuGroupTwo"') {
      value = org.id;
      icon = <FolderFilled />;
    }
    if (org.menuType === 'MiniAppMenuThree' || org.menuType === 'MiniAppMenu') {
      icon = <FileOutlined style={{ color: '#1890ff' }} />;
      value = org.pageUrl || org.id;
    }

    return (
      <TreeNode
        value={value}
        title={org.text}
        icon={icon}
        key={value}
        disabled={org.menuType !== 'MiniAppMenuThree' && org.menuType !== 'MiniAppMenu'}
      >
        {haveChildren ? org.children.map(item => mapAppTree(item)) : null}
      </TreeNode>
    );
  };
  const onFinish = () => {
    if (!id) {
      message.error('请保存基础信息');
      return;
    }
    form.validateFields().then(values => {
      let value = JSON.parse(JSON.stringify(values));
      AddWechatStatus({
        ...value,
        WechatStatus: value.WechatStatus ? 1 : 0,
        id,
      }).then(res => {
        if (res.code === 0) {
          message.success('保存成功');
        } else {
          message.error(res.msg);
        }
      });
    });
  };
  return (
    <div>
      <Form
        form={form}
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        onValuesChange={changeValue}
        labelAlign="left"
      >
        <div style={{ display: 'flex' }}>
          <Form.Item
            label="消息类型"
            name="WechatType"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            style={{ width: '400px', marginRight: '15px', display: 'block' }}
          >
            <Select placeholder="请选择消息类型">
              {template.map(item => (
                <Option value={item.id} key={item.id}>
                  {item.Name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label="模板编号"
            name="WechatCode"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
          >
            <Input placeholder="请填写消息标题" />
          </Form.Item>
          <Form.Item
            label="是否开启"
            name="WechatStatus"
            valuePropName="checked"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
          >
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        </div>
        <Form.Item label="跳转路径" name="WechatUrl" style={{ display: 'block', width: '1200px' }}>
          <Input placeholder="请填写跳转路径" />
          {/* <TreeSelect
            showSearch
            treeNodeFilterProp="title"
            treeNodeLabelProp="value"
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择功能路径"
            allowClear
            treeDefaultExpandAll
            treeIcon
          >
            {menuMoblieList ? (
              menuMoblieList.map(item => mapAppTree(item))
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </TreeSelect> */}
        </Form.Item>
        <Form.Item label="内容" name="WechatContent" style={{ display: 'block', width: '1200px' }}>
          <TextArea rows={6} placeholder="请输入内容" />
        </Form.Item>
        <Form.List name="lines">
          {fields => (
            <>
              {fields.map(({ key, name, ...restField }) => (
                <Space
                  key={key}
                  style={{
                    display: 'flex',
                    marginBottom: 8,
                  }}
                  align="baseline"
                >
                  <Form.Item
                    {...restField}
                    label="参数名"
                    name={[name, 'Name']}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                  >
                    <Input readOnly />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, 'Description']}
                    label="含义"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    rules={[
                      {
                        required: true,
                        message: '请填写含义',
                      },
                    ]}
                  >
                    <Input placeholder="请填写含义" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, 'DefaultValue']}
                    label="默认值"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    // rules={[
                    //   {
                    //     required: true,
                    //     message: '请填写默认值',
                    //   },
                    // ]}
                  >
                    <Input placeholder="请填写默认值" />
                  </Form.Item>
                  {/* <MinusCircleOutlined onClick={() => remove(name)} /> */}
                </Space>
              ))}
              {/* <Form.Item>
            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
              Add field
            </Button>
          </Form.Item> */}
            </>
          )}
        </Form.List>
        <Form.Item>
          <Button type="primary" onClick={onFinish}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default WeChatConfig;
