<template>
    <div class='zhsx-log'>
        <el-dialog title='综合记录事项' width='70%' :visible.sync='visible'>
            <div class='top'></div>
            <div class='bottom'>
                <p>1.各级政府部门在广场检查中口头及书面提出的工作要求，整改事项</p>
                <p>2.广场消防安全培训、消防演习</p>
                <p>3.相关政府强制性检测的按时完成情况及检测中提出的问题</p>
                <p>4.广场安全质量第三方检测过程中列出的整改事项</p>
                <div class='bottom-table' :style='`height:${height}`'>
                    <el-table
                        :data='tableData'
                        :height='tableHeight'
                        style='width:100%;'
                        :span-method='objectSpanMethod'
                        border
                        v-if='tableData.length>0'
                    >
                        <el-table-column label='序号' type='index' width='60'></el-table-column>
                        <el-table-column prop='jcsx' label='检测事项' :show-overflow-tooltip='true' width='400'></el-table-column>
                        <el-table-column prop='zgbm' label='主管部门' :show-overflow-tooltip='true'></el-table-column>
                        <el-table-column prop='jlsx' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: ['tableData'],
    data() {
        return {
            visible: false
        }
    },
    computed: {
        tableHeight() {
            if (window.screen.height <= 768) {
                return 350
            } else {
                return 440
            }
        },
        height() {
            if (window.screen.height <= 768) {
                return 300
            } else {
                return 400
            }
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        /**
         * @name objectSpanMethod
         * @param { Object } row        当前行
         * @param { Object } column     当前列
         * @param {  Number } rowIndex   当前行号
         * @param { Number } columnIndex    当前列号
         * @return { Array,Object }
         * @description 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，
         * 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
         * 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，
         * 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
         */
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // 取出 tableData的长度, 合并记录事项 表格 使用
            let { length } = this.tableData || 1
            if (columnIndex === 2) {
                if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    let rows = 1
                    for (let i = rowIndex; i < this.tableData.length - 1; i++) {
                        if (row[column.property] === this.tableData[i + 1][column.property]) {
                            rows++
                        }
                    }
                    return {
                        rowspan: rows,
                        colspan: 1
                    }
                }
            } else if (columnIndex === 3) {
                // 记录事项表格合并
                return { rowspan: length, colspan: 1 }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.top {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}
.bottom {
    padding: 0 30px 14px 30px;
    p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(96, 106, 120, 1);
        line-height: 22px;
    }
    .bottom-table {
        margin-top: 12px;
        // element-ui table 组件 记录事项样式修改, 换行,fixed到页面中部
        /deep/ .el-table__row:first-child {
            td:last-child {
                div {
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    word-break: break-all;
                    position: fixed;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}
</style>
<style lang="less">
.zhsx-log {
    .el-dialog {
        margin-top: 10vh !important;
    }
    .el-dialog__wrapper {
        overflow: hidden;
    }
}
</style>