<template>
  <div class="main">
    <div class="search">
      <div class="left_blank"/>

      <transition name="el-zoom-in-center">
        <div class="search_main" v-show="showSearch">

          <el-select style="width: 60px;margin-left: 5px" v-model="patientType">
            <el-option :value="1" label="住院"/>
            <el-option :value="2" label="门诊"/>
          </el-select>
          <el-date-picker
              :disabled="!(patientType === 1 && inHospital=== 2)"
              v-model="dateRange"
              :shortcuts="shortcuts"
              end-placeholder="结束日期"
              placeholder="选择日期"
              range-separator="至"
              start-placeholder="开始日期"
              style="width: 220px;top:3px"
              type="daterange"/>

          <el-select style="width: 60px" v-model="inHospital" :disabled="patientType === 2">
            <el-option :value="1" label="在院"/>
            <el-option :value="2" label="出院"/>
          </el-select>

          <el-button icon="Search" type="primary" @click="queryData"/>

        </div>
      </transition>

      <div class="search_icon 小手指" @click="showSearch = !showSearch">
        <el-icon>
          <ArrowLeftBold v-show="showSearch"/>
          <ArrowRightBold v-show="!showSearch"/>
        </el-icon>
      </div>

    </div>
    <div id="allmap" style="height: 100%;width: 100%"></div>
    <transition name="el-fade-in-linear">
      <div class="patient_info" v-show="showInfoWindow">
        <el-icon class="close 小手指" @click="closePatientInfoWindow">
          <CircleClose/>
        </el-icon>
        <div class="title" @click="locateThePatient">
          患者信息
        </div>
        <div class="body">
          <span>
          患者姓名:{{ patientInfo.name }}
          </span>
          <span>
          门诊/住院号: {{ patientInfo.patNo }}
          </span>

        </div>
      </div>
    </transition>
  </div>
</template>


<script setup>
import {patientAddress} from "@/api/reports/patient-distribution-address";
import {shortcuts} from '@/data/shortcuts'
import {getDateRangeFormatDate} from "@/utils/date";
import thyy from '@/assets/csthyylogoplain.png'

let thyyLocation = new BMap.Point(112.96716239793697, 28.309655062968343)

let patientInfo = $ref('')
let showInfoWindow = $ref(false)

let showSearch = $ref(false)
let dateRange = $ref([])
let inHospital = $ref(1)
let patientType = $ref(1)

const createADrawing = (data) => {
  map.clearOverlays()
  createAHospitalLogo()

  let points = []

  for (let i = 0, len = data.length; i < len; i++) {
    let item = data[i];
    points.push({
      geometry: {
        type: 'Point',
        patientData: item,
        coordinates: [item.longitude, item.latitude]
      },
    })
  }

  const dataSet = new mapv.DataSet(points);

  const options = {
    shadowColor: 'rgba(255, 250, 50, 1)',
    shadowBlur: 10,
    // 非聚合点的颜色和大小，未设置icon或icon获取失败时使用
    fillStyle: 'rgba(255, 50, 0, 1.0)',
    size: 50 / 3 / 2, // 非聚合点的半径
    minSize: 8, // 聚合点最小半径
    maxSize: 31, // 聚合点最大半径
    globalAlpha: 0.8, // 透明度
    clusterRadius: 150, // 聚合像素半径
    maxClusterZoom: 18, // 最大聚合的级别
    maxZoom: 19, // 最大显示级别
    minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合
    extent: 400, // 聚合的细腻程度，越高聚合后点越密集
    label: { // 聚合文本样式
      show: true, // 是否显示
      fillStyle: 'white',
    },
    gradient: {0: "blue", 0.5: "#28f51a", 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
    draw: 'cluster',
    methods: {
      click(point) {
        if (point?.geometry?.patientData) {
          deletePreviousPunctuation()
          map.removeOverlay(new BMap.Point(patientInfo.longitude, patientInfo.latitude))
          showInfoWindow = true
          patientInfo = point?.geometry?.patientData
          patientInfo.mapPoint = new BMap.Point(patientInfo.longitude, patientInfo.latitude)
          locateThePatient()
          marker()
        }
      }
    }
  }
  new mapv.baiduMapLayer(map, dataSet, options);
}

const locateThePatient = () => {
  map.panTo(patientInfo.mapPoint)
}

const marker = () => {
  const marker = new BMap.Marker(patientInfo.mapPoint);
  marker.id = patientInfo.patNo
  map.addOverlay(marker)
}

const closePatientInfoWindow = () => {
  showInfoWindow = false
  deletePreviousPunctuation()
}

const deletePreviousPunctuation = () => {
  let data = map.getOverlays()
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    if (data[i].id) {
      if (data[i].id === patientInfo.patNo) {
        map.removeOverlay(item)
      }
    }
  }
}

const queryData = () => {
  let dateS = getDateRangeFormatDate(dateRange)
  map.panTo(thyyLocation)
  patientAddress(patientType, inHospital, dateS.startTime, dateS.endTime).then((res) => {
    createADrawing(res)
  })
}

const createAHospitalLogo = () => {
  const myIcon = new BMap.Icon(thyy, new BMap.Size(40, 40));
  myIcon.setImageSize(new BMap.Size(40, 40))
  const marker = new BMap.Marker(thyyLocation, {
    icon: myIcon
  });
  map.addOverlay(marker);
}

onMounted(() => {
  window.map = new BMap.Map("allmap", {
    enableMapClick: false
  }); // 创建Map实例
  map.centerAndZoom(thyyLocation, 15); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  queryData()

})


</script>

<style scoped lang="scss">
.main {
  position: relative;
  width: 100%;
  height: 100%;

  .search {
    margin: 5px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    z-index: 10;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    line-height: 40px;

    .search_main {
      padding: 5px;
    }

    .search_icon {
      padding: 5px;
    }
  }

  .patient_info {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    font-size: 16px;
    width: 220px;
    text-align: center;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    .close {
      position: absolute;
      left: 0;
      top: 0;
    }

    .title {
      background-color: #0a84fd;
      border-radius: 5px;
      color: white;
      margin: 5px;
      padding: 5px;
    }

    .body {
      color: #000000;
      font-size: 12px;
      text-align: left;
      margin: 5px;
    }

  }
}

</style>
