import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined,VideoCameraOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';

import apiurl from '../../../../service/apiurl';

import NormalSelect from '../../../../components/Form/NormalSelect';

import "./index.less"
import moment from 'moment';
const { RangePicker } = DatePicker
const { Dragger } = Upload;
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"


const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave,submit }) => {
console.log(record);

  const [form] = Form.useForm();
  const [imgfileList, setImgFileList] = useState([]) //上传文件列表
  const [videoFileList, setVideoFileList] = useState([]) //上传文件列表
  const [handleImgfileList, setHandleImgFileList] = useState([]) //上传文件列表
  const [handleVideoFileList, setHandleVideoFileList] = useState([]) //上传文件列表
  const [videoOpen, setVideoOpen] = useState(false)
  const [videoParams, setVideoParams] = useState({})
 
  const onfinish = (values) => {
    if (mode === 'edit') {
      values.id = record.id;
      onEdit(apiurl.rcgl.xcxj.xjrw.edit,values)
    }
    if (mode === 'save') {
      onSave(apiurl.rcgl.xcxj.xjrw.save,values)
    }
  }
  const handleFile = (arr=[]) => {
    const newArr = arr?.map(item => ({
      name: item.fileName,
      response: {
            data: {
              filePath: item.filePath,
              fileId:item.fileId
            }
          },
    }))
    return newArr
  }
    useEffect(() => {
      if (mode != 'save') {
        // const imgFile = record?.inspectPics?.map(o => ({
        //   name: o.fileName,
        //   response: {
        //         data: {
        //           filePath: o.filePath,
        //           fileId:o.fileId
        //         }
        //       },
        // }))
        const imgFile = handleFile(record?.inspectPics);
        const videoFile = handleFile(record?.inspectVideos);
        const handleImgFile = handleFile(record?.handlePics);
        const hanldeVideoFile = handleFile(record?.handleVideos);
        setImgFileList(imgFile)
        setVideoFileList(videoFile)
        setHandleImgFileList(handleImgFile)
        setHandleVideoFileList(hanldeVideoFile)
        form.setFieldsValue({
          ...record,
          handleTime: record.handleTime ? moment(record.handleTime) : '',
          finishTime: record.finishTime? moment(record.finishTime) : ''
        })
      }
    }, [record, mode])

 
 
  return (
    <div style={{maxHeight:"70vh",overflowY:"auto"}}>
      <div
        style={{ marginBottom: 20, borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5 }}>
        <span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>巡检信息</div>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="任务标题"
                name="taskTitle"
            >
               <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="巡检点"
                name="name"
            >
               <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
              </Form.Item>
          </Col> 
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="巡查项"
                name="itemDesc"
            >
               <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="巡检问题描述"
                name="problemDesc"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
              <Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>

      <Row>
          <Col span={12}>
              <Form.Item
                label="巡查人"
                name="inspectUserName"
            >
               <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="巡查时间"
                name="finishTime"
            >
                <DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col> 
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="巡查图片"
                name="picId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <Row gutter={[16]}>
              {
                  imgfileList.length > 0 && imgfileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                        <div className='file-description'>
                            <Image width={60} src={url +file.response?.data?.filePath} alt='' />
                            <span>{file.name}</span>
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
              </Row>
              </Form.Item>
          </Col>
       </Row>
       <Row>
          <Col span={24}>
              <Form.Item
                label="巡查视频"
                name="picId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <Row gutter={[16]}>
              {
                  videoFileList.length > 0 && videoFileList.map(file => {
                  return (
                      <Col span={12}>
                      <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                      <div className='file-description'>
                        <div
                            onClick={() => { setVideoOpen(true); setVideoParams(file)}}
                              style={{ cursor: 'pointer' }}
                            >
                              <VideoCameraOutlined
                              style={{ fontSize: 40 }}
                            />
                          </div>
                            <span>{file.name}</span>
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
              </Row>
              </Form.Item>
          </Col>
       </Row>
      <div
        style={{ marginBottom: 20, borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5 }}>
          <span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>处理信息</div>
      <Row>
          <Col span={12}>
              <Form.Item
                label="处理状态"
                name="isHandle"
            >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear
                options={[{label:"待处理",value:0},{label:"已处理",value:1}]} />
              </Form.Item>
          </Col>
         {
          (record?.isHandle || record?.isHandle == 0) ?  
          <Col span={12}>
          <Form.Item
            label="处理人"
            name="handleUserName"
        >
            <Input disabled={mode==='view'}  style={{width:'100%'}} />
          </Form.Item>
        </Col> : null
         }
      </Row>
      {
          record?.isHandle ? 
            <>
              <Row>
          <Col span={12}>
              <Form.Item
                label="处理时间"
                name="handleTime"
            >
               <DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row> 
      <Row>
          <Col span={24}>
              <Form.Item
                label="处理内容"
                name="handleDesc"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
               <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="处理图片"
                name="picId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <Row gutter={[16]}>
              {
                  handleImgfileList.length > 0 && handleImgfileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                        <div className='file-description'>
                            <Image width={60} src={url +file.response?.data?.filePath} alt='' />
                            <span>{file.name}</span>
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
              </Row>
              </Form.Item>
          </Col>
       </Row>
       <Row>
          <Col span={24}>
              <Form.Item
                label="处理视频"
                name="picId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <Row gutter={[16]}>
              {
                  handleVideoFileList.length > 0 && handleVideoFileList.map(file => {
                  return (
                      <Col span={12}>
                      <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                      <div className='file-description'>
                        <div
                            onClick={() => { setVideoOpen(true); setVideoParams(file)}}
                              style={{ cursor: 'pointer' }}
                            >
                              <VideoCameraOutlined
                              style={{ fontSize: 40 }}
                            />
                          </div>
                            <span>{file.name}</span>
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
              </Row>
              </Form.Item>
          </Col>
       </Row>
            </> : null
      } 
          <Form.Item {...btnItemLayout}>
            <Button type="primary" onClick={() => submit()}>
              关闭
            </Button>
          </Form.Item>
      </Form>
      <Modal
        open={videoOpen}
        width={800}
        title="视频预览"
        footer={null}
        onCancel={() => setVideoOpen(false)}
      >
        <video
          controls
          src={url + videoParams?.response?.data?.filePath}
          style={{width:"100%",height:"100%"}}
        />
      </Modal>
    </div>
  );
}

export default ModalForm;