<template>
  <div class="boat-dock-list">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">疏浚船舶</span>
    <template v-if="list.length>0">
      <el-table :data="list" class="table-default dw-table"  stripe>
        <el-table-column label="序号"  type="index" min-width="40" :dataformatas="indexCreate" />
        <el-table-column label="船舶名称" prop="SHIPNAME" min-width="100" show-overflow-tooltip />
        <el-table-column label="船舶类型" prop="SHIPTYPE" min-width="65" show-overflow-tooltip />
        <el-table-column label="吞吐量(方)" prop="TONNAGE" min-width="75" show-overflow-tooltip />
        <el-table-column label="视频监控" min-width="65">
          <template #default="scope">
            <el-button type="primary" :disabled="!scope.row?.VIDEOID" class="btn-check" @click="checkVideo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
            class="pagi-default"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
    >
    </el-pagination>
    </template>

    <div class="no-data" v-else>
      无数据
    </div>
    <!-- <transition name="loading">
      <div class="loading" v-if="showLoading">加载中...</div>
    </transition> -->
    <Teleport to="#common">
      <VideoForBoat v-show="Boolean(currentVideoId)" :video-id="currentVideoId" @close="handleCloseVideo" />
    </Teleport>
  </div>
</template>

<script>
export default {
  name: 'BoatDockList',
}
</script>

<script setup>
  import { onMounted,onBeforeMount, reactive, ref, computed, watch } from 'vue'
  import { getDredgingShip } from '@/apis/hdsj'
  import VideoForBoat from './VideoForBoat.vue';
  import {clearMap} from "@/utils/map/ArcgisUtil";
  import { ElTable, ElTableColumn, ElPagination, ElButton } from 'element-plus'
  import 'element-plus/es/components/table/style/css'
  import 'element-plus/es/components/table-column/style/css'
  import 'element-plus/es/components/pagination/style/css'
  import 'element-plus/es/components/button/style/css'
  const props = defineProps(['objId'])
  // const showLoading = ref(false)

  const list = ref([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)

  const reqs = computed(() => {
    return {
      projectId: props.objId,
      index: currentPage.value,
      size: pageSize.value
    }
  })

  watch(() => props.objId, () => {
    console.log("入参数据：",reqs.value)
    currentPage.value = 1
    getBoats(reqs.value)
  },{ immediate: true })

  const emit = defineEmits(['closeBoatList'])

  function handleClose() {
    emit('closeBoatList')
  }
  function  indexCreate(row, column, cellValue, index) {
    return index + 1 + pageSize.value*(currentPage.value - 1)
  }

  function handlePageChange(val) {
    currentPage.value = val
    getBoats(reqs.value)
  }

  function handleSizeChange(val) {
    // debugger
    pageSize.value = val
    currentPage.value = 1
    getBoats(reqs.value)
  }

  function  getBoats(prop) {
    getDredgingShip(prop).then(req=>{
      console.log("出参数据：",req)
      if (req.code=='200'){
        console.log("出参数据：",req.data.Rows)
        list.value=req.data.Rows.sort((a,b)=> a['SHIPTYPE'].localeCompare(b['SHIPTYPE']))
        total.value = req.data.TotalRowCount
      }
    })
  }

  const currentVideoId = ref('')

  function checkVideo(row) {
    currentVideoId.value = row['VIDEOID']
  }

  function handleCloseVideo() {
    currentVideoId.value = ''
  }

</script>

<style lang="scss" scoped>
.boat-dock-list {
  position: absolute;
  top: 15vh;
  right: 30vh;
  box-sizing: border-box;
  padding: 20px;
  width: 423px;
  height: 650px;
  overflow: hidden;
  background: url('@/assets/imgs/page_ssky/bg-popup.png') no-repeat;
  background-size: 100% 100%;

  .no-data {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px);
    text-align: center;
    color: #eee;
  }

  // .loading {
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 40px;
  //   text-align: center;
  //   color: #ddd;
  //   font-size: 14px;
  //   line-height: 40px;
  //   background: linear-gradient(0deg, rgb(26, 48, 86, 1) 0%, rgba(26, 48, 86, 0.2) 100%);
  // }


  // .loading-enter-active,.loading-leave-active{
  //   transition: all 0.2s ease;
  // }
  // .loading-enter-from,.loading-leave-to {
  //   opacity: 0;
  //   transform: translateY(40px);
  // }
  .dw-table {
    height: 90%;
    padding-top: 2vh;
    margin-bottom: 7px;
    .el-table__body-wrapper::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
  }

  .btn-check {
    // background: rgba(52, 143, 208,0.65);
    // border: 1px solid rgb(84, 157, 208);
    // padding: 4px 8px;
    // border-radius: 3px;
    // cursor: pointer;
    // &:hover {

    // }
    height: 26px;
    padding: 0 10px;
    font-size: 14px;
    color: #ddd;

    &.is-disabled {
      background-color: #409eff;
      filter: opacity(0.7) brightness(0.7);

    }
  }

}
</style>
