<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-06-06 16:56:42
 * @LastEditors: zjz
 * @LastEditTime: 2023-06-25 21:06:09
 * @FilePath: \yx-big-screen\src\views\map\dialog\MonitorInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- 监测信息 -->
  <div class="monitor-info">
    <!-- 开发中... -->
    <template v-if="monitorList.length > 0">
      <div class="monitorList">
        <template v-for="(item, index) in monitorList" :key="'monitorList_' + index">
          <div @click="getMonitorChart(item)" :class="{ monitorListItem: true, selected: selected.value == item }">
            <!-- <span> ( <a-badge :status="item.online ? 'success' : 'error'" :text="item.online ? '在线' : '离线'" />) {{ item.deviceName }}</span> -->
            <!-- <img src="./success.jpg"/>
            <img src="./error.jpg"/> -->
            
            <span>
              <img  v-if="item.online" src="./success.png" alt="成功" style="display: inline-block;width: 16px;height: 16px;"/>
              <img  v-else src="./error.png" alt="错误" style="display: inline-block;width: 16px;height: 16px;"/>
              {{ item.deviceName }}
            </span>
          </div>
        </template>
      </div>
      <div class="monitorPageInfo">
        <deviceDetailModePage v-show="data.currentCode" :code="data.currentCode" />
      </div>
    </template>
    <template v-else>
      <div class="empty-card">
        <a-empty />
      </div>
    </template>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
import deviceDetailModePage from '/@/views/map/detailsInfo/deviceDetailModePage.vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
export default defineComponent({
  name: 'MonitorInfo',
  components: { deviceDetailModePage },
  props: {
    geologicalInfo: null,
  },
  setup(_, { emit }) {
    const data = reactive({
      currentCode: null,
    });
    const dzdInfo = _.geologicalInfo;
    const monitorList = reactive([]);
    getMonitorList();
    /**
     * 根据 地灾点获取监测设备
     */
    function getMonitorList() {
      debugger;
      TFMapUitl.clearArray(monitorList);
      data.currentCode = null;
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 10000,
          monitorPointId: dzdInfo.id,
          // monitorPointId: '13',
        })
        .then((res) => {
          // debugger
          console.log('获取设备列表:', res);
          monitorList.push(...res.result.records);
          // monitorList.push(...res.result.records);
          // monitorList.push(...res.result.records);
          //默认选择第一个
          if (monitorList.length > 0) {
            data.currentCode = monitorList[0];
            selected.value = monitorList[0];
          }
        });
    }
    
    const selected = reactive({ value: null });
    /**
     * 打开监测设备详情
     */
    function getMonitorChart(code) {
      // console.log(code.Target.id,'code');
      data.currentCode = code;
       // 处理选中监控项的逻辑
       selected.value = code;
       console.log(selected.value,'selected.value');
    }
    onMounted(() => {});
    return {
      data,
      monitorList,
      getMonitorChart,
      selected
    };
  },
});
</script>
<style lang="less" scoped>
.monitor-info {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;

  .monitorList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 750px;
  width: 190px;
  background: #103e6a;
  overflow-y: auto; /* 添加滚动条 */

  .monitorListItem {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    padding-left: 10px;
  }
}
.monitorList::-webkit-scrollbar-thumb {
  background-color: #007E8F; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
  .monitorPageInfo {
    float: right;
    width: calc(100% - 190px);
    height: 100%;
  }
}

.empty-card {
  width: 100%;
  height: 100%;
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selected {
  // background-color: red;
  background-image: url("./back.png");  // 设置选中状态的背景图片
  background-size: 100% auto;
  /* 添加其他样式以适应你的需求 */
}
</style>
