squi-HD/src/components/MarkerMap/dialog.ts

import { IncidentItem } from '@/api/incident';
import {
  ResourceItemDetail,
  SingleDeviceItem,
  getResourceItem,
  ResourceItemDetailResponse,
} from '@/api/resource';
import { useCommonStore } from '@/store';
import { MarkerType } from "@/store/useMarkerStore";



export const GET_INCIDENT_DIALOG_HTML = (
  item: MarkerType,
  callback = () => {},
) => {
  const commonStore = useCommonStore();
  const el = document.createElement('div');

  el.innerHTML = `
<div>
  <div class="title">事件信息</div>
  <div class="content">
        <div><span>标题：</span><span>${item?.name ?? '-'}</span></div>
        <div><span>来源：</span><span>${
          commonStore.globalDict['zhdd_incident_type']?.find(
            (i) => i.dictValue.toString() === `${item?.source}`,
          )?.dictLabel ?? '-'
        }</span></div>
        <div><span>类型：</span><span>${
          commonStore.globalDict['zhdd_incident_type']?.find(
            (i) => i.dictValue.toString() === `${item?.type}`,
          )?.dictLabel ?? '-'
        }</span></div>
        <div><span>时间：</span><span>${item?.createTime ?? '-'}</span></div>
        <div><span>地点：</span><span>${item?.addr ?? '-'}</span></div>
        <div><span>描述：</span><span>${item?.des ?? '-'}</span></div>
  </div>
  <i class="card-border-bottom-left"></i>
  <i class="card-border-bottom-right"></i>

</div>
`;

  const action = document.createElement('div');
  action.className = 'action';
  const button = document.createElement('button');
  button.className = 'el-button el-button--primary el-button--small';
  button.innerHTML = '查看';
  action.appendChild(button);
  button.addEventListener('click', callback);

  el.appendChild(action);

  return el;
};

// •	视频打开后显示数据：
// a.视频点位编号
// b.视频点位地点
// c.按钮可以打开一个窗口，然后窗口中显示摄像头拍摄内容 （目前还无该项目数据，暂定为该内容）

export const GET_VIDEO_DIALOG_HTML = (
  {
    name,
    addr,
    status
  }: MarkerType,
  callback = (type=1) => {},
) => {
  const el = document.createElement('div');
  if(status!=1 || status!="1" ) return el;
  el.innerHTML = `
  <div>
    <div class="title">视频监控信息</div>
    <div class="content">
        <div><span>编号：</span><span>${name ?? '-'}</span></div>
        <div><span>地点：</span><span>${addr ?? '-'}</span></div>
    </div>
    <i class="card-border-bottom-left"></i>
    <i class="card-border-bottom-right"></i>
  </div>`;

  const action = document.createElement('div');
  action.className = 'action';
  const button = document.createElement('button');
  button.className = 'el-button el-button--primary el-button--small';
  button.innerHTML = '查看';
  action.appendChild(button);
  button.addEventListener('click', ()=>{
    callback(1)
  });

  const button2 = document.createElement('button');
  button2.className = 'el-button el-button--primary el-button--small';
  button2.innerHTML = '监测';
  action.appendChild(button2);
  button2.addEventListener('click', ()=>{
    callback(2)

  });

  el.appendChild(action);


  // const action2 = document.createElement('div');
  // action.className = 'action action2';
  

  // el.appendChild(action2);
  return el;
};

// •	应急仓库
// a.应急仓库名称
// b.应急仓库地点
// c.应急仓库管理单位
// d.联系人
// e.联系电话
// f.按钮（方式一：跳转应急仓库详情查看物资情况，方式二：在按钮旁边打开一个列表，该列表显示应急仓库的物资情况：物资名称、型号、数量）

export const GET_WAREHOUSE_DIALOG_HTML = (item: ResourceItemDetail) => {
  var header = ['序号', '名称', '型号', '规格', '仓储数量', '可用数量', '单位'];
  const el = document.createElement('div');
  el.innerHTML = `
  <div class="ckbg">
    <div class="title">应急仓库信息</div>
    <div class="content">
      <div><span>仓库名称：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.name ?? '-'
      }</span></div>
      <div><span>地点：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.address ?? '-'
      }</span></div>
      <div><span>管理单位：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.manageUnit ?? '-'
      }</span></div>
      <div><span>联系人：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.contactName ?? '-'
      }</span></div>
      <div><span>更新时间：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.updateTime ?? '-'
      }</span></div>
      <div><span>联系方式：</span><span style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150px;'>${
        item.contactPhone ?? '-'
      }</span></div>
    </div>
    <div class="wz">
       <table id="tbl-${item.id}">
         <tr>
        ${header.map((i) => '<th>' + i + '</th>').join('')}
       </tr>

       </table>
    </div>
  </div>
  `;
  return el;
};

// •	应急车辆
// a.车牌号
// b.归属单位
// c.车辆类型 （应急车辆为实时位置，目前暂无具体数据）

export const GET_VEHICLES_DIALOG_HTML = (item: ResourceItemDetail) => {
  const el = document.createElement('div');
  el.innerHTML = `
    <div>
      <div class="title">应急车辆信息</div>
      <div class="content">
        <div><span>车牌号：</span><span>${item.name ?? '-'}</span></div>
        <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
        <div><span>车辆类型：</span><span>${item.carType ?? '-'}</span></div>
      </div>
      <i class="card-border-bottom-left"></i>
      <i class="card-border-bottom-right"></i>
    </div>
  `;
  return el;
};

// •	应急队伍
// a.队伍名称
// b.管理单位
// c.携带物资
// d.人数
// e. 联系人
// f.联系电话

export const GET_TEAM_DIALOG_HTML = (item: ResourceItemDetail) => {
  const el = document.createElement('div');
  el.innerHTML = `
<div>
  <div class="title">应急队伍信息</div>
  <div class="content">
    <div><span>队伍名称：</span><span>${item.name ?? '-'}</span></div>
    <div><span>管理单位：</span><span>${item.manageUnit ?? '-'}</span></div>
    <div><span>携带物资：</span><span>${item.carryGoods ?? '-'}</span></div>
    <div><span>人数：</span><span>${item.num ?? '-'}</span></div>
    <div><span>联系人：</span><span>${item.contactName ?? '-'}</span></div>
    <div><span>联系方式：</span><span>${item.contactPhone ?? '-'}</span></div>
  </div>
  <i class="card-border-bottom-left"></i>
  <i class="card-border-bottom-right"></i>
</div>
  `;
  return el;
};

export const GET_SINGLE_DEVICE_DIALOG_HTML = (
  item: SingleDeviceItem,
  callback = () => {},
) => {
  const el = document.createElement('div');
  el.innerHTML = `
  <div>
    <div class="title">单兵设备</div>
    <div class="content">
      <div><span>名称：</span><span>${item.userName ?? '-'}</span></div>
      <div><span>定位时间：</span><span>${item.time ?? '-'}</span></div>
    </div>
    
    <i class="card-border-bottom-left"></i>
    <i class="card-border-bottom-right"></i>
  </div>
  `;
  const action = document.createElement('div');
  action.className = 'action';
  const button = document.createElement('button');
  button.className = 'el-button el-button--primary el-button--small';
  button.innerHTML = '查看单兵';
  action.appendChild(button);
  button.addEventListener('click', callback);

  // const action2 = document.createElement('div');
  // action2.className = 'action';
  // const button2 = document.createElement('button');
  // button2.className = 'el-button el-button--primary el-button--small';
  // button2.innerHTML = '查看视频';
  // action2.appendChild(button);
  // button2.addEventListener('click', videoplay);

  el.appendChild(action);

  // el.appendChild(action2);

  console.log(el);

  return el;
};

export const renderElement = (image: any) => {
  const el = document.createElement('div');
  el.id = 'marker';
  el.style.backgroundImage = `url(${image})`;
  el.style.backgroundSize = 'cover';
  el.style.width = (24 * 2) / 576 + 'rem';
  el.style.minWidth = '24px';
  el.style.height = (25 * 2) / 576 + 'rem';
  el.style.minHeight = '25px';
  el.className = "pointerc"

  return el;
};