import React, { useEffect, useState, useRef } from 'react';
import { Descriptions, Modal } from 'antd';
import {CloseOutlined} from '@ant-design/icons';
import { httpget2 } from '../../../../utils/request';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal'
import ModalForm from '../../../rcgl/xcxj/xjrw/detailForm';
import apiurl from '../../../../service/apiurl';
import moment from "moment"

function Wxq({ id, data, dispatch }) {
  console.log(data);
  const width = 400;
  const refModal = useRef();
  const [detail, setDetail] = useState({})
  const [visible,setVisible] = useState(false)
  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };
  const getDetailData = async(id) => {
    try {
      const res = await httpget2(`${apiurl.home.wxqdetail}/${id}`);
      setDetail(res.data)
    } catch (error) {
      
    }
  }
  useEffect(() => {
    if (data?.PID) {
      getDetailData(data?.PID)
    }
  }, [data])
  

  return (
    <>
      <div className="dp-popup" style={{ position: 'absolute', top: '10px', left: 0, width, lineHeight: 1, background:'#ffffff' ,transform: 'translateX(-50%)' }}>
      <div className="dp-popup-tip" style={{marginTop:'-10px',borderBottomColor:'#f7f7f7'}}></div>
        <div className="dp-popup-content">
          <div className="content-body tyb" id='tyb'>
          <div className="title">
              <div className="name flex flexac">
                <div className='nameBorder'></div>
                {data.taskTitle}
                </div>
              <div style={{cursor:'pointer',marginRight:'10px'}} onClick={()=>{
                refModal.current.showView(data);
              }}>详情</div>
              <div className="extra">
                <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
              </div>
            </div>

            <div className="body">
              <Descriptions labelStyle={{padding:"5px 0"}}>
                <Descriptions.Item label="巡查完成日期" span={3} contentStyle={{ padding: "5px 0" }}>{data?.finishTime || detail?.adnm}</Descriptions.Item>
                <Descriptions.Item label="检查人" span={3} contentStyle={{padding:"5px 0"}}>{data?.inspectUserName || detail?.ptcount}</Descriptions.Item>
                <Descriptions.Item label="任务类型" span={3} contentStyle={{padding:"5px 0"}}>{data?.etcount || detail?.etcount}</Descriptions.Item>
                <Descriptions.Item label="问题数量" span={3} contentStyle={{padding:"5px 0"}}>{data.problemNum  || detail?.htcount}</Descriptions.Item>
                <Descriptions.Item label="待处理" span={3} contentStyle={{padding:"5px 0"}}>{data.handleNum  || detail?.htcount}</Descriptions.Item>
              </Descriptions>
            </div>
          </div>
          <div className="boxfoot"></div>
        </div>
      </div>



      <BasicCrudModal
        width={1000}
        ref={refModal}
        title=""
        title1="巡查任务详情"
        component={ModalForm}
        onCrudSuccess={()=>{}}
        // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
      />
    </>
  )
}

export default React.memo(Wxq);