<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>
        <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>
          <td>{{ item.height }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
// import { GetWhss } from '@/apis/hdsj'

/* 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: '101灯浮~长江西路隧道', width: '200', height: '-9.0' },
  { id: 'H8-H11', name: '长江西路隧道~军工路码头', width: '200', height: '-8.5' },
  { id: 'H11-H32', name: '军工路码头~杨树浦发电厂码头', width: '200', height: '-8.0' },
  { id: 'H32-H44', name: '杨树浦发电厂码头~东方明珠游船码头', width: '165', height: '-8.0' },
  { id: 'H44-H71', name: '东方明珠游船码头~临浦渡口', width: '127', height: '-8.3' },
  { id: 'H71-H81', name: '临浦渡口~徐浦大桥', width: '200', height: '-8.3' },
  { id: 'H81-H83', name: '徐浦大桥~远洋船务工程公司码头', width: '168', height: '-8.3' },
  { id: 'H83-H88', name: '远洋船务工程公司码头~吴泾航道下游末端', width: '168~100', height: '-8.3' },
  { id: 'H88-H93', name: '吴泾航道', width: '100', height: '-8.3' },
]})

const currentId = ref('')

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

function handleClickRow(item) {
  currentId.value = item.id
  emit('pick', item)
}


</script>

<style lang="scss" scoped>
#water-depth-list {
  position: absolute;
  top: 70px;
  left: 340px;
  width: 520px;
  height: 315px;
  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>