<template>
    <div class="ent-info" >
        <i class="ei-close" @click="handleClose"></i>
        <div class="Tool-Header"><span class="title-dialog">{{warningTitle}}</span></div>
        <div class="tab-content" >
            <div class="tab-table table-carousel" >
                <div v-if="tableData.value.length>0">
                    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
                        <el-table-column label="企业名称" prop="cname" min-width="130" show-overflow-tooltip />
                        <el-table-column label="证书编号" prop="certNumber"  min-width="150" show-overflow-tooltip />
                        <el-table-column label="证书到期时间" min-width="100" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ scope.row.effectiveEndDate.slice(0,10)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="提醒内容" prop="type" min-width="80" show-overflow-tooltip />
                    </el-table>
                    <el-pagination
                            class="pagi-default"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="total"
                            layout="prev, pager, next"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
                <div v-else class="no-data">
                    <span>无数据</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UnitJYXK",
    }
</script>
<script  setup>

    import {ref, reactive, onMounted} from 'vue';
    import { GetUnitWarningForYun } 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: []})

    const warningType=defineProps(['unitWarningType'])

    const warningTitle = ref("")

    const typeForName=[
        {value:"portExpire",name:"港口经营许可证即将到期预警",id:1},
        {value:"dangerExpire",name:"危险货物作业附证即将到期预警",id:50}
    ]
    // 分页信息
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    const emit = defineEmits(['closeUnitXuKe'])


    function handleClose() {
        emit('closeUnitXuKe')
    }
    // 外部调用切换数据
    onMounted(() => {
        console.log(warningType.type)
        let  types= typeForName.filter(i=>i.value==warningType.unitWarningType.type)[0]
         warningTitle.value= types.name
        getList({"certType":  types.id,"pageSize":pageSize.value,"index":currentPage.value})

    })

    function handleSizeChange(val) {
        // debugger
        pageSize.value = val
        currentPage.value = 1
        getList({"certType":typeForName.filter(i=>i.value==warningType.unitWarningType.type)[0].id,"pageSize":pageSize.value,"index":currentPage.value})

    }
    // 内部调用切换数据
    function   handleCurrentChange(val) {
        currentPage.value = val
        getList({"certType":typeForName.filter(i=>i.value==warningType.unitWarningType.type)[0].id,"pageSize":pageSize.value,"index":currentPage.value})
    }
    function getList(req) {
        GetUnitWarningForYun(req).then(res=>{
            if(res.data.Rows.length>0)
            {
                console.log(res.data.Rows)
                tableData.value= res.data.Rows
            }else {
                tableData.value = []
            }
        })
    }



</script>


<style  lang="scss" scoped>
    .ent-info {
        box-sizing: border-box;
        position: absolute;
        top: 20vh;
        right: 31%;
        width: 849px;
        height: 531px;
        padding: 0 25px 15px 15px;
        background: url('@/assets/imgs/page_yyjg/cbxx-bg.png') no-repeat;
        background-size: 100% 100%;
        .Tool-Header{
            padding-top: 20px;
            height: 40px;
            width: 50%;
            text-align: left;
            position: relative;
            padding-left: 20px;
            span{
                font-size: 20px;
            }
        }
        .ei-close {
            position: absolute;
            top: 8px;
            right: 16px;
            display: block;
            width: 18px;
            height: 18px;
            background: url('@/assets/imgs/common/btn-close.png') no-repeat;
            background-size: 12px 12px;
            background-position: center;
            cursor: pointer;
        }

        .dialog-tab-fang{
            div{
                width: 30%;
            }
        }
        .tab-content {
            height: 370px;
        }

        &.ent-info-expand {
            width: 609px;
            height: 553px;

        }
        .el-table {
            border-right: none !important; /*该样式在有滚动条时去掉右边的border，达到单一border效果*/
        }
        .tab-table{
            height: 100%;
            .el-th{ text-align: center}
            .dw-table{
                width: 100%;
                overscroll-behavior-x: none;
                overscroll-behavior-y: none;
                height: 350px;

                .el-table__body-wrapper{
                    width: 95%;
                } .el-scrollbar{
                      width: 95%;
                      overflow-x: hidden;
                      overscroll-behavior-x: none;
                      overscroll-behavior-y: none;
                  }
            }
        }
        .pagi-default{
            position: absolute;
            bottom:5%;
            left: 45%;
        }
    }

</style>