
<template>
    <!-- 详情页面 -->
    <div class='gdqd-dialog1'>
        <el-dialog :title='`${row.sbjc}-设备详情`' :visible.sync='visible' :fullscreen='true'>
            <div class='top'></div>
            <div class='qdxq-top'>
                <div class='gdqd-dialog-top'></div>
                <div class='gdqd-dialog-bottom'>
                    <el-table @row-click='innerTable' :data='tableData' :border='true' style='width: 100%'>
                        <el-table-column type='index' label='序号' width='60'></el-table-column>
                        <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='338'>
                            <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
                            <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='sl' label='数量' width='60'>
                            <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
                        </el-table-column>
                        <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
                            <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
                            <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
                            <template slot-scope='{row}'>{{row.brand || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='100'>
                            <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
                            <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='250'>
                            <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
                            <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='300'>
                            <template slot-scope='{row}'>{{row.fws || '--'}}</template>
                        </el-table-column>
                        <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
                            <template slot-scope='{row}'>{{'--'}}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class='qdxq-bottom'>
                <div class='wb-title'>
                    <div class='tab-title' id='1' :class='activeId==1?"active-is":""' @click='tabClick(1)'>维保</div>
                    <div class='tab-title' id='2' :class='activeId==2?"active-is":""' @click='tabClick(2)'>维修</div>
                </div>
                <div v-if='activeId==1'>
                    <el-tabs v-model='activeName1' @tab-click='handleClickWb'>
                        <el-tab-pane label='重要维保' name='wb1' v-if='Object.keys(this.row).length>0'>
                            <wbTable ref='wb1' :smsxt='smsxt' tabLabel='重要维保' :diff='diff' :assetnum='row.assetnum' :size='3'></wbTable>
                        </el-tab-pane>
                        <el-tab-pane label='日常维保' name='wb2' v-if='Object.keys(this.row).length>0'>
                            <rcwbTable ref='wb2' :smsxt='smsxt' tabLabel='日常维保' :diff='diff' :assetnum='row.assetnum' :size='3'></rcwbTable>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div v-if='activeId==2'>
                    <el-tabs v-model='activeName2' @tab-click='handleClickWx'>
                        <el-tab-pane label='重要维修' name='wx1' v-if='Object.keys(this.row).length>0'>
                            <wxTable ref='wx1' :smsxt='smsxt' tabLabel='重要维修' :diff='diff' :assetnum='row.assetnum' :size='3'></wxTable>
                        </el-tab-pane>
                        <el-tab-pane label='日常维修' name='wx2' v-if='Object.keys(this.row).length>0'>
                            <rcwxTable ref='wx2' :smsxt='smsxt' tabLabel='日常维修' :diff='diff' :assetnum='row.assetnum' :size='3'></rcwxTable>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { Select } from 'meri-design'
import { mapGetters } from 'vuex'
import { queryAsset } from '@/api/equipmentList.js'
import { querySelect } from '@/api/public.js'
import inputDialog from './inputDIalog'
import rcwbTable from './rcwbTable'
import wbTable from './wbTable'
import rcwxTable from './rcwxTable'
import wxTable from './wxTable'
export default {
    data() {
        return {
            tableData: [],
            dataSelect2: [
                { id: 'test1', name: '选择项' },
                { id: 'test2', name: '单平米' },
                { id: 'test3', name: '下级分项' },
                { id: 'test4', name: '滑动平均滑动平均' },
            ],
            // page: 1,
            // size: 10,
            // total: 1,
            sbjc: '',
            brand: '',
            wzjc: '',
            floor: '1',
            status: '1',
            manufacturer: '',
            fws: '',
            sbglgs: '1',
            sbglgsOption: [],
            statusOption: [],
            floorAllSelect: [],
            activeId: '1',
            activeName1: 'wb1',
            activeName2: 'wx1',
            row: {},
            visible: false,
            smsxt: '',
            diff: '',
        }
    },
    components: {
        Select,
        inputDialog,
        rcwbTable,
        wbTable,
        rcwxTable,
        wxTable,
    },
    computed: {
        ...mapGetters(['floorSelect']),
    },
    methods: {
        tabClick(item) {
            this.activeId = item
        },
        handleClickWb(label) {
            if (this.$refs[`${label.name}`]) {
                this.$refs[`${label.name}`].startMethods()
            }
        },
        handleClickWx(label) {
            if (this.$refs[`${label.name}`]) {
                this.$refs[`${label.name}`].startMethods()
            }
        },
        innerTable(row) {
            if (row.assetuid) {
                window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
            }
        },
        queryTableList() {
            let data = {
                plazaId: this.$store.state.plazaId,
            }
            let postParams = {
                classstructureid: this.row.classstructureid,
                type_code: this.row.type_code,
                manufacturer: this.row.manufacturer || '--',
                sbxh: this.row.sbxh || '--',
                brand: this.row.brand || '--',
                assetnum: this.assetnum,
            }
            //区分主要设备
            if (this.smsxt != '1008') {
                data.onlyMainAsset = true
            }
            queryAsset({ data, postParams }).then((res) => {
                //console.log(res)
                this.tableData = res.data.data
                if (this.tableData.length > 0) {
                    this.row = this.tableData[0]
                    this.smsxt = this.row.system_code
                    this.$refs.wb1.startMethods()
                }
                this.total = res.data.count
            })
        },
        //弹框出现
        open(row) {
            this.visible = true
            this.row = JSON.parse(row.row)
            this.assetnum = this.row.assetnum
            this.smsxt = this.row.system_code
            console.log(this.smsxt)
            this.queryTableList()
        },
    },
}
</script>
<style lang="less" scoped>
.gdqd-dialog1 {
    display: flex;
    flex-direction: column;
    .qdxq-top {
        .gdqd-dialog-top {
            // margin-bottom: 20px;
        }
        .gdqd-dialog-bottom {
            overflow: hidden;
            //max-height: 12vh;
        }
    }
    .qdxq-bottom {
        flex: 1;
        .wb-title {
            display: flex;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            margin: 20px 0;
            .tab-title {
                padding: 4px 16px;
            }
            &:hover {
                cursor: pointer;
                color: #025baa;
            }
            .active-is {
                color: #025baa;
                border-bottom: 2px solid #025baa;
                cursor: pointer;
            }
        }
    }
}
@media screen and (max-width: 1600px) {
    .gdqd-dialog td {
        padding: 4px 0;
    }
}
</style>
<style lang="less">
.gdqd-dialog1 {
    /deep/.el-table td {
        cursor: pointer;
    }
    .el-dialog__header {
        padding: 16px 24px;
        color: #fff;
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
    }
    .el-dialog__title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 24px;
    }
    .qdxq-bottom {
        .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 {
            // height: 95vh;
        }
        .el-tabs__content {
            height: 60vh !important;
            /deep/ .el-tab-pane > div {
                height: 100% !important;
            }
        }
        .is-active {
            color: #025baa !important;
            border-color: #025baa !important;
        }
        .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);
        }

        /deep/ .el-tabs__item:last-child {
            border-radius: 0px 4px 4px 0px;
        }
        /deep/ .el-tabs__item:nth-child(2) {
            border-radius: 4px 0px 0px 4px;
        }
        .el-tab-pane {
            height: 100% !important;
        }
        .el-tabs__active-bar {
            background-color: transparent !important;
        }
    }
}
/deep/.el-dialog {
    margin-top: 5vh !important;
}
</style>