<template>
    <!-- 记录事项 -->
    <div class='detail-dialog'>
        <el-dialog :title='`${major}${tabName}记录事项`' width='80%' :visible.sync='visible' style='height:900px;overflow-y:scroll;'>
            <div class='bottom-table' :style='`height:${height}`'>
                <el-table
                    :data='tableData'
                    :height='tableHeight'
                    :border='true'
                    style='width: 100%;margin-bottom:12px;'
                    :span-method='objectSpanMethod'
                    v-if='tableData.length>0'
                >
                    <el-table-column label='位置' prop width='230' show-overflow-tooltip resizable>
                        <template slot-scope='{row}'>{{row.smswz || '--'}}</template>
                    </el-table-column>
                    <el-table-column label='设备' width='280' resizable>
                        <template slot-scope='{row}'>{{row.smsasset || '--'}}</template>
                    </el-table-column>
                    <el-table-column 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: [],
        }
    },
    computed: {
        tableHeight() {
            if (window.screen.height <= 768) {
                return 450
            } else {
                return 560
            }
        },
        height() {
            if (window.screen.height <= 768) {
                return 500
            } else {
                return 600
            }
        },
    },
    methods: {
        open({ system_code, wznw, apply }) {
            this.visible = true
            this.getRecordList({ system_code, wznw, apply })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.col0Count > 0) {
                    return {
                        rowspan: row.col0Count,
                        colspan: 1,
                    }
                }
                return {
                    rowspan: 0,
                    colspan: 0,
                }
            }
        },
        /**
         * @param { string } system_code 八大系统code
         * @param { string } wznw   区分各系统内外(如: 慧云机房内,慧云机房外)
         * @param { string } apply  事项类型, 含: 维修维保,专维及其他
         */
        getRecordList({ system_code, wznw, apply }) {
            let getParams = {
                system_code,
                // TODO: 添加 wznw, apply 字段
                //  wznw, apply,
                plazaId: this.$store.state.plazaId,
            }
            queryRecord({ getParams }).then((res) => {
                this.tableData = []
                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,
                        })
                    })
                })
            })
        },
    },
    mounted() {},
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
.detail-dialog {
    .el-dialog__wrapper {
        overflow: hidden !important;
    }
    .el-dialog__header {
        background: #fff !important;
        color: #909399 !important;
    }
    .el-dialog__close {
        color: #909399 !important;
    }
    /deep/.el-dialog {
        margin-top: 7vh !important;
        overflow-y: scroll !important;
    }
}
</style>