<template>
  <div style="width: 430px">
    <div class="vjmapgis-popup-content__title" :style="{ cursor: 'pointer' }" @click="clickHandler">{{ node.mineName }}</div>
    <div class="vjmapgis-popup-content__divider"></div>
    <div class="vjmapgis-popup-content__board mb-1">
      <div class="mr-5px">所属上级</div>
      <div>{{ node.parentArea }}</div>
    </div>
    <div class="vjmapgis-popup-content__board mb-1">
      <div class="mr-5px">瓦斯等级</div>
      <div>{{ node.gasLevelName }}</div>
    </div>
    <div class="vjmapgis-popup-content__board">
      <div class="mr-5px">生产状态</div>
      <div>{{ node.gjMineStatus }}</div>
    </div>
    <div class="vjmapgis-popup-content__divider"></div>
    <div class="vjmapgis-popup-content__table_container">
      <table class="vjmapgis-popup-content__table w-full mt-1">
        <thead>
          <tr>
            <th>序号</th>
            <th class="w-200px">煤层名称</th>
            <th>自燃发火倾向性</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in coalSeamList" :key="item.id">
            <td>{{ (index as number) + 1 }}</td>
            <td>{{ item.coalSeamName }}</td>
            <td>
              {{ item.coalSeamLevel }}
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="!goafDataList.length" class="vjmapgis-popup-content__table_empty">暂无数据</div>
    </div>
    <div class="vjmapgis-popup-content__divider"></div>
    <div class="vjmapgis-popup-content__table_container">
      <table class="vjmapgis-popup-content__table w-full mt-1">
        <thead>
          <tr>
            <th>序号</th>
            <th class="w-140px">老空区密闭名称</th>
            <th>最高风险等级</th>
            <th>通讯状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in goafDataList" :key="item.id">
            <td>{{ (index as number) + 1 }}</td>
            <td>{{ item.devicePos }}</td>
            <td
              :style="{
                color: get(alarmLevelColor, node.alarmLevel, alarmLevelText[0]),
              }"
            >
              {{ get(alarmLevelText, node.alarmLevel, alarmLevelText[0]) }}
            </td>
            <td
              :style="{
                color: get(linkStatusColor, node.status, linkStatusText[0]),
              }"
            >
              {{ get(linkStatusText, node.status, linkStatusText[0]) }}
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="!goafDataList.length" class="vjmapgis-popup-content__table_empty">暂无数据</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { get } from 'lodash-es';
  import { computed, ref } from 'vue';
  import { StatusColorEnum } from '/@/enums/jeecgEnum';

  const props = defineProps<{
    node: any;
    callback: any;
  }>();

  function clickHandler() {
    props.callback(props.node);
  }
  // const linkStatusText = ref(['断线', '正常', '标校']);
  const linkStatusText = ref({
    '-1': '断线',
    '0': '在线',
  });
  const alarmLevelText = ref({
    '0': '暂无信息',
    '1': '低风险',
    '2': '一般风险',
    '3': '较高风险',
    '4': '高风险',
  });
  // const alarmLevelColor = ref([StatusColorEnum.red, StatusColorEnum.blue, StatusColorEnum.gold, StatusColorEnum.purple, StatusColorEnum.red]);
  const linkStatusColor = ref({
    '-1': StatusColorEnum.red,
    '0': StatusColorEnum.green,
  });
  const alarmLevelColor = ref({
    '0': StatusColorEnum.red,
    '1': StatusColorEnum.blue,
    '2': StatusColorEnum.gold,
    '3': StatusColorEnum.purple,
    '4': StatusColorEnum.red,
  });

  const coalSeamList = computed(() => {
    return JSON.parse(props.node.coalSeamList);
  });
  const goafDataList = computed(() => {
    return JSON.parse(props.node.goafDataList);
  });
</script>
<style lang="less">
  .vjmapgis-popup-content {
    &__divider {
      height: 1px;
      background-color: @white;
      margin: 10px 5px;
    }

    &__title {
      margin-top: 10px;
      font-size: 20px;
      color: @white;
      text-align: center;
    }

    &__strong {
      color: @white;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }

    &__board {
      font-size: 16px;
      padding: 10px;
      border-radius: 5px;
      background-color: @map-popup-board-bg;
      color: @text-color-base;
      display: flex;
      justify-content: space-between;
    }

    &__table_container {
      max-height: 200px;
      overflow-y: auto;
    }

    &__table {
      color: @white;
      text-align: center;
      font-size: 16px;

      thead {
        height: 20px;
      }
      tbody {
        tr {
          background-color: @map-popup-table-th-bg;
        }
        tr:nth-child(even) {
          background-color: @map-popup-table-theven-bg;
        }
        td {
          padding: 5px;
        }
      }
    }

    &__table_empty {
      font-size: 16px;
      width: 100%;
      text-align: center;
      background-color: @map-popup-table-theven-bg;
      padding: 10px;
    }
  }
</style>
