import React, { useCallback, useEffect, useState } from 'react';
import './ShYj.less';
import appconsts from '../../../../models/appconsts';
import { useDispatch } from 'react-redux';
import apiurl from '../../../../models/apiurl';
import { httpget } from '../../../../utils/request';
import config from '../../../../config';
import DpAlert from '../../../../layouts/mui/DpAlert';
import { DcpjPromise } from '../../../../models/_/dcpj';

function Item({ data, viewInfo,index }) {
  return (
    <div className="item">
      {/* <div className={`header alert${data.warngradeid === 5 ? 1 : 2}`}>
      </div> */}
      <div className="content">
        <div className="main">
          <div className="title" onClick={() => viewInfo(data)}>{ index + 1}、{data.adnm || '--'}</div>
          <div className="span"></div>
          {/* <div className="extra">{appconsts.warnStatus_TYPE[data.warnstatusid]}</div> */}
        </div>
        <div className="desc">
          <div className='item-row'>
            <span className='item-key'>预演时段:</span>
            <span className='item-value'>{data.ranger}</span>
          </div>
          <div className='item-row'>
            <span className='item-key'>情景类别:</span>
            <span className='item-value'>{data.type}</span>
          </div>
          <div className='item-row'>
            <span className='item-key'>生成时间:</span>
            <span className='item-value'>{data.time}</span>
          </div>
        </div>
        <div className="tail" style={{display:'flex',justifyContent:"flex-end"}}>
          {/* <div className="span"></div> */}
          {/* <span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span> */}
          <a onClick={() => viewInfo(data)} style={{ textAlign: 'right' }}>加载方案</a>
        </div>
      </div>
    </div>
  );
}


function ShYj({ data,setYyfaObj }) {

  const [hisdata, sethisdata] = useState();

  useEffect(() => {
    if (!data) {
      return;
    }

    if (data.length === 0) {
      httpget(apiurl.shyj.find, { adcd: config.SHYJ_ADCD, page: 1, size: 10, warnstatusid: 30 })
        .then(({ data }) => sethisdata(data.list || []))
    }
  }, [data?.length]);

  const dispatch = useDispatch();
  const viewInfo = (data) => {
    // dispatch.runtime.setYyfa({ name: "数字化预演", data })
    setYyfaObj({show:true,data})
  }

  const showdata = [
    {
      adnm:'黄土岗镇英山畈村',
      ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00',
      type: '实测降雨+无隐患',
      time:'2024-12-10 12:24:21'
    },
    {
      adnm:'黄土岗镇',
      ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00',
      type: '实测降雨+无隐患',
      time:'2024-12-10 16:23:26'
    },
    {
      adnm:'黄土岗镇英山畈村',
      ranger: '2024-12-10 10:00:00至2024-12-10 18:00:00',
      type: '实测降雨+无隐患',
      time:'2024-12-10 17:54:36'
    }
  ]

  return (
    <div className="dppanel-shyj">
      {
        showdata.map((o,i) => (
          <Item key={o.warnid} viewInfo={viewInfo} data={o} index={i} />
        ))
      }
    </div>
  )
}

export default React.memo(ShYj);