<template>
    <!-- 设备设施的三级路由的tabs -->
    <div class='dialog-container'>
        <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
            <!-- 除了清单和原理页面，别的都有记录事项detailDialog页面 -->
            <div slot='title' class='header-title' v-if='Object.keys(dialogInfo).length>0'>
                <span class='title-name'>{{systemName}}-{{dialogInfo.label}}</span>
                <img v-if='dialogInfo.id.slice(2,4)!="QD" && dialogInfo.id.slice(2,4)!="YL"' src='../../assets/imgs/zy1.png' @click='visibalBox' alt />
            </div>
            <!-- 没有tab的页面 -->
            <div v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length==0'>
                <!-- 原理图 -->
                <div v-if='dialogInfo.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
                    <rotation :rotationImg='rotationImg'></rotation>
                </div>
                <!-- 土建系统主要材料清单 -->
                <tj-table v-else-if='dialogInfo.id.slice(0,4)=="TJQD"' :param='param'></tj-table>
                <!-- 主要设备清单 标准设备表格 -->
                <standTable v-else-if='dialogInfo.id.slice(2,4)=="QD"' :param='param' :major='dialogInfo.id'></standTable>
                <!-- 电井商铺范围清单 -->
                <djsp-table v-else-if='dialogInfo.id.slice(0,4)=="GJSP"'></djsp-table>
                <!-- 查看图纸 -->
                <look-page v-else-if='dialogInfo.id.slice(2,4)=="TZ"' param major></look-page>
            </div>
            <!-- 有tab的页面 -->
            <div v-else>
                <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.param.tab_code}`'
                    >
                        <!-- 有tab的原理图 -->
                        <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
                            <rotation :rotationImg='rotationImg'></rotation>
                        </div>
                        <!-- 主要设备清单 标准设备表格加tab -->
                        <tableList v-else-if='value.id.slice(0,4)=="RDQD"' :param='param' ref='list1' major='弱电'></tableList>
                        <tableList v-else-if='value.id.slice(0,4)=="NTQD"' :param='param' ref='list2' major='暖通'></tableList>
                        <!-- 维保表格 -->
                        <wb-table v-else-if='value.id.slice(2,4)=="WB"' :smsxt='smsxt'></wb-table>
                        <!-- 维修的表格 -->
                        <wx-table v-else-if='value.id.slice(2,4)=="WX"' :smsxt='smsxt'></wx-table>
                        <!-- 专维 -->
                        <zw-table v-else-if='value.id.slice(2,4)=="ZW"' :smsxt='smsxt' :major='dialogInfo.id'></zw-table>
                        <!-- 其他 -->
                        <other-table v-else-if='value.id.slice(2,4)=="QT"' :smsxt='smsxt' :major='dialogInfo.id'></other-table>
                        <!-- 建筑立面图 -->
                        <tj-build-table v-else-if='value.id.slice(0,4)=="TJLM"'></tj-build-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <!--记录表格 -->
        <record-dialog ref='Dialog'></record-dialog>
    </div>
</template>
<script>
import tableList from './table/eqListTable'
import tjTable from './table/tjTable'
import wbTable from './table/wbTable'
import zwTable from './table/zwTable'
import lookPage from './table/lookPageTable'
import standTable from './table/standTable'
import otherTable from './table/otherTable'
import wxTable from './table/wxTable'
import recordDialog from './table/recordDialog'
import djspTable from './table/djspTable'
import { queryPic } from '@/api/public.js'
export default {
    props: ['systemName', 'smsxt'],
    data() {
        return {
            activeName: '',
            visible: false,
            dialogInfo: {},
            param: '',
            rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
        }
    },
    mounted() {
        this.initImage()
    },
    components: { tableList, tjTable, wbTable, zwTable, lookPage, standTable, otherTable, wxTable, recordDialog, djspTable },
    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].param.tab_code
            } else {
                this.activeName = this.dialogInfo.param.tab_code
            }
            this.param = this.activeName
        },
        handleClick(tab) {
            if (this.param) {
                this.param = tab.name
            } else if (this.smsxt) {
                this.smsxt = tab.name
            }
            this.activeName = tab.name
        },

        visibalBox() {
            this.$refs.Dialog.open()
        },
        initImage() {
            let getParams = {
                data: { tyepcode: 8, plazaId: '1001145' },
                params: {}
            }
            queryPic(getParams).then(res => {
                console.log('resres', res)
                this.rotationImg = res.data
            })
        }
    }
}
</script>
<style lang="less" scoped>
.dialog-container {
    .title-name {
        font-size: 16px;
        padding-right: 6px;
        color: #000;
        font-weight: bold;
    }
}
.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;
        height: 90%;
    }
    .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,
    .el-tabs__content {
        height: 700px;
    }
    .el-tabs__active-bar {
        background-color: transparent !important;
    }
    .is-active {
        color: #025baa;
        border-color: #025baa;
    }
}
</style>