<template>
  <div class="deviceList">
    <div class="table-container">
      <div class="table-header">
        <div class="table-row">
          <div class="table-cell textAlign" style="width: 40%">灾害点</div>
          <!-- <div class="table-cell" style="width: 20%"></div> -->
          <div class="table-cell textAlign" style="width: 60%">设备类型</div>
          <div class="table-cell textAlign" style="width: 40%">设备名称</div>
          <div class="table-cell textAlign" style="width: 20%">状态</div>
        </div>
      </div>
      <!-- <div
        style="
          width: 400px;
          height: 2px;
          margin-top: -16px;
          background-image: radial-gradient(#03dcf6, #032236);
          border-radius: 50%;
          box-shadow: 0px -5px 10px 0px #ccc;
        "
      >
      </div> -->
      <div class="table-body">
        <ul
          class="table-row"
          :class="{ 'table-row-active': activeEquipId === item.id }"
          v-for="(item, index) in datatable"
          :key="index"
          @click="sbEvent(item)"
        >
          <li class="table-cell" style="width: 40%" :title="item.monitorPointName">
            {{ item.monitorPointName }}
          </li>
          <!-- <li class="table-cell-icon" style="width: 20%"> </li> -->
          <li :style="item.tableCellIcon"> </li>
          <li class="table-cell-left" style="width: 40%" :title="item.deviceKind_dictText">
            {{ item.deviceKind_dictText }}
          </li>
          <li class="table-cell" style="width: 40%" :title="item.deviceName">
            {{ item.deviceName }}
          </li>
          <li class="table-cell" :style="item.online ? onlineState1 : onlineState">
            {{ item.online_dictText }}
            <!-- <span class="tooltip"> {{ item.online_dictText }} </span> -->
          </li>
        </ul>
      </div>

      <div class="deviceBack" @click="backPanel" v-show="datatable.length > 0">
        <img :src="imageList.doubleScreenBack" class="toolImage" />
        <!-- <LogoutOutlined  class='icon' /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, watch, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { useGeologicalStore } from '/@/store/modules/geological';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';

export default defineComponent({
  name: 'DeviceList',
  components: {},
  props: {
    deviceModel: {
      type: Object,
    },
  },

  setup(props, { emit }) {
    const datatable = ref([]);
    const { deviceModel } = toRefs(props);
    console.log('参数:', deviceModel);
    const imageList = reactive({
      doubleScreenBack: doubleScreenBack,
    });
    const activeEquipId = ref(String);
    const geologicalStore = useGeologicalStore();

    /**
     * @description 设备定位
     */
    function editStyle(i, d) {
      TFMapUitl.active(`sbdmarker&&${i.id}`);
      map.openInfoWindowHtml(TFMapUitl.sbdMarkerDom(i), { position: d }, () => {
        TFMapUitl.clearPointLocation_list(map);
      });
      map.popup.setOffset(-235, 80);
    }
    const sbEvent = (i) => {
      activeEquipId.value = i.id; //获取选中状态

      // let op = {
      //   destination: { x: i.deviceLon, y: i.deviceLat, z: 5000 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   TFMapUitl.mapPointLocation_list([i.deviceLon, i.deviceLat]);
      //   var html = TFMapUitl.sbdMarkerDom(i);
      //   map.openInfoWindowHtml(html, { position: [i.deviceLon, i.deviceLat] }, (tempValue) => {
      //     TFMapUitl.clearPointLocation_list(map);
      //   });
      //   map.popup.setOffset(0, -50);
      // });

      geologicalStore
        .getVisualangle({
          type: 'sb',
          typeId: i.deviceCode,
        })
        .then((res) => {
          console.log('222222:', res);
          var d = [i.deviceLon, i.deviceLat, map.terrain ? i.elevation : 0];
          if (activeSbMarker) activeSbMarker.update();
          if (res) {
            map.flyTo(res, 1, () => TFMapUitl.trends(d, null, true), editStyle(i, d));
          } else {
            TFMapUitl.trends(d, () => editStyle(i, d));
          }
        });
    };

    /**
     * 查询全部的设备列表
     */
    function getDeciveList() {
      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 10000,
          deviceKind: deviceModel._object.deviceModel.code,
        })
        .then((res) => {
          console.log('获取设备列表:', res);
          datatable.value = res.result.records;

          console.log('获取设备列表datatable:', datatable);
          datatable.value.forEach((item) => {
            item.tableCellIcon = `width: 20%;background:url('./static/img/deciveIcon/${item.deviceKind}.png') no-repeat;background-size: 50% 50%; background-position: 22px`;
          });
          // 排序
          datatable.value.sort(function (item1, item2) {
            return item2.online - item1.online;
          });
        });
    }

    /**
     * @description 返回
     */
    const backPanel = () => {
      emit('showTime', true);
    };

    /**
     * @description 初始加载
     */
    onMounted(() => {
      getDeciveList();
    });

    return {
      datatable,

      activeEquipId,

      backPanel,

      sbEvent,

      imageList,
    };
  },
});
</script>

<style lang="less" scoped>
.deviceList {
  height: 100%;
  border: 1px solid transparent;
  background: rgba(3, 49, 79, 0.4);
  padding: 5px 20px 5px;
  // border: 1px red solid;

  .deviceBack {
    height: 40px;
    width: 100%;
    position: relative;
    // border: 1px red solid;
    display: flex;
    justify-content: flex-end;

    .toolImage {
      position: relative;
      top: -1px;
      -webkit-transform: rotateY(180deg);
    }
  }

  .table-container {
    float: left;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    overflow: hidden;
    height: calc(100% - 0px) !important;
    // margin-top: -10px;

    .textAlign {
      text-align: center;
      display: flex;
      justify-content: center;
    }

    .table-header {
      margin-bottom: 10px;
      color: #00d0e3;
      font-weight: normal;
      &::after {
        // position: absolute;
        content: '';
        height: 1px;
        display: block;
        background-image: radial-gradient(#03dcf6, #032236);
        border-radius: 50%;
        box-shadow: 0px -5px 10px 0px #ccc;
      }

      .table-row {
        display: flex;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
      }
    }

    .table-body {
      // margin-top: 10px;
      overflow-y: auto;
      // max-height: 300px;
      min-height: calc(100% - 40px - 50px);
      color: #fff;

      ::v-deep(ul) {
        background: transparent;
      }

      .table-row {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
      }

      .table-row:hover {
        background: rgba(0, 175, 237, 0.1);
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
      }

      .table-row-active {
        background: rgba(0, 175, 237, 0.1);
        border-bottom: 1px solid;
        border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
      }
    }

    .table-body::-webkit-scrollbar {
      width: 4px;
      height: 6px;
    }

    .table-body::-webkit-scrollbar-thumb {
      background-color: #007e8f !important;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px;
    }

    .table-body::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0.05) !important;
    }

    .table-cell-icon {
      background: url('../../assets/images/deciveIcon/GNSS.png') no-repeat;
      background-size: 80% 80%;
      background: url('/src/assets/images/deciveIcon/CSJCY.png') no-repeat;
      background-size: 50% 50%;
    }

    .table-cell {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // padding: 8px;
      // text-align: center;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 8px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .table-cell-left {
      width: 25%;
      display: flex;
      align-items: center;

      padding: 8px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .table-cell:last-child {
      border-right: none;
    }
  }
}
.table-body::-webkit-scrollbar-thumb {
  // background-color: #ff0000; /* 滚动条滑块颜色 */
}
</style>
