
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message,Image, Button, Popover } from 'antd';
import React, { useEffect, useState } from 'react';
import { postIgnoringvents } from '@/services/alarm/Alarmlist';
import { postUploadRecognition } from '@/services/alarm/Involved';
// Import Swiper React components
// import { Swiper, SwiperSlide } from 'swiper/react';
// import { Navigation, Pagination, Mousewheel } from 'swiper/modules';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import styles from './AlarmDetails.less'
import moment from 'moment';
import ImageWithPopover from './ImageWithPopover';
import ImageSinglePopover from './ImageSinglePopover';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.AlarmDetailsParams>;

export type UpdateFormProps = {
  updateModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.AlarmDetailsParams>;
  reload: any;
  warning_type: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.AlarmDetailsParams>();
  // const [isActive, setIsActive] = useState(0);
  const [imageSrc, setImageSrc] = useState('');
  // const [visible, setVisible] = useState(false);
  const [involved, setInvolved] = useState(0);
  // const [involvedInfo, setInvolvedInfo] = useState([...(props?.values?.person_list || [])]);
  const [involvedInfo, setInvolvedInfo] = useState<any[]>([]);
  // useEffect(() => {
  //   if (props.values?.person_list) {
  //     setInvolvedInfo([...props.values.person_list]);
  //   }
  // }, [props.values?.person_list]);
  // console.log(object);
  // if(props.warning_type === '1') {
  //   console.log('props.values?.warning_type1');
  //   setInvolved(props.values.person_list[0][2]);
  // }else {
  //   console.log('props.values?.warning_type2');
  //   // setInvolvedInfo([...props.values.person_list]);
  // }
  const handlePostRecognition = (person_id: any, classify: any) => {
    postUploadRecognition({
      person_id: person_id,
      classify: classify
    })
      .then((res) => {
        console.log(res.data.classify,'res.data.classify');
        if(res.data.classify === 1) {
          message.success('此人已被设为重点关注');
        }else {
          message.success('此人已被移除重点关注');
        }
        props.reload();
      })
      .catch(() => {
        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
      });
  };
  /** 多人告警组件 */
  const handleInvolved = (value: any, index: any) => {
      const updatedInvolvedInfo = [...involvedInfo];
      console.log(updatedInvolvedInfo);
      updatedInvolvedInfo[index][2] = value;
      setInvolvedInfo(updatedInvolvedInfo);
      handlePostRecognition(updatedInvolvedInfo[index][0], value)
  };
  /** 单人告警组件 */
  // const handleSingleInvolved = () => {
  //   if (involved === 1) {
  //     setInvolved(0);
  //     handlePostRecognition(props.values?.person_id, 0)
  //   } else {
  //     setInvolved(1);
  //     handlePostRecognition(props.values?.person_id, 1)
  //   }
  // }

  // const [open, setOpen] = useState(false);
  useEffect(() => {
    // console.log(Array.isArray(props.values?.person_id),'Array.isArray(props.values?.person_id)');
    // setImageSrc(props?.values?.picture_path?.[0])
    if(props.updateModalOpen) {
      if(props.warning_type === '1') {
        console.log('props.values?.warning_type1');
        setInvolved(props.values.person_list[0][2]);
      }else {
        console.log('props.values?.warning_type2');
        setInvolvedInfo([...props.values.person_list]);
      }
    }
  }, [props.updateModalOpen])
  return (
    <ModalForm<any>
      width={832}
      title={`${props.values.warning_name}告警`}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          setInvolved(0);
          props.handleModal()
        },
        okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
        cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
      }}
      
      submitter={{
        // resetButtonProps: {
        //     style: {
        //         display: 'none',
        //       },
        // },
        // searchConfig: {
        //     submitText: '忽略此事件',
        // },
        render: (prop) => {
          return [
              <Button
                key="ok"
                style={{ backgroundColor: '#E80D0D',color: '#FFF',borderBlockColor: '#E80D0D' }}
                onClick={() => {
                  prop.submit();
                }}
              >
                忽略此事件
              </Button>,
              props.warning_type === '2' ? null : (
              <Button
                key="involved"
                style={{ backgroundColor: '#FAAD14',color: '#FFF',borderBlockColor: '#FAAD14' }}
                onClick={() => {
                  // console.log(props.updateModalOpen);
                  setInvolved(1);
                  handlePostRecognition(props.values?.person_list[0][0], 1)
                }}
              >
                加入重点关注
              </Button>
              ),
              props.warning_type === '2' ? null : (
              <Button
                key="noInvolved"
                style={{ background: '#FFF',color: '#E80D0D',borderColor: '#E80D0D' }}
                onClick={() => {
                  // console.log(props.updateModalOpen);
                  setInvolved(0);
                  handlePostRecognition(props.values?.person_list[0][0], 0)
                }}
              >
                移除重点关注
              </Button>
              )
          ];
        },
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        values.is_ignore = true
        values.person_id = props.values.person_id
        // console.log(values);
        postIgnoringvents(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
          });

        props.handleModal();
        return true;
      }}
    >
      {/* <ProForm.Group> */}
        <div className={styles.alarmImgBox}>
            <div className={styles.alarmImgDescribe}>来源: <span>{props.values.origin}</span></div>
            <div className={styles.alarmImgDescribe}>触发时间: <span className={styles.alarmSpan}>{moment(props.values.trigger_time).format('YYYY-MM-DD hh:mm:ss')}</span></div>
            <div className={styles.alarmImgContent}>
              {Array.isArray(props.values?.person_id_list)}
              {props.warning_type === '2' ? (
                Array.isArray(involvedInfo) && involvedInfo.length ? (
                  involvedInfo.map((item: any, index: any) => {
                    return (
                      <ImageWithPopover
                        src={item?.[1]}
                        involved={involvedInfo[index][2]}
                        key={index}
                        indexId={index}
                        handleInvolved={handleInvolved}
                        time={props.values.trigger_time}
                      ></ImageWithPopover>
                    );
                  })
                ) : (
                  Array.isArray(props?.values?.picture_path) && props?.values?.picture_path.length ? (
                    props.values.picture_path.map((item: any, index: any) => {
                      return (
                        <ImageSinglePopover
                          src={item}
                          involved={involved}
                          key={index}
                          // handleInvolved={handleSingleInvolved}
                          reload={props.reload} // 将reload方法作为prop传递给ImageSinglePopover组件
                          time={props.values.trigger_time}
                        ></ImageSinglePopover>
                      );
                    })
                  ) : null
                )
              ) : (
                Array.isArray(props?.values?.picture_path) && props?.values?.picture_path.length ? (
                  props.values.picture_path.map((item: any, index: any) => {
                    return (
                      <ImageSinglePopover
                        src={item}
                        involved={involved}
                        key={index}
                        // handleInvolved={handleSingleInvolved}
                        reload={props.reload} // 将reload方法作为prop传递给ImageSinglePopover组件
                        time={props.values.trigger_time}
                      ></ImageSinglePopover>
                    );
                  })
                ) : null
              )}
              {/* { Array.isArray(involvedInfo) && involvedInfo.length && involvedInfo.map((item: any, index: any) => {
                console.log(involvedInfo,'item');
                return(<ImageWithPopover src={item?.[1]} involved={involvedInfo[index][2]} key={index} indexId={index} handleInvolved={handleInvolved}></ImageWithPopover>)
              })} */}
            </div>
            {/* <div className={styles.alarmImgLeft}>
                <Swiper
                    style={{height:660}}
                    slidesPerView={5}
                    spaceBetween={20}
                    direction='vertical'
                    mousewheel={true}
                    modules={[Mousewheel]}
                    onSlideChange={() => {
                      console.log(111);
                    }}
                    // pagination={{
                    // clickable: true,
                    // }}
                    // modules={[Pagination]}
                >
                    { Array.isArray(props?.values?.picture_path) && props?.values?.picture_path.length && props?.values?.picture_path.map((item: any, index: any) => {
                      return (<SwiperSlide key={index} virtualIndex={index} onClick={() => {
                        console.log(index);
                        setIsActive(index)
                        setImageSrc(item)
                      }}>
                            <div className={ styles.alarmImgLeftBox }>
                                <Image
                                    style={{
                                      width: 112,
                                      height: 112,
                                      borderRadius: 4
                                    }}
                                    className={ index === isActive ? styles.alarmImgLeftBoxActive : '' }
                                    preview={false}
                                    src={item}
                                />
                            </div>
                        </SwiperSlide>)
                    })}
                </Swiper>
                <div className={styles.shadowBox}></div>
            </div>
            <div className={styles.alarmImgRight}>
                <div className={styles.alarmImgRightTopBox}>
                    <Image
                        width={640}
                        height={640}
                        preview={false}
                        src={imageSrc}
                        />
                </div>
                <div className={styles.alarmDetails}>
                    来源: <span className={styles.alarmSpan}>{props.values.device_name}</span>触发时间: <span className={styles.alarmSpan}>{moment(props.values.trigger_time).format('YYYY-MM-DD hh:mm:ss')}</span>
                </div>
            </div> */}
        </div>
      {/* </ProForm.Group> */}
    </ModalForm>
  );
};
export default UpdateForm;
