import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { Divider, Tooltip, Switch } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import PeopleSelector from '@/components/PeopleSelector';
import styles from '../NodeModal.less';

const ConfigCopyPerson = (props, ref) => {
  const { nodeChage, editMsg } = props;
  const [showPersonSelect, setShowPersonSelect] = useState(false); // 是否显示人员选择器
  const CarbonCopyPeopleList = useRef([]); // 抄送人列表
  const TurnOnCc = useRef(0);
  const [flag, setFlag] = useState(0); // 用于刷新界面
  useImperativeHandle(ref, () => ({
    getParmar,
  }));
  useEffect(() => {
    // if(editMsg)
    if (JSON.stringify(editMsg) === '{}') {
      return;
    }
    CarbonCopyPeopleList.current = [];
    TurnOnCc.current = 0;
    CarbonCopyPeopleList.current = editMsg.CarbonCopyPeopleList;
    TurnOnCc.current = editMsg.TurnOnCc;
    setFlag(flag + 1);
  }, [editMsg]);
  const getParmar = () => ({ CarbonCopyPeopleList: CarbonCopyPeopleList.current });
  // 选择人员回填
  const savePerson = e => {
    console.log(e);
    // setCarbonCopyPeopleList(e);
    CarbonCopyPeopleList.current = e;
    nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
    setShowPersonSelect(false);
  };
  // 配置当前节点抄送人
  const editCC = () => {
    setShowPersonSelect(true);
  };
  const onChange = e => {
    console.log(e, 'e');
    if (e) {
      TurnOnCc.current = 1;
    } else {
      TurnOnCc.current = 0;
      // CarbonCopyPeopleList.current = [];
      // nodeChage('CarbonCopyPeopleList', CarbonCopyPeopleList.current);
    }
    console.log(TurnOnCc.current);
    nodeChage('TurnOnCc', TurnOnCc.current);
    setFlag(flag + 1);
  };
  return (
    <div>
      <Divider
        orientation="left"
        style={{
          borderTopColor: '#99bbe8',
          color: '#15428b',
          fontWeight: 700,
        }}
      >
        节点抄送人
      </Divider>
      <div style={{ display: 'flex', justifyContent: 'right', marginBottom: '12px' }}>
        开启抄送
        <Switch
          style={{ marginLeft: '5px' }}
          checked={TurnOnCc.current !== 0}
          onChange={onChange}
        />
      </div>
      <div
        className={styles.buttonBox}
        style={{ display: TurnOnCc.current === 1 ? 'flex' : 'none' }}
        onClick={() => editCC()}
      >
        <div
          className={styles.setButton}
          style={{ textAlign: CarbonCopyPeopleList?.current.length > 0 ? 'left' : 'center' }}
        >
          <Tooltip title={CarbonCopyPeopleList?.current.map(item => item.label).join(',')}>
            <span>
              {CarbonCopyPeopleList?.current.length > 0
                ? CarbonCopyPeopleList?.current.map(item => item.label).join(',')
                : '选择抄送人'}
            </span>
          </Tooltip>
        </div>
        <div className={styles.addIcon}>
          <PlusOutlined />
        </div>
      </div>

      <PeopleSelector
        visible={showPersonSelect}
        personList={CarbonCopyPeopleList.current}
        onCancel={() => setShowPersonSelect(false)}
        onSubumit={e => savePerson(e)}
      />
    </div>
  );
};

export default forwardRef(ConfigCopyPerson);
