<template>
  <div id="danger-wrapper">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">港口危货作业监测</span>
    <div class="dw-options">
      <label><input type="radio" name="isFinishList" :value="0" v-model="dangerIsFinishList"/>未完工</label>
      <label><input type="radio" name="isFinishList" :value="1" v-model="dangerIsFinishList"/>已完工</label>
    </div>
    <el-table :data="tableData.value" class="table-default dw-table" stripe>
      <el-table-column label="单位名称" prop="unitName" min-width="160" show-overflow-tooltip />
      <el-table-column label="船舶名称" prop="shipName" min-width="90" show-overflow-tooltip />
      <el-table-column label="货物名称" prop="cargoName" min-width="60" show-overflow-tooltip />
      <el-table-column label="危货申报单号" prop="dangerDeclareNo" min-width="90" show-overflow-tooltip />
      <el-table-column label="开工时间" min-width="90" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.startTime.slice(5,16) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完工时间" min-width="90" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.endTime.slice(5,16) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起运港" prop="startPort" min-width="60" show-overflow-tooltip />
      <el-table-column label="目的港" prop="aimPort" min-width="60" show-overflow-tooltip />
      <el-table-column label="申报数(吨/箱/辆)" prop="declareTon" min-width="90" show-overflow-tooltip />
    </el-table>
    <el-pagination
      class="pagi-default"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>

</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { GetZxjc } from '@/apis/yyjg'
import { ElTable, ElTableColumn, ElPagination } 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'


const dangerIsFinishList = ref(0)

const tableData = reactive({value: []})

function getData(isFinish, size, index) {
  GetZxjc(isFinish, size, index).then(res => {
    tableData.value = res.data?.Rows || []
    total.value = res.data.TotalRowCount
  })
}

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

function handlePageChange(val) {
  currentPage.value = val
  getData(dangerIsFinishList.value, pageSize.value, val)
}

watch(dangerIsFinishList, (val) => {
  getData(val, pageSize.value, 1)
},{immediate:true})


const emits = defineEmits(['close'])

function handleClose() {
  emits('close')
}
</script>

<style lang="scss" scoped>
#danger-wrapper {
  position: absolute;
  top: 24vh;
  left: calc(50% - 550px);
  width: 1100px;
  height: 579px;
  background: url('../../../assets/imgs/page_yyjg/danger-panel.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .dialog-close {
    top: 14px;
    right: 16px;
  }

  .dw-options {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #349ed8;
    &>label {
      margin: 0 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &>input {
        margin-right: 3px;
      }
    }
  }

  .dw-table {
    height: calc(100% - 110px);
    margin-bottom: 7px;
  }
}
</style>