<template>
    <div class="ent-info" :class="{'ent-info-expand':isExpand}">
        <i class="ei-close" @click="handleClose"></i>
        <div class="Tool-Header"><span class="title-dialog">船舶信息</span></div>
        <div class="dialog-tab-fang">
            <div :class="{'disabled': !tab_usable.willWorkCount, 'highlight': currentTab==='willWorkCount'}" @click="changeTab('willWorkCount')"><span>即将作业船舶</span></div>
            <div :class="{'disabled': !tab_usable.workingCount, 'highlight': currentTab==='workingCount'}" @click="changeTab('workingCount')"><span>作业中船舶</span></div>
            <div :class="{'disabled': !tab_usable.finishWorkCount, 'highlight': currentTab==='finishWorkCount'}" @click="changeTab('finishWorkCount')"><span>作业完成船舶</span></div>
        </div>
        <div class="tab-content" v-if="isExpand">
            <div class="tab-table table-carousel" v-if="currentTab==='willWorkCount'">
                <div v-if="tableData.value.length>0">
                    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
                        <el-table-column label="船舶名称" prop="shipName" min-width="1" />
                        <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="1"  />
                        <el-table-column label="靠泊时间" min-width="1" >
                            <template #default="scope">
                                <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="离泊时间" min-width="1" >
                            <template #default="scope">
                                <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
                            </template>
                        </el-table-column>
                    </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 class="tab-table table-carousel" v-if="currentTab==='workingCount'">
                <div v-if="tableData.value.length>0">
                    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
                        <el-table-column label="船舶名称" prop="shipName" min-width="100"  />
                        <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="90" />
                        <el-table-column label="靠泊时间" min-width="100" >
                            <template #default="scope">
                                <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="离泊时间" min-width="100" >
                            <template #default="scope">
                                <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
                            </template>
                        </el-table-column>
                    </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 class="tab-table table-carousel" v-if="currentTab==='finishWorkCount'">
                <div v-if="tableData.value.length>0">
                <el-table :data="tableData.value" class="table-default dw-table"  stripe>
                    <el-table-column label="船舶名称" prop="shipName" min-width="100" />
                    <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="90" />
                    <el-table-column label="靠泊时间" min-width="100" >
                        <template #default="scope">
                            <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="离泊时间" min-width="100" >
                        <template #default="scope">
                            <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
                        </template>
                    </el-table-column>
                </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: "BoatInfo",
    }
</script>
<script  setup>

    import {onBeforeMount, onMounted, ref, reactive, computed, nextTick,watch} from 'vue';
    import { GetBoatInfos } 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 boatType=defineProps(['boatTypeForClick'])

    const typeForName=[
        {value:"willWorkCount",name:"即将作业",id:1},
        {value:"workingCount",name:"作业中",id:2},
        {value:"finishWorkCount",name:"作业完成",id:3}
        ]

    const currentTab = ref(null)
    // const tableHeight = ref(50)

    //当前类型
    const currentType = ref(1)

    const emit = defineEmits(['closeBoatInfoYunXing'])


    function handleClose() {
        emit('closeBoatInfoYunXing')
    }

    function changeTab(name) {
        let ids= typeForName.find(i=>i.value==name).id
        currentType.value=ids
        currentPage.value=1
        getList({"type": ids,"pageSize":pageSize.value,"index":currentPage.value})
    }

    // 切换打开子列表
    const isExpand = computed(() => {
        return    typeForName.find(i=>i.value==currentTab.value)
    })

    // 分页信息
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

     function handleSizeChange(val) {
         // debugger
         pageSize.value = val
         currentPage.value = 1
         getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})

     }

    // 分页信息end
    // 解析index
    function  indexCreate(row, column, cellValue, index) {
        return index + 1 + pageSize.value*(currentPage.value - 1)
    }

    // 解析船舶状态
    function  typeRes(row, column, cellValue, index) {
       return typeForName[cellValue-1].name;
    }

    const tab_usable = reactive({
        willWorkCount: false,
        finishWorkCount: false,
        workingCount: false
    })

    // 内部调用切换数据
    function   handleCurrentChange(val) {
        currentPage.value = val
        getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})
    }

    // 外部调用切换数据
    onMounted(() => {
            currentType.value= typeForName.filter(i=>i.value==boatType.boatTypeForClick.type)[0].id
            getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})

        // nextTick(()=>{
        //     tableHeight.value=window.innerHeight-this.$refs.recordTable.$el.offsetTop-70
        //     window.onresize=()=>{
        //         tableHeight.value=window.innerHeight-this.$refs.recordTable.$el.offsetTop-70
        //     }
        // })
   })

    watch(()=>currentType.value, (n, o) => {
        switch (n) {
            case 1:
                tab_usable.willWorkCount=true
                tab_usable.finishWorkCount=false
                tab_usable.workingCount=false
                break;
            case 2:
                tab_usable.willWorkCount=false
                tab_usable.workingCount=true
                tab_usable.finishWorkCount=false
                break;
            case 3:
                tab_usable.willWorkCount=false
                tab_usable.finishWorkCount=true
                tab_usable.workingCount=false
                break;
        }
        currentTab.value= typeForName.filter(i=>i.id==n)[0].value
    },{immediate:true})

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

    function getList(req) {
         req.type=currentType.value
        GetBoatInfos(req).then(res=>{
            if(res.data.Rows.length>0)
            {
                res.data.Rows.forEach(i=>{
                    i.type= req.type
                })
                tableData.value= res.data.Rows
                total.value=res.data.TotalRowCount
            }else {
                tableData.value = []
            }
        })
    }

</script>


<style  lang="scss" scoped>
    .ent-info {
        box-sizing: border-box;
        position: absolute;
        top: 23vh;
        right: 37%;
        width: 709px;
        height: 231px;
        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;
        }

        .ei-title {
            margin-bottom: 15px;
            font-weight: bold;
            font-size: 16px;
            line-height: 35px;
            text-align: left;
            font-style: italic;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        .ei-info-addr {
            height: 32px;
            margin-bottom: 0;
        }
        .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%;
            .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: 38%;
        }
    }

</style>