<template>
    <!-- 设备设施的三级路由的tabs -->
    <div class='dialog-container'>
        <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
            <div class='top'></div>
            <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
                <el-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :label='`${value.label}`' :name='`${value.id}`'>
                    <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
                        <rotation :rotationImg='rotationImg'></rotation>
                    </div>
                    <tableList v-if='value.id=="GDWB1"' ref='list'></tableList>
                    <tableList v-if='value.id=="GDWB2"' ref='list'></tableList>
                    <tableList v-else ref='list'></tableList>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
import tableList from './table/eqListTable'

export default {
    props: ['systemName'],
    data() {
        return {
            activeName: '',
            visible: false,
            dialogInfo: {},
            rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
        }
    },
    mounted() {},
    components: { tableList },
    methods: {
        showModal(item) {
            this.visible = true
            this.dialogInfo = item
            if (Object.keys(this.dialogInfo).length > 0 && this.dialogInfo.children.length > 0) {
                this.activeName = this.dialogInfo.children[0].id
                console.log(this.activeName)
            }
        },
        handleClick(tab, event) {
            console.log(tab, event)
        }
    }
}
</script>
<style lang="less" scoped>
.top {
    width: 1366px;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}
</style>
<style lang="less">
.dialog-container {
    .el-dialog__header {
        padding: 16px 24px;
    }
    .el-dialog__title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
    }
    .el-dialog__body {
        padding: 0 24px;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 16px;
    }
    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
    .el-tabs--bottom .el-tabs__item.is-top:last-child,
    .el-tabs--top .el-tabs__item.is-bottom:last-child,
    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 16px;
    }
    .el-tabs__nav-wrap::after {
        height: 0;
    }
    .el-tabs__item {
        padding: 5px 16px;
        height: 30px;
        line-height: 22px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(31, 36, 41, 1);
        border: 1px solid rgba(195, 199, 203, 1);
    }

    .el-tabs__active-bar {
        background-color: transparent !important;
    }
    .is-active {
        color: #025baa;
        border-color: #025baa;
    }
}
</style>