import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Input,
  Select,
  Radio,
  Checkbox,
  notification,
  Tooltip,
  Drawer,
  Space,
  Button,
} from 'antd';

import {
  getField,
  loadTableFields,
  LoadEventFields,
  LoadEventType,
  UpdateFields,
} from '@/services/platform/bs';
import styles from './index.less';
import ChangeAdd from './changeAdd';
import { PlusSquareOutlined } from '@ant-design/icons';
import { shape } from 'prop-types';
const AddModal = props => {
  const {
    callBackSubmit = () => {},
    isType,
    itemData,
    isVisible,
    formObj1,
    onCancel,
  } = props;
  const [loading, setLoading] = useState(false);
  const [fieldName, setFieldName] = useState([]); // 弹窗
  const [eventList, setEventList] = useState([]); // 事件
  const [filed, setFiled] = useState({}); // 事件
  const [verification, setVerification] = useState([]);
  const [Shape, setShape] = useState('文本');
  const [characteristics, setCharacteristics] = useState([
    '文本',
    '数值',
    '唯一值文本',
    '多行文本',
    '编码',
    '地址',
    '本人部门',
    '本人姓名',
    '本人ID',
    '选择器',
    '搜索选择器',
    '值选择器',
    '值复选器',
    '业务选择器',
    '可编辑值选择器',
    '平铺值选择器',
    '站点选择器',
    '人员选择器',
    '人员选择器新',
    '城市选择器',
    '台账选择器',
    '附件',
    '可预览附件',
    '图片',
    '可预览图片',
    '录音',
    '视频',
    '日期时间',
    '日期',
    '日期月份',
    '日期年份',
    '日期周',
    '时分秒',
    '设备选择',
    '坐标控件',
    '区域控件',
    '路径控件',
    '智能抄表',
    '二维码识别',
    '设备二维码',
    '位置坐标',
  ]);
  const [visible, setVisible] = useState(false); // 弹窗
  const [isShow, setIsShow] = useState(false); // 弹窗
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({ rule: [], numerical: '' });
  const [characterValue, setCharacterValue] = useState('');
  const [pramData, setPramData] = useState({
    Unit: '',
    ExceptionEvent: '',
    Group: '',
    RowSpan: 0,
    ColSpan: 0,
    ReadOnly: false,
    EditableLater: false,
    ExceptionValue: '',
    Preset: '',
    picture: false,
    must: false,
    coordinates: false,
  });
  const [checkedList, setCheckedList] = useState([]); //选中的复选框内容
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    console.log(itemData, 'itemData');
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let data = [
          {
            Unit: pramData.Unit || '',
            StoreType: 'nvarchar(255)',
            Group: pramData.Group || '',
            Shape,
            ExceptionEvent: pramData.ExceptionEvent || '',
            RowSpan: Number(pramData.RowSpan) || 0,
            ColSpan: pramData.ColSpan || 0,
            ReadOnly: pramData.ReadOnly || false,
            EditableLater: pramData.EditableLater || false,
            ExceptionValue: pramData.ExceptionValue || '',
            Preset: pramData.Preset || '',
            ID: Number(itemData.ID),
            Order: Number(itemData.order),
            Name: obj.Name,
            Alias: obj.Alias,
            SyncEvent: obj.SyncEvent,
            ValidationRule: obj.ValidationRule,
            ExceptionEventFields: characterValue,
          },
        ];

        switch (Shape) {
          case '编码':
            data[0].Config = `${obj.code}.${obj.prefix ? obj.prefix : ''}`;
            break;
          case '坐标控件':
            pramData.coordinates
              ? (data[0].Config = '当前坐标')
              : (data[0].Config = '');
            break;
          case '图片':
          case '可预览图片':
            data[0].Preset = pramData.picture ? '拍照相册' : '';
            data[0].ValidationRule = pramData.must ? 'required' : '';
            break;
          default:
            data[0].Config = obj.Config;
        }
        UpdateFields(data).then(res => {
          setLoading(false);
          if (res.msg === 'Ok' || res.msg === '') {
            form.resetFields();
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: '修改成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  useEffect(() => {
    if (isType != '') {
      let req1 = getField({ fieldID: itemData.ID });
      let req2 = loadTableFields({ tableName: formObj1 });
      let req3 = LoadEventType({});
      Promise.all([req1, req2, req3]).then(res => {
        res[1].msg === 'Ok' && setFieldName(res[1].data.root);
        res[2].msg === 'Ok' && setEventList(res[2].data.root);
        if (res[0].msg === 'Ok') {
          form.setFieldsValue({ ...res[0].data.root });
          if (res[0].data.root.ExceptionEventFields === '') {
            setCharacterValue('');
            setCheckedList([]);
            setIsShow(false);
          } else {
            setIsShow(true);
            setCharacterValue(res[0].data.root.ExceptionEventFields);
            setCheckedList(res[0].data.root.ExceptionEventFields.split(','));
          }
          setShape(res[0].data.root.Shape);
          let coordinates = false,
            picture = false,
            must = false;
          switch (res[0].data.root.Shape) {
            case '坐标控件':
              res[0].data.root.Config === '当前坐标'
                ? (coordinates = true)
                : (coordinates = false);
              break;
            case '图片':
            case '可预览图片':
              res[0].data.root.Preset === '拍照相册'
                ? (picture = true)
                : (picture = false);
              res[0].data.root.ValidationRule === 'required'
                ? (must = true)
                : (must = false);
              break;
            case '编码':
              let code = res[0].data.root.Config.split('.');
              form.setFieldsValue({
                code: code[0] || '',
                prefix: code[1] === 'undefined' ? '' : code[1],
              });
              break;
          }
          setPramData({ ...res[0].data.root, coordinates, must, picture });
          let index = res[2].data.root.find(item => {
            return item.Name == res[0].data.root.ExceptionEvent;
          });
          console.log('index', index);
          getFieldData(index.TableName);
        }
      });
    }
  }, [isVisible]);

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 3,
    },
    wrapperCol: {
      span: 30,
    },
  };

  const handleChange = value => {
    form.setFieldsValue({ schemename: value });
  };

  const onOK = prop => {
    setVisible(false);
    if (type === 'rule') {
      form.setFieldsValue({ ValidationRule: prop });
    } else {
      setCheckedList(prop.checkedList);
      setCharacterValue(prop.str);
    }
  };
  const add = type => {
    let obj = form.getFieldsValue();
    let data = { ...formObj };
    if (obj.ValidationRule) {
      let arr = obj.ValidationRule.split(',');
      arr.map(item => {
        switch (item) {
          case 'required':
            data.rule.push(item);
            break;
          case 'emphasis':
            data.rule.push(item);
            break;
          case 'sensitive':
            data.rule.push(item);
            break;
          default:
            data.numerical = item;
        }
      });
    } else {
      data = { rule: [], numerical: '' };
    }
    setType(type);
    setFormObj(data);
    setVisible(true);
  };

  const handleEvent = (value, e) => {
    let data = { ...pramData };
    data.ExceptionEvent = e.name;
    if (e.tablename) {
      getFieldData(e.tablename);
      setPramData(data);
    } else {
      setIsShow(false);
      setFiled({});
      setCharacterValue('');
      setCheckedList([]);
    }
  };
  const getFieldData = value => {
    LoadEventFields({ eventTableName: value, distinctFields: '' }).then(res => {
      if (res.msg === 'Ok') {
        setFiled(formateArrDataA(res.data.root, 'group'));
        setIsShow(true);
      }
    });
  };

  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 key in tempObj) {
      let arr = [];
      tempObj[key].map(item => {
        tempObj[key] = arr;
        arr.push(item.fieldName);
      });
    }
    return tempObj;
  };
  const handleCharacteristics = value => {
    let data = { ...pramData };
    setShape(value);
    data.must = false;
    data.coordinates = false;
    data.picture = false;
    data.Preset = '';
    setPramData(data);
    form.setFieldsValue({ ValidationRule: '' });
    if (value.indexOf('日期') != -1 || value === '时分秒') {
      form.setFieldsValue({ Config: undefined });
    }
  };
  const onCharacterValue = e => {
    setCharacterValue(e.target.value);
  };
  const onChangeReady = (e, str) => {
    let data = { ...pramData };
    switch (str) {
      case 'ReadOnly':
        data.ReadOnly = e.target.checked;
        break;
      case 'EditableLater':
        data.EditableLater = e.target.checked;
        break;
      case 'must':
        data.must = e.target.checked;
        break;
      case 'picture':
        data.picture = e.target.checked;
        break;
      case 'coordinates':
        data.coordinates = e.target.checked;
        break;
    }
    setPramData(data);
  };
  const handleInput = (e, str) => {
    let data = { ...pramData };
    switch (str) {
      case 'Unit':
        data.Unit = e.target.value;
        break;
      case 'RowSpan':
        data.RowSpan = e.target.value;
        break;
      case 'Preset':
        data.Preset = e.target.value;
        break;
      case 'ExceptionValue':
        data.ExceptionValue = e.target.value;
        break;
      default:
        break;
    }
    setPramData(data);
  };
  const handleSeparator = value => {
    let data = { ...pramData };
    switch (value) {
      case '6':
        data.Preset = '是';
        form.setFieldsValue({ Config: '是,否' });
        break;
      case '7':
        data.Preset = '否';
        form.setFieldsValue({ Config: '是,否' });
        break;
      case '8':
        data.Preset = '否';
        form.setFieldsValue({ Config: '否,是' });
        break;
    }
    setPramData(data);
  };
  return (
    <>
      <Drawer
        title="修改"
        width="600px"
        // {...props}
        visible={isVisible}
        onClose={onCancel}
        footer={
          <Space>
            <Button onClick={onCancel}>取消</Button>
            <Button onClick={onSubmit} type="primary">
              确定
            </Button>
          </Space>
        }
      >
        {isVisible && (
          <Form form={form} {...layout}>
            <Item
              label="字段名"
              name="Name"
              rules={[{ required: true, message: '请输入表名' }]}
            >
              <Input placeholder="请输入别名" disabled />
            </Item>
            <Item label="别名" name="Alias">
              <Input placeholder="请输入别名" allowClear />
            </Item>
            <Item name="ReadOnly" label="属性">
              <div>
                <Checkbox
                  checked={pramData.ReadOnly}
                  onChange={e => onChangeReady(e, 'ReadOnly')}
                >
                  只读
                </Checkbox>
                <Checkbox
                  checked={pramData.EditableLater}
                  onChange={e => onChangeReady(e, 'EditableLater')}
                >
                  允许补正(事后修改)
                </Checkbox>
              </div>
            </Item>
            <Item label="同步" name="SyncEvent">
              <Radio.Group>
                <Radio value={0} style={{ marginRight: '0.5rem' }}>
                  不同步
                </Radio>
                <Radio value={1} style={{ marginRight: '0.5rem' }}>
                  工单 → 事件
                </Radio>
                <Radio value={2}>事件（上报时） → 工单</Radio>
              </Radio.Group>
            </Item>

            <Item label="形态">
              <div className={styles.listEvent}>
                <Select
                  style={{ width: '42%' }}
                  value={Shape}
                  onChange={handleCharacteristics}
                >
                  {characteristics.length
                    ? characteristics.map((item, index) => {
                        return (
                          <Select.Option key={index} value={item}>
                            {item}
                          </Select.Option>
                        );
                      })
                    : ''}
                </Select>
                <div className={styles.unit}>
                  单位：
                  <Input
                    style={{ width: '5rem' }}
                    placeholder=""
                    allowClear
                    value={pramData.Unit}
                    onChange={e => handleInput(e, 'Unit')}
                  />
                </div>
                <div className={styles.unit}>
                  宽：
                  <Input
                    style={{ width: '4rem' }}
                    placeholder=""
                    allowClear
                    value={pramData.RowSpan}
                    onChange={e => handleInput(e, 'RowSpan')}
                  />
                </div>
              </div>
            </Item>
            {(() => {
              switch (Shape) {
                case '编码':
                  return (
                    <>
                      <Item label="前缀" name="prefix">
                        <Input
                          style={{ width: '95%' }}
                          placeholder=""
                          allowClear
                        />
                      </Item>
                      <Item label="编码方式" name="code">
                        <Radio.Group>
                          <Radio
                            value="年份编码"
                            style={{ marginRight: '0.5rem' }}
                          >
                            XJ-2019-000001（前缀-年份-六位编码）
                          </Radio>
                          <Radio
                            value="年月编码"
                            style={{ marginRight: '0.5rem' }}
                          >
                            XJ-201909-000001（前缀-年份月份-六位编码）
                          </Radio>
                          <Radio value="一般编码" defaultChecked>
                            XJ00000001（前缀 八位编码）
                          </Radio>
                        </Radio.Group>
                      </Item>
                    </>
                  );
                case '值选择器':
                case '值复选器':
                case '可编辑值选择器':
                case '平铺值选择器':
                  return (
                    <>
                      {' '}
                      <Item label="可选值" name="Config">
                        <TextArea allowClear />
                      </Item>
                      <Item colon={false} label=" ">
                        {' '}
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                          <span style={{ marginRight: '0.4rem' }}>
                            以英文逗号为分隔符填写，或其他分隔符粘贴：
                          </span>
                          <Select
                            onChange={handleSeparator}
                            style={{ width: '30%' }}
                          >
                            <Select.Option value="0">
                              以,分隔(英文逗号)
                            </Select.Option>
                            <Select.Option value="1">
                              以/分隔(正斜杠)
                            </Select.Option>
                            <Select.Option value="2">
                              以\\分隔(反斜杠)
                            </Select.Option>
                            <Select.Option value="3">
                              以、分隔(中文顿号)
                            </Select.Option>
                            <Select.Option value="4">
                              以;分隔(英文分号)
                            </Select.Option>
                            <Select.Option value="5">
                              以；分隔(中文分号)
                            </Select.Option>
                            <Select.Option value="6">(是)/否</Select.Option>
                            <Select.Option value="7">是/(否)</Select.Option>
                            <Select.Option value="8">(否)/是</Select.Option>
                          </Select>
                        </div>
                      </Item>
                    </>
                  );
                case '图片':
                case '可预览图片':
                  return (
                    <Item name="ReadOnly" label="选项">
                      <div>
                        <Checkbox
                          checked={pramData.picture}
                          onChange={e => onChangeReady(e, 'picture')}
                        >
                          允许从相册选取
                        </Checkbox>
                        <Checkbox
                          checked={pramData.must}
                          onChange={e => onChangeReady(e, 'must')}
                        >
                          必填字段
                        </Checkbox>
                      </div>
                    </Item>
                  );
                case '日期时间':
                case '日期':
                case '日期月份':
                case '日期年份':
                case '日期周':
                case '时分秒':
                  return (
                    <Item label="选项" name="Config">
                      <Radio.Group style={{ marginTop: '0.3rem' }}>
                        <Radio
                          value="默认为空"
                          defaultChecked
                          style={{ width: '18rem', marginBottom: '0.5rem' }}
                        >
                          默认为空
                        </Radio>
                        <Radio value="">默认为当前时间</Radio>
                        <Radio value="不可选择" style={{ width: '18rem' }}>
                          锁定为当前时间(通过用户点击刷新)
                        </Radio>
                        <Radio value="不超过当前时间">不超过当前时间</Radio>
                      </Radio.Group>
                    </Item>
                  );
                case '坐标控件':
                  return (
                    <Item label="选项" name="Config">
                      <div>
                        <Checkbox
                          value="当前坐标"
                          style={{ marginRight: '0.2rem' }}
                          checked={pramData.coordinates}
                          onChange={e => onChangeReady(e, 'coordinates')}
                        />
                        锁定为当前位置坐标
                      </div>
                    </Item>
                  );
                default:
                  return (
                    <Item label="配置" name="Config">
                      <TextArea allowClear />
                    </Item>
                  );
              }
            })()}
            {Shape === '图片' || Shape === '可预览图片' ? (
              ''
            ) : (
              <Item label="预设值">
                <div className={styles.listEvent}>
                  <Input
                    style={{ width: '40%', height: '1.8rem' }}
                    value={pramData.Preset}
                    onChange={e => handleInput(e, 'Preset')}
                    placeholder=""
                    allowClear
                  />
                  <Item
                    style={{ marginLeft: '1rem' }}
                    label="验证"
                    name="ValidationRule"
                    style={{ margin: '0 0 0 1rem' }}
                  >
                    <Input style={{ width: '95%' }} placeholder="" allowClear />
                  </Item>
                  <Tooltip title="选择验证规则">
                    <PlusSquareOutlined
                      onClick={() => add('rule')}
                      style={{
                        fontSize: '24px',
                        color: '#1890FF',
                        display: 'flex',
                        alignItems: 'center',
                      }}
                    />
                  </Tooltip>
                </div>
              </Item>
            )}
            <Item label="异常值">
              <div className={styles.listEvent}>
                <Input
                  style={{ width: '40%', height: '1.8rem' }}
                  value={pramData.ExceptionValue}
                  onChange={e => handleInput(e, 'ExceptionValue')}
                  placeholder=""
                  allowClear
                />
                <Item
                  style={{ marginLeft: '1rem' }}
                  label="触发事件"
                  name="ExceptionEvent"
                  style={{ margin: '0 0 0 1rem' }}
                >
                  <Select style={{ width: '12rem' }} onChange={handleEvent}>
                    {eventList.length
                      ? eventList.map((item, index) => {
                          return (
                            <Select.Option
                              key={index}
                              tablename={item.TableName}
                              name={item.Name}
                              value={item.ID}
                            >
                              {item.Name}
                            </Select.Option>
                          );
                        })
                      : ''}
                  </Select>
                </Item>
              </div>
            </Item>
            <Item label="字段集">
              <div className={styles.listEvent}>
                <Input
                  style={{ width: '93%' }}
                  placeholder=""
                  disabled={!isShow}
                  onChange={onCharacterValue}
                  allowClear
                  value={characterValue}
                />
                <Tooltip title={!isShow ? '' : '字符集选择'}>
                  <PlusSquareOutlined
                    onClick={() => (!isShow ? '' : add('characteristics'))}
                    style={{
                      fontSize: '24px',
                      color: !isShow ? 'gray' : '#1890FF',
                      cursor: !isShow ? 'no-drop' : 'pointer',
                      display: 'flex',
                      alignItems: 'center',
                      marginLeft: '0.5rem',
                    }}
                  />
                </Tooltip>
              </div>
            </Item>
          </Form>
        )}
        <ChangeAdd
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onOK}
          newCheckedList={checkedList}
          isType={type}
          filed={filed}
          characterValue={characterValue}
          formObj={formObj}
        />
      </Drawer>
    </>
  );
};
export default AddModal;
