<template>
    <!-- 记录事项 -->
    <div class='detail-dialog'>
        <el-dialog :title='`${major}${tabName}记录事项`' :visible.sync='visible' style='height:900px;overflow-y:scroll;'>
            <div class='bottom-table' style='height:520px'>
                <el-table :data='tableData' height='500' :border='true' style='width: 100%;margin-bottom:12px;' :span-method='objectSpanMethod'>
                    <el-table-column label='位置' prop width='140' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.smswz || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='system' label='设备' width='200' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.smsasset || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='matter' label='记录事项' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>
                            <p class='p-style' v-for='(item,index) in row.children' :key='item.sn'>{{index+1}}) {{item.matter}}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryRecord } from '@/api/equipmentList.js'

export default {
    data() {
        return {
            visible: false,
            major: '',
            tabName: '',
            tableData: []
        }
    },
    methods: {
        open(major) {
            if (major.slice(2, 4) == 'WX') {
                this.tabName = '维修'
            } else if (major.slice(2, 4) == 'WB') {
                this.tabName = '维保'
            } else if (major.slice(2, 4) == 'ZW') {
                this.tabName = '专维'
            } else if (major.slice(2, 4) == 'QT') {
                this.tabName = '其他'
            }
            if (major.slice(0, 2) == 'GD') {
                this.major = '供电系统'
            } else if (major.slice(0, 2) == 'XF') {
                this.major = '消防系统'
            } else if (major.slice(0, 2) == 'GPS') {
                this.major = '给排水系统'
            } else if (major.slice(0, 2) == 'DT') {
                this.major = '电梯系统'
            } else if (major.slice(0, 2) == 'RQ') {
                this.major = '燃气系统'
            } else if (major.slice(0, 2) == 'RD') {
                this.major = '弱电系统'
            } else if (major.slice(0, 2) == 'NT') {
                this.major = '暖通系统'
            } else if (major.slice(0, 2) == 'TJ') {
                this.major = '土建系统'
            }
            this.visible = true
            this.getRecordList(this.major)
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.col0Count > 0) {
                    return {
                        rowspan: row.col0Count,
                        colspan: 1
                    }
                }
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        },
        getRecordList(major) {
            let getParams = {
                system: major,
                plazaId: this.$store.state.plazaId
            }
            queryRecord({ getParams }).then(res => {
                res.data.forEach(i => {
                    i.children.forEach((j, index) => {
                        this.tableData.push({
                            smswz: i.smswz,
                            smsasset: j.smsasset,
                            col0Count: index === 0 ? i.children.length : 0,
                            children: j.children
                        })
                    })
                })
            })
            console.log(this.tabName)
        }
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
.detail-dialog {
}
</style>
<style lang="less" scoped>
.detail-dialog {
    .el-dialog__wrapper {
        overflow: hidden !important;
    }
    .el-dialog {
        overflow-y: scroll !important;
    }
}
</style>