<template>
  <div id="water-depth-list">
    <span class="dialog-close" @click="emit('close')"></span>
    <span class="title-dialog">淤积预警</span>
    <table class="wdl-table">
      <thead>
        <th>区域名称</th>
        <th>体积（m³）</th>
      </thead>
      <tbody>
      <tr v-for="item in tableData.value" @click="handleClickRow(item)" :class="{'highlight': currentId===item.id}">
        <td>{{ item.name}}</td>
        <td>{{ item.width}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
// import { GetWhss } from '@/apis/hdsj'
import {locationYjModel} from "@/utils/map/Channel";
/* onMounted(() => {
  GetWhss().then(res => {
    if(res?.data?.Rows.length>0) {
      tableData.value = res.data.Rows.filter(row => row.TYPE==2)
    }
  })
}) */

const tableData = reactive({value: [
  { id: 'H0-H8', name: '东方明珠游船码头-临浦渡口', width: '28521.986', yujiLocation: 40 ,chick:false},
  { id: 'H8-H11', name: '杨树浦发电厂码头-东方明珠游船码头', width: '29244.135', yujiLocation: 1 ,chick:false}
]})

const currentId = ref('')

const emit = defineEmits(['close', 'pick'])

function handleClickRow(item) {
  currentId.value = item.id
  item.chick=!item.chick
  locationYjModel(item.yujiLocation,item.chick);
  // emit('pick', item)

}


</script>

<style lang="scss" scoped>
#water-depth-list {
  position: absolute;
  top: 160px;
  left: 340px;
  width: 400px;
  height: 215px;
  background: url('@/assets/imgs/page_yyjg/danger-panel.png');
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 15px;
  
  .dialog-close {
    top: 13px;
    right: 10px;
  }
  .wdl-table {
    width: 100%;
    border-spacing: 0 7px;
    thead, tbody>tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    td,th {
      &:nth-child(1) {
        width: 57%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:nth-child(3) {
        width: 23%;
      }
    }
    thead {
      th {
        font-size: 16px;
        font-weight: bold;
      }
    }
    tbody {
      display: block;
      height: 215px;
      overflow-y: auto;
      tr {
        cursor: pointer;
        td {
          font-size: 14px;
          color: #ddd;
        }
        &:hover {
          &>td {
            color: #fff;
          }
        }
        &.highlight>td {
          color: rgb(249, 238, 117);
        }
      }
    }
  }
}
</style>