import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message,Image } from 'antd';
import React, { useEffect, useState } from 'react';
import {
  proFormSmallItemStyleProps,
  proFormSmallModelWidth,
} from '../../../../../config/defaultForm';
import { postIgnoringvents } from '@/services/alarm/Alarmlist';
// 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';
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;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const intl = useIntl();
  const [form] = Form.useForm<API.AlarmDetailsParams>();
  const [isActive, setIsActive] = useState(0);
  const [imageSrc, setImageSrc] = useState('');
  useEffect(() => {
    setImageSrc(props?.values?.picture_path?.[0])
  }, [props.updateModalOpen])
  return (
    <ModalForm<any>
      width={832}
      title={intl.formatMessage({
        id: 'alarm.list.table.form.title',
        defaultMessage: `编辑${props.values.warning_name}`,
      })}
      open={props.updateModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitter={{
        resetButtonProps: {
            style: {
                display: 'none',
              },
        },
        searchConfig: {
            submitText: '忽略此事件',
        },
      }}
      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.alarmDetails}>
            告警名称: <span className={styles.alarmSpan}>单人徘徊告警</span>来源设备: <span className={styles.alarmSpan}>北广场检票口1#摄像头</span>触发时间: <span className={styles.alarmSpan}>2023-01-15 22:00:03</span>
        </div> */}
        <div className={styles.alarmImgBox}>
            <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>)
                    })}
                     {/* {props?.values?.picture_path.length && props?.values?.picture_path.map((slideContent:any, index:any) => (
                        return (<SwiperSlide key={slideContent} virtualIndex={index}>
                          <div className={styles.alarmImgLeftBox}>
                              <Image
                                  preview={false}
                                  src={slideContent}
                                  />
                          </div>
                        </SwiperSlide>)
                    ))} */}
                    
                    {/* <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className={styles.alarmImgLeftBox}>
                            <Image
                                preview={false}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                        </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;
