/* eslint-disable no-else-return */
/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable indent */
/* eslint-disable camelcase */
/* eslint-disable no-unused-expressions */
import React, { useState, useEffect } from 'react';
import { Drawer, Form, Input, notification, Row, Col, Select, Button, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import styles from './patrolFeedback.less';
import {
  CM_Feedback_LoadFeedbackTables,
  CM_Feedback_LoadFeedbackEvent,
  CM_Feedback_OperatePatrolFeedback,
  CM_Feedback_LoadFields,
  CM_Feedback_QueryPatrolFeedback,
} from '@/services/PatrolFeedback/api';
import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api';
import RMSComponents from '@/components/RolePmSite/index';

import ChangeRoles from './ChangeRoles';
import ChangeFields from './ChangeFields';

const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;

  const [filed, setFiled] = useState({}); // 传给子组件列表数据
  const [filed1, setFiled1] = useState({}); // 传给子组件列表数据
  const [pickItem, setPickItem] = useState(''); // 复选框数据填入项
  const [checkedList1, setCheckedList1] = useState([]); // 最新选择数据

  const [feedbackTable, setFeedbackTable] = useState([]);
  const [feedbackEvent, setFeedbackEvent] = useState([]);
  const [isVisibleFields, setIsVisibleFields] = useState(false);
  const [isVisibleRoles, setIsVisibleRoles] = useState(false);
  const [nu, setNu] = useState([]);
  const [nu1, setNu1] = useState([]);
  const [groupName, setGroupName] = useState('角色');
  const [chooseGroupName, setChooseGroupName] = useState(['角色', '部门', '站点']);
  const [keepFiled, setKeepFiled] = useState([]);

  const [form] = Form.useForm();
  const { Item } = Form;

  useEffect(() => {
    if (visible) {
      getFeedbackTable();
      getRoles();
      if (type === 'edit') {
        CM_Feedback_QueryPatrolFeedback({ id: formObj.id }).then(res => {
          form.setFieldsValue({ ...res.data });
        });
      }
    } else {
      form.resetFields();
    }
  }, [visible]);

  const getFeedbackTable = () => {
    CM_Feedback_LoadFeedbackTables().then(res => {
      if (res.code === 0) {
        setFeedbackTable(res.data);
      }
    });
    CM_Feedback_LoadFeedbackEvent().then(res => {
      if (res.code === 0) {
        setFeedbackEvent(res.data);
        if (type == 'add') {
          form.setFieldsValue({ eventName: res.data[0].Name });
        }
      }
    });
  };

  const getFields = e => {
    CM_Feedback_LoadFields(e).then(res => {
      if (res.code === 0) {
        setNu(res.data);
        setFiled(formateArrDataA(res.data, 'groupName'));
      }
    });
  };

  const getRoles = () => {
    CM_Event_LoadDepartmentAndRoles().then(res => {
      if (res.code === 0) {
        setNu1(res.data);
        // setFiled1(formateArrDataA1(res.data, 'groupType'));
        setKeepFiled(groupArr(res.data, 'groupType'));
      }
    });
  };

  const groupArr = (initialArr, name) => {
    let list = {};
    initialArr.data.map(i => {
      let ar = [];
      i.root.map(j => {
        let ss = {};
        ss.label = j.Name;
        ss.value = j.ID.toString();
        ar.push(ss);
      });
      list[i.groupType] = ar;
    });
    return list;
  };

  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        CM_Feedback_OperatePatrolFeedback({
          ...obj,
          id: formObj.id,
        }).then(res => {
          if (res.msg == '') {
            form.resetFields();
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: type == 'add' ? '添加成功' : '编辑成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  const pickFiled = fileds => {
    if (form.getFieldsValue().tableName) {
      let pp = formateArrDataA(nu, 'groupName');
      if (form.getFieldValue(fileds)) {
        let ab = form.getFieldValue(fileds).split(',');
        let arr = Object.keys(pp);
        let b = [];
        let a = [];
        arr.map((item, index) => {
          pp[item].map((i, j) => {
            b.push(i);
          });
        });
        ab.map((item, index) => {
          if (b.includes(item) == false) {
            if (item == '') {
              a = [];
            } else {
              a.push(item);
            }
          }
        });
        if (a.length > 0) {
          pp.外部字段 = a;
          arr.push('外部字段');
        }
        setFiled(pp);
        setCheckedList1(form.getFieldValue(fileds).split(','));
        setPickItem(fileds);
        setIsVisibleFields(true);
      } else {
        setFiled(pp);
        setCheckedList1([]);
        setPickItem(fileds);
        setIsVisibleFields(true);
      }
    } else {
      notification.warning({
        message: '提示',
        duration: 3,
        description: '请先选择反馈名称',
      });
    }
  };
  const pickFiled1 = fileds => {
    if (form.getFieldValue(fileds)) {
      setCheckedList1(form.getFieldValue(fileds).split(','));
      setPickItem(fileds);
      setIsVisibleRoles(true);
    } else {
      setCheckedList1([]);
      setPickItem(fileds);
      setIsVisibleRoles(true);
    }
  };

  const onChangeTableName = e => {
    getFields(e);
  };

  const formateArrDataA = (initialArr, name) => {
    // 判定传参是否符合规则
    if (!(initialArr instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    for (let i in initialArr) {
      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
        nameArr.push(initialArr[i][`${name}`]);
      }
    }
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in initialArr) {
        if (initialArr[j][`${name}`] == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(initialArr[j]);
        }
      }
    }
    for (let keys in tempObj) {
      let arr = [];
      tempObj[keys].map((item, index) => {
        tempObj[keys] = arr;
        item.key = index;
        arr.push(item);
      });
    }
    Object.keys(tempObj).map((i, j) => {
      tempObj[i].map((k, y) => {
        tempObj[i][y] = k.fieldName;
      });
    });
    return tempObj;
  };

  const formateArrDataA1 = (initialArr, name) => {
    let aa = [];
    let a1 = [];
    let a2;
    let a3 = [];
    initialArr.data.map(i => {
      // console.log(i.groupType)
      a2 = i.groupType;
      // console.log(a2)
      // console.log(i.root)
      a1 = i.root;
      a1.map(j => {
        j.group = a2;
        // console.log(j)
      });
      aa.push(i.root);
    });
    // console.log(aa)
    aa.map(p => {
      // console.log(p)
      p.map(o => {
        // console.log(o)
        a3.push(o);
      });
    });
    console.log(a3);

    // 判定传参是否符合规则
    if (!(a3 instanceof Array)) {
      return '请传入正确格式的数组';
    }
    if (!name) {
      return '请传入对象属性';
    }
    // 先获取一下这个数组中有多少个"name"
    let nameArr = [];
    a3.map(i => {
      if (nameArr.indexOf(i.group) === -1) {
        nameArr.push(i.group);
      }
    });
    console.log(nameArr);
    // 新建一个包含多个list的结果对象
    let tempObj = {};
    // 根据不同的"name"生成多个数组
    for (let k in nameArr) {
      for (let j in a3) {
        if (a3[j].group == nameArr[k]) {
          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
          tempObj[nameArr[k]].push(a3[j]);
        }
      }
    }

    for (let key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.Name);
      });
    }
    console.log(tempObj);
    return tempObj;
  };

  const onOK = prop => {
    setIsVisibleRoles(false);
    let inputText = {};
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
  };

  const onOK1 = prop => {
    setIsVisibleFields(false);
    let inputText = {};
    inputText[prop.pickItem] = prop.str;
    setCheckedList1(prop.stt);
    form.setFieldsValue(inputText);
  };
  return (
    <Drawer
      title="反馈配置"
      visible={visible}
      destroyOnClose
      width="550px"
      {...props}
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
        <Row>
          <Col span={23}>
            <Item
              label="巡检对象"
              name="layerName"
              labelCol={{ span: 4 }}
              rules={[
                {
                  validator: (rule, value) => {
                    let aa = form.getFieldValue().layerName;
                    if (type === 'add' && keepTableData.indexOf(aa) != -1) {
                      return Promise.reject('巡检对象已存在');
                    } else if (
                      type === 'edit' &&
                      keepTableData.indexOf(aa) != -1 &&
                      aa != formObj.layerName
                    ) {
                      return Promise.reject('巡检对象已存在');
                    }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <Input placeholder="巡检对象名称不可重复" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="GIS图层" name="gisLayer" labelCol={{ span: 4 }}>
              <Input placeholder="请输入GIS图层" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="GIS条件" name="gisFilterValue" labelCol={{ span: 4 }}>
              <Input placeholder="请输入GIS条件" />
            </Item>
          </Col>
          <Col span={23}>
            <Item label="反馈表" name="tableName" labelCol={{ span: 4 }}>
              <Select placeholder="选择反馈表" onChange={onChangeTableName} showSearch>
                {feedbackTable
                  ? feedbackTable.map((item, index) => (
                      <Option key={index} value={item.text}>
                        {item.text}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col>
          <Col span={23}>
            <Item label="字段集" name="fields" labelCol={{ span: 4 }}>
              <div style={{ display: 'flex' }}>
                <Item name="fields" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择字段集" allowClear />
                </Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled('fields')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          {/* <Col span={23}>
            <Item label="异常值" name="exceptionValue" labelCol={{ span: 4 }}>
              <Input placeholder="请输入异常值" />
            </Item>
          </Col> */}
          {/* <Col span={23}>
            <Item label="触发事件" name="eventName" labelCol={{ span: 4 }}>
              <Select placeholder="选择触发事件" showSearch>
                {feedbackEvent
                  ? feedbackEvent.map((item, index) => (
                      <Option key={index} value={item.Name}>
                        {item.Name}
                      </Option>
                    ))
                  : ''}
              </Select>
            </Item>
          </Col> */}
          <Col span={23}>
            <Item label="权限" name="roles" labelCol={{ span: 4 }}>
              <div style={{ display: 'flex' }}>
                <Item name="roles" style={{ marginBottom: 0, width: '100%' }}>
                  <Input placeholder="请选择字段集" allowClear />
                </Item>
                <Button
                  type="dashed"
                  onClick={() => pickFiled1('roles')}
                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
                  style={{ marginLeft: '10px', width: '70px' }}
                />
              </div>
            </Item>
          </Col>
          {/* <Col span={23}>
            <Item label="分组" name="groupType" labelCol={{ span: 4 }}>
              <Input placeholder="请输入分组" />
            </Item>
          </Col> */}
        </Row>
      </Form>
      <ChangeFields
        visible={isVisibleFields}
        callBackSubmit={onOK1}
        onCancel={() => setIsVisibleFields(false)}
        newCheckedList={checkedList1}
        filed={filed}
        pickItem={pickItem}
        formObj={formObj}
      />
      {/* <ChangeRoles
        visible={isVisibleRoles}
        onCancel={() => setIsVisibleRoles(false)}
        callBackSubmit={onOK}
        newCheckedList={checkedList1}
        filed11={filed1}
        pickItem={pickItem}
      /> */}
      <RMSComponents
        visible={isVisibleRoles}
        onCancel={() => setIsVisibleRoles(false)}
        callBackSubmit={onOK}
        newCheckedList={checkedList1} // 单选框中的值
        pickItem={pickItem}
        groupName={groupName} // 打开组件展示的分组名，用来首次获取数据
        chooseGroupName={chooseGroupName} // 可选分组名
        keepFiled={keepFiled}
      />
    </Drawer>
  );
};
export default AddModal;
