<template>
  <div class="dzxxList">
    <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 textAlign" style="width: 30%">灾害类型</div>
          <div class="table-cell textAlign" style="width: 30%">危险性分级</div>
        </div>
      </div>
      <!-- <div style="width: 400px; height: 2px; margin-top: -16px"> </div> -->
      <div class="table-body">
        <ul
          class="table-row"
          :class="{ 'table-row-active': activeEquipId === item.id }"
          v-for="(item, index) in dzxxDataList"
          :key="index"
          @click="sbEvent(item)"
        >
          <li class="table-cell" style="width: 40%" :title="item.dzmc">
            {{ item.dzmc }}
          </li>
          <li class="table-cell" style="width: 30%" :title="item.dzlxmc">
            {{ item.dzlxmc }}
          </li>
          <li class="table-cell" style="width: 30%" :title="item.wxxfjmc">
            {{ item.wxxfjmc }}
          </li>
        </ul>
      </div>

      <div class="deviceBack" @click="backPanel" v-show="dzxxDataList.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 TFMapUitl from '/@/utils/TFMapUitl.ts';
import doubleScreenBack from '/@/assets/images/doubleScreenBack.png';

export default defineComponent({
  name: 'DzxxList',
  components: {},
  props: {
    dzxxDataList: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  setup(props, { emit }) {
    // debugger;
    const { dzxxDataList } = toRefs(props);
    console.log('参数:', dzxxDataList.value);
    const imageList = reactive({
      doubleScreenBack: doubleScreenBack,
    });
    const activeEquipId = ref(String);

    /**
     * @description 设备定位
     */
    const sbEvent = (i) => {
      activeEquipId.value = activeEquipId.value == i.id ? '' : i.id;
      let op = {
        destination: { x: i.x, y: i.y, z: 15000 },
        orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      };
      map.flyTo(op, 1, () => {
        TFMapUitl.mapPointLocation_list([i.x, i.y]);
        var html = TFMapUitl.dzdMarkerDom(i);
        map.openInfoWindowHtml(html, { position: [i.x, i.y] }, (tempValue) => {
          TFMapUitl.clearPointLocation_list(map);
        });
        map.popup.setOffset(0, -50);
      });
    };

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

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

    return {
      activeEquipId,

      backPanel,

      sbEvent,

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

<style lang="less" scoped>
.dzxxList {
  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;
      min-height: calc(100% - 40px - 50px);
      color: #fff;
      // border: 1px red solid;

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

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

      .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; /* 设置滚动条滑块颜色 */
      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-body::-webkit-scrollbar-thumb {
  background-color: #007E8F; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
</style>
