/* eslint-disable global-require */
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Space, TreeSelect, Empty, Switch, Button, message } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import {
  DeleteOutlined,
  PictureOutlined,
  DesktopOutlined,
  FolderFilled,
  FileOutlined,
  MobileOutlined,
} from '@ant-design/icons';
import { AddPlatformStatus } from '@/services/messagemanage/messagemanage';
import { GetMessageIcon } from '@/services/messagemanage/messagemanage';
import styles from './PlatformConfig.less';
import PreviewModal from '../../schemeDetail/PreviewModal';
const { Option } = Select;
const { TreeNode } = TreeSelect;
const typeList = [
  { name: '通用报警', value: 1 },
  { name: '工单通知', value: 2 },
  { name: '系统通知', value: 3 },
  { name: '自定义', value: 4 },
];
const modules = {
  // toolbar: { container: '#toolbar' },
  toolbar: [
    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    [{ font: [] }],
    [{ align: [] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
    ['clean'], // 清空
  ],
};
const defaultWebIcon = require('../../../../../assets/images/icons/imgNone.png'); // 默认图标
const PlatformConfig = props => {
  const { menuWebList, menuMoblieList, formValue, id } = props;
  const [iconMaskShow, setIconMaskShow] = useState(false);
  const [previewModal, setPreviewModal] = useState(false); // 图片选择
  const [imgDataList, setImgDataList] = useState([]);
  const [editor, setEditor] = useState(null);
  // 编辑器内容
  const [html, setHtml] = useState();
  const toolbarConfig = {};
  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {},
      lineHeightList: ['1', '1.5', '2', '2.5'],
    },
  };
  const [form] = Form.useForm();
  useEffect(() => {
    getMessageIcon();
    getFormData();
  }, []);
  const getFormData = () => {
    console.log(formValue, 'formValue');
    if (formValue) {
      form.setFieldsValue({
        ...formValue,
        PlatformIcon: `${window.location.origin}/${formValue.PlatformIcon}`,
        PlatformStatus: formValue.PlatformStatus === 1,
      });
      setHtml(formValue.PlatformContent);
      if (!formValue?.PlatformIcon) {
        form.setFieldsValue({ PlatformIcon: defaultWebIcon });
      }
    }
  };
  // 获取图片库
  const getMessageIcon = () => {
    GetMessageIcon().then(res => {
      setImgDataList(res.data);
    });
  };
  const callBackSubmit = value => {
    console.log(value, 'lvaue');
    form.setFieldsValue({ PlatformIcon: `${window.location.origin}/${value}` });
  };
  // 监听表单
  const changeValue = (changedFields, allFields) => {
    // if (Object.keys(changedFields)[0] === 'PlatformContent') {
    //   let regex = /\{@(.+?)\}/g;
    //   let originalList = allFields.lines || [];
    //   let list = changedFields.PlatformContent.getHtml()
    //     .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: [] });
    //   }
    // }
  };
  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    let icon;
    let value = org.id;
    if (org.menuType === 'Web4singleStation') {
      value = org.stationID;
      icon = <DesktopOutlined />;
    }
    if (org.menuType === 'Web4MenuGroup') {
      value = org.id;
      icon = <FolderFilled />;
    }
    if (org.menuType === 'Web4Menu') {
      icon = <FileOutlined style={{ color: '#1890ff' }} />;
      value = org.pageUrl;
    }

    return (
      <TreeNode
        value={value}
        title={org.text}
        key={value}
        icon={icon}
        disabled={org.menuType !== 'Web4Menu'}
      >
        {haveChildren ? org.children.map(item => mapTree(item)) : null}
      </TreeNode>
    );
  };
  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 editorChange = editor => {
    let regex = /\{@(.+?)\}/g;
    let originalList = form.getFieldValue('lines') || [];
    let list = editor
      .getHtml()
      .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: [] });
    }
    setHtml(editor.getHtml());
  };
  const onFinish = () => {
    if (!id) {
      message.error('请保存基础信息');
      return;
    }
    form.validateFields().then(values => {
      console.log(values, 'values');
      let value = JSON.parse(JSON.stringify(values));
      console.log(value);
      let PlatformIcon =
        value.PlatformIcon === defaultWebIcon ? '' : new URL(value.PlatformIcon).pathname;
      PlatformIcon = PlatformIcon.substring(1);
      console.log(PlatformIcon, 'PlatformIcon');
      if (value)
        AddPlatformStatus({
          ...value,
          PlatformIcon,
          PlatformStatus: value.PlatformStatus ? 1 : 0,
          PlatformContent: html,
          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="PlatformType"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            style={{ width: '400px', marginRight: '15px', display: 'block' }}
          >
            <Select placeholder="请选择消息类型" allowClear>
              {typeList.map(item => (
                <Option value={item.value} key={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item> */}
          <Form.Item
            label="消息标题"
            name="PlatformTitle"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
          >
            <Input placeholder="请填写消息标题" />
          </Form.Item>
          <Form.Item
            label="是否开启"
            name="PlatformStatus"
            valuePropName="checked"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
          >
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        </div>
        <Form.Item
          label="网页跳转路径"
          name="PlatformWebUrl"
          style={{ display: 'block', width: '1200px' }}
        >
          <TreeSelect
            showSearch
            treeNodeFilterProp="title"
            treeNodeLabelProp="value"
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择功能路径"
            allowClear
            treeDefaultExpandAll
            treeIcon
          >
            {menuWebList ? (
              menuWebList.map(item => mapTree(item))
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </TreeSelect>
        </Form.Item>
        <Form.Item
          label="APP跳转路径"
          name="PlatformAppUrl"
          style={{ display: 'block', width: '1200px' }}
        >
          <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="PlatformVideoUrl"
          style={{ display: 'block', width: '1200px' }}
        >
          <Input placeholder="请填写视频地址" />
        </Form.Item>
        <Form.Item label="图标" style={{ display: 'block' }}>
          <div
            className={styles.formImg}
            onMouseEnter={() => {
              if (form.getFieldValue('PlatformIcon') !== defaultWebIcon) {
                setIconMaskShow(true);
              }
            }}
            onMouseLeave={() => setIconMaskShow(false)}
          >
            <div className={styles.mask} style={{ display: iconMaskShow ? 'flex' : 'none' }}>
              <DeleteOutlined
                className={styles.icon}
                onClick={() => form.setFieldsValue({ PlatformIcon: defaultWebIcon })}
              />
              <PictureOutlined className={styles.icon} onClick={() => setPreviewModal(true)} />
            </div>
            <Form.Item name="PlatformIcon" valuePropName="src" initialValue={defaultWebIcon}>
              <img alt="" onClick={() => setPreviewModal(true)} />
            </Form.Item>
          </div>
        </Form.Item>
        <Form.Item
          label="内容"
          style={{ display: 'block', width: '1200px', height: '350px', marginBottom: '45px' }}
        >
          <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            <Toolbar
              editor={editor}
              defaultConfig={toolbarConfig}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              defaultConfig={editorConfig}
              value={html}
              onCreated={setEditor}
              onChange={editor => editorChange(editor)}
              mode="default"
              style={{ height: '250px', overflowY: 'hidden' }}
            />
          </div>
          {/* <ReactQuill
            style={{ height: '150px' }}
            placeholder="请输入内容"
            modules={modules}
            theme="snow" // 主题
          /> */}
        </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 }}
                  >
                    <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>
      <PreviewModal
        visible={previewModal}
        onCancel={() => {
          setPreviewModal(false);
        }}
        keepImgeUrl={form.getFieldValue('PlatformIcon')?.replace(`${window.location.origin}/`, '')}
        imgDataList={imgDataList}
        callBackSubmit={callBackSubmit}
      />
    </div>
  );
};

export default PlatformConfig;
