import React, { useEffect, useState,useMemo } from 'react';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FilePptOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { Form, Button, Upload,message, Input,Image, Modal,Descriptions, Row, Col, DatePicker, InputNumber,Table } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import { getDictService } from '../../../../service/SelectValue'
import { validlgtd, validlttd } from '../../../../utils/validators';
import { createCrudService } from '../../../../components/crud/_';
import apiurl from '../../../../service/apiurl';
import { httpget6 } from "../../../../utils/request";
import { mobile } from '../../../../utils/validators'
// import AdcdTreeSelect from '../../../../components/Form/AdcdTreeSelect'
import NormalSelect from '../../../../components/Form/NormalSelect';
import { config } from '../../../../config';
import usePageTable from '../../../../components/crud/usePageTable2';
import moment from 'moment';
import clsx from "clsx"
// import "./index.less"
const { YearPicker } = DatePicker;
const importancy = [
  {
    "label": "水库调洪",
    "value": 0
  },
  {
    "label": "人员转移",
    "value": 1
  }
]
const { Dragger } = Upload;
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const ModalForm = ({ mode, record, onEdit, onSave }) => {
  console.log(record);
  const columns1 = [
    { title: '反馈时间', key: 'tm', dataIndex: 'tm', width: 200, align: "center" },
    { title: '反馈人员', key: 'feedbackUserName', dataIndex: 'feedbackUserName', width: 150, ellipsis: true,align: "center" },
    { title: '联系电话', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true,align: "center" },
    { title: '执行内容', key: 'content', dataIndex: 'content', width: 250, ellipsis: true,align: "center" },
  ]
  const width = useMemo(() => columns1.reduce((total, cur) => total + (cur.width), 0), [columns1]);
  
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]) //上传文件列表
  const [fileIds, setFileIds] = useState([])
  const [flag, setFlag] = useState(false)
  const [iframeSrc, setIframeSrc] = useState('')
  const [pdfViewOPen, setPdfViewOPen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [unitData, setUnitData] = useState([])
  const [btn, setBtn] = useState(1)
  const [dispatchStatus, setDispatchStatus] = useState(0)

  const getUnitData = async() => {
  const res = await httpget6(apiurl.ddjc.ddjz.unitList,{});
    if (res.code == 200) {
      let newData = res.data.map(item => ({...item, value: item.adcd, label: item.userName }))
      setUnitData(newData)
    }
  } 
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxzb.fkList).find_nopage);

  const onFinish = (values) => {
    console.log("vali", values);
    // 
    if (values.adcd) {
      values.executeOrgName = unitData.find(item => item.adcd == values.adcd).userName
    }
    values.year = values.year ? moment(values.year).format("YYYY") : null
    if (mode === 'edit') {
      let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
      values.attachList = oldFiles;
      values.status = record.status
      values.createTm = record.createTm
      values.id = record.id
      if (values.startTm || values.endTm) {
        values.startTm = values.startTm ? moment(values.startTm).format('YYYY-MM-DD HH:mm:ss') : null
        values.endTm = values.endTm ? moment(values.endTm).format('YYYY-MM-DD HH:mm:ss') : null
        // delete values.startTm;
        // delete values.endTm;
        onEdit(apiurl.ddjc.ddjz.edit, values)
      } else {
        onEdit(apiurl.ddjc.ddjz.edit, values)
      }
    }
    if (mode === 'save') {
      values.attachList = fileIds
      values.status = dispatchStatus
      if (values.startTm || values.endTm) {
        values.startTm = values.startTm ? moment(values.startTm).format('YYYY-MM-DD HH:mm:ss') :null
        values.endTm = values.endTm ? moment(values.endTm).format('YYYY-MM-DD HH:mm:ss') :null
        // delete values.startTm;
        // delete values.endTm;
        onSave(apiurl.ddjc.ddjz.save, values)
      } else {
        onSave(apiurl.ddjc.ddjz.save, values)
      }
    }
  }

  
 /**
   * @description 上传图片
   * @param {string}  file 上传的文件
   */
 const fileChange = (info) => {
   console.log(info);
   if (info.file.status === "done") {
    setLoading(false);
  }
  if (info.file.status === "uploading") { 
    setLoading(true);
  }
  if (info.file.status === "error") {
    message.error("文件上传失败")
    setLoading(false);
  }
  let fileIds = info.fileList.map(file => {
    return {fileId: file.response?.data?.fileId}
  })
  console.log(fileIds);
  setFileIds(fileIds)
  setFileList(info.fileList)
  setFlag(false)
}
  /**
   * @description 删除上传的图片
   * @param {string}  id 删除的id
   */
  const deleteFile = (fileId) => {
    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
    setFileList(filterFile)
  }
     /**
   * @description 获取查看时文件
   * @param {*} type 
   * @returns 
   */
  const getFileInfo = (params) => {
      let fetchArr = params?.attachList.map(item => {
        return createCrudService(apiurl.fxzb.gczx.ytygc.getFile + `/${item.fileId}`)
          .delGet()
      }
      );
      Promise.all(fetchArr).then(res => {
        let fileArr = res.map(item => {
          return {
            name: item.data.fileName,
            response: {
              data: {
                filePath: item.data.filePath,
                fileId: item.data.fileId
              }
            },
          }
        })
        setFlag(true)
        setFileList(fileArr)
      }).catch(err => console.log(err))
    }
    /**
   * @description 文件下载
   * @param {String} params 文件fileId
   */
    const download = (params) => {
      let downloadLink = document.createElement("a");
      downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xfflood/xfEmerDispatchR/file/download/${params}`;
      downloadLink.download = `${params.fileName}`;
      downloadLink.style.display = "none";
      // 将链接添加到页面中
      document.body.appendChild(downloadLink);

      // 模拟点击事件，开始下载
      downloadLink.click();
    }

    /**
     * @description pdf文件预览
     * @param {String} params 文件预览url
     */
    const viewPdf = (params) => {
      setIframeSrc(params)
      setPdfViewOPen(true)
    }
  useEffect(() => {
    if (mode === "view" || mode === "edit") {
      getFileInfo(record)
      form.setFieldsValue({
        ...record,
        dispatchType: Number(record.dispatchType),
        startTm: record.startTm ? moment(record.startTm) : null,
        endTm: record.endTm ? moment(record.endTm) : null,
        year: record.year ? moment(String(record.year)) : null,
      })
    } else {
      form.setFieldValue("year",moment())
    }
    }, [record,mode])
    useEffect(() => {
      getUnitData()
    }, [])
  useEffect(() => {
    if (mode == "view" && record.id ) {
      let params = {
        search: {
          dispatchId:record.id
        }
      }
      search(params)
    }
  }, [mode,record])
  
    
  return (
    <div className='detail-box'>
      <div className='left-title'>
          <div className='detail-label'>
          <div className="title" style={btn == 1 ? { border: "1px solid #409eff", color: "#409eff", fontWeight: 700 } : {}} onClick={() => setBtn(1)}>指令编发</div>
          {
            mode  === "view" ? 
            <div className="title" style={btn ==2 ? {border:"1px solid #409eff",color:"#409eff",fontWeight:700}:{}} onClick={()=>setBtn(2)}>执行反馈</div>:null
          }
          </div>
          <div className='sperate-line'>
        <img
          src={`${process.env.PUBLIC_URL}/assets/fxdd/line_icon.png`}
          style={{
            position: 'absolute',
            top: "-3px",
            left:"-17px",
            width: "40px",
            height:"35px"
          }}
          />
          {
            mode === "view" ? 
            <img
           src={`${process.env.PUBLIC_URL}/assets/fxdd/line_icon.png`}
           style={{
             position: 'absolute',
             top: "88px",
             left:"-17px",
             width: "40px",
             height:"35px"
           }}
         />
              :null
          }
      </div>
      </div>
      <div className='right-content'>
        {btn == 1 ? 
      <Form form={form} {...formItemLayout} onFinish={onFinish}>
        <Row>
          <Col span={12}>
            <Form.Item
              label="调度令编号"
              name="serial"
              rules={[{ required: true }]}
            >
              <Input  disabled={mode === "view"} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="调度令年度"
              name="year"
              rules={[{ required: true }]}
            >
                <YearPicker 
                  // format={'YYYY'}
                  // mode="year"
                  style={{ width: '100%' }}
                  allowClear
                  disabled={mode === "view"} 
                />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="执行单位"
              name="adcd"
              rules={[{ required: true }]}
            >
                {/* <Input disabled={mode === "view"} style={{ width: '100%' }} allowClear /> */}
              <NormalSelect disabled={mode === "view"} options={unitData} allowClear={false} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="调度类型"
              name="dispatchType"
              rules={[{ required: true }]}
            >
              <NormalSelect disabled={mode === "view"} options={importancy} allowClear={false} />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Form.Item
              label="抄送单位"
              name="forwardOrgName"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input disabled={mode === "view"} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={12}>
            <Form.Item
              label="计划执行时间"
              name="startTm"
              rules={[{ required: true }]}
            >
                <DatePicker
                  disabled={mode === "view"}
                  style={{ width: '100%' }}
                  allowClear
                  showTime
                />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="计划结束时间"
              name="endTm"
            >
                <DatePicker
                  disabled={mode === "view"}
                  style={{ width: '100%' }}
                  allowClear
                  showTime
                  placeholder=''
                />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Form.Item
                label="指令内容"
                name="content"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
              <Input.TextArea disabled={mode === "view"} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>
          <Row>
            <Col span={24}>
            <Descriptions>
                <Descriptions.Item label="日期" span={2} labelStyle={{marginLeft:"57px"}}>
                  {/* {moment().format("YYYY-MM-DD HH:mm:ss")} */}
                  {record.createTm}
                </Descriptions.Item>
                <Descriptions.Item label="指令发起人" span={2}>
                {record.createUserName || ''}
                </Descriptions.Item>
            </Descriptions>
            </Col>
          </Row>
        <Row>
          <Col span={24}>
            <Form.Item
                label="指令文件"
                name="fieldId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
                {
                  mode !== "view" &&
                  <Dragger
                    name='file'
                    // multiple
                    action="/gunshiApp/xfflood/xfEmerDispatchR/file/upload/singleSimple"
                    onChange={fileChange}
                    onDrop={(info) => { console.log(info.dataTransfer.files); }}
                      fileList={fileList}
                      disabled={loading}
                      
                    // onSuccess={handleSuccess}
                  >
                      <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
                      <p className="ant-upload-hint">
                        支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .ppt
                    </p>
                </Dragger>
               }
                <Row gutter={[16]}>
                    {
                      fileList.length > 0 && fileList.map(file => {
                        return (
                          <Col span={12}>
                            <div className={mode == "view" ? 'file-item view-file' : 'file-item'}>
                              <div className='file-description'>
                                {file.name.indexOf('.docx') > -1 ?
                                  <div
                                    onClick={() => { download(file.response?.data?.fileId) }}
                                    style={{ cursor: 'pointer' }}
                                  >
                                    <FileWordOutlined
                                      style={{ fontSize: 40 }}
                                    />
                                  </div>
                                  :
                                  file.name.indexOf('.pdf') > -1 ?
                                    <div
                                      onClick={() => { viewPdf(file.response?.data?.fileId) }}
                                      style={{ cursor: 'pointer' }}
                                    >
                                      <FilePdfOutlined style={{ fontSize: 40 }} />
                                    </div>
                                    :
                                    file.name.indexOf('.zip') > -1 ?
                                      <div
                                        onClick={() => { download(file.response?.data?.fileId) }}
                                        style={{ cursor: 'pointer' }}
                                      >
                                        <FileZipOutlined style={{ fontSize: 40 }} />
                                      </div>
                                      :
                                      file.name.indexOf('.ppt') > -1 ?
                                <div
                                  onClick={() => { download(file.response?.data?.fileId) }}
                                  style={{ cursor: 'pointer' }}
                                >
                                  <FilePptOutlined style={{ fontSize: 40 }} /> 
                                </div> :
                                      file.name.indexOf('.xlsx') > -1 ?
                                        <div
                                          onClick={() => { download(file.response?.data?.fileId) }}
                                          style={{ cursor: 'pointer' }}
                                        >
                                          <FileExcelOutlined style={{ fontSize: 40 }} />
                                        </div>
                                        :
                                        <Image width={60} src={url + file.response?.data?.filePath} alt='' />
                                }
                                <span>{file.name}</span>
                              </div>
                              <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
                                <DeleteOutlined />
                              </div>
                            </div>
                          </Col>
                        )
                      })
                    }
                  </Row>
            </Form.Item>
          </Col>
        </Row>
        {
          mode === 'view' ? null : (
            <>
                  <Form.Item wrapperCol={ {span: 1, offset: 19} } >
                    <div style={{display:'flex',columnGap:10}}>
                <Button type="primary" htmlType="submit">
                  {mode === 'save' ? '保存' : '修改'}
                </Button>
                  {
                    mode === "save" ?   
                          <Button type="primary" onClick={() => { setDispatchStatus(1); }} htmlType="submit">
                      直接下发
                    </Button> :null
                
              }
                      
                   </div>
                  </Form.Item>
            </>
          )
        }
      </Form>
          :
          <Table columns={columns1} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
        }
      </div>
      <Modal
        open={pdfViewOPen}
        width={1000}
        title=""
        footer={null}
        style={{marginTop:"-5%"}}
        onCancel={() => {
          setPdfViewOPen(false)
        }}
      >
      <iframe
          style={{
            height: '80vh',
            width: '100%',
            border: 0,
            marginTop: 20,
          }}
         src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xfflood/xfEmerDispatchR/file/download/${iframeSrc}`)}`}
        />
      </Modal>
    </div>
  );
}

export default ModalForm;