<template>
  <div id="danger-wrapper">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">浦江游览企业信息</span>
    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
      <el-table-column label="序号"  type="index" :dataformatas="indexCreate" />
      <el-table-column label="企业名称" prop="companyName" min-width="160" show-overflow-tooltip />
      <el-table-column label="水路运输经营许可证号" prop="certNumber" min-width="90" show-overflow-tooltip />
      <el-table-column label="法定代表人" prop="legalPerson" min-width="60" show-overflow-tooltip />
      <el-table-column label="有效期" min-width="90" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.effectDate}}</span>
        </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>
  </div>

</template>

<script setup>
  import {onMounted, reactive, ref, watch} from 'vue'
import { GetZxjc,GetPJYLUnits } 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 tableData = reactive({value: []})

function getData() {
  GetPJYLUnits(currentPage.value,pageSize.value).then(res => {
    tableData.value = res.data?.Rows || []
    total.value = res.data.TotalRowCount
  })
}
  onMounted(() => {
    getData()
  })
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
function  indexCreate(row, column, cellValue, index) {
  return index + 1 + pageSize.value*(currentPage.value - 1)
}

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

function handleSizeChange(val) {
  // debugger
  pageSize.value = val
  currentPage.value = 1
  getData()

}
const emits = defineEmits(['closeBoatList'])

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

<style lang="scss" scoped>
#danger-wrapper {
  position: absolute;
  top: 18vh;
  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;
.title-dialog{
  padding: 15px;
}
  .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: 100%;
    margin-bottom: 7px;
    .el-table__body-wrapper::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
  }
}
</style>