<template>
    <!-- 使用tree-props 防止递归 -->
    <el-table
        ref='multipleTable'
        class='expandTable'
        :data='dataList'
        style='width: 100%;z-index:1'
        :row-key='getRowKeys'
        :expand-row-keys='expands'
        :tree-props='{children:"children1", hasChildren: "hasChildren1"}'
        @expand-change='expandChange'
    >
        <el-table-column type='expand'>
            <template slot-scope='props'>
                <el-table :ref='`table${props.row.id}`' :data='props.row.children' @selection-change='handleSelectionChange' style='width:100%;'>
                    <el-table-column prop label align='right' min-width='100'></el-table-column>
                    <el-table-column type='selection' width='50'></el-table-column>
                    <el-table-column prop label align='center' width='250'>
                        <template slot-scope='{row}'>
                            <div>
                                <!-- <div style='display:flex;border:1px solid green;text-align:center'> -->
                                <img class='ex-img' v-if='row.isSatisfy==false' src='../../assets/warning.png' alt />
                                <span class='ex-span' style='width:180px;display:inline-block'>{{row.spaceLocalName}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop label min-width='130' align='center'>
                        <template slot-scope='{row}'>
                            <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop='meanTindoor' label min-width='130' align='center'>
                        <template slot-scope='{row}'>{{(row.meanTindoor).toFixed(1)}}</template>
                    </el-table-column>
                    <el-table-column prop='tindoorOverrunDuration' label min-width='130' align='center'></el-table-column>
                    <el-table-column prop='tindoorOverrunDegree' label min-width='130' align='center'>
                        <template slot-scope='{row}'>{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
                    </el-table-column>
                    <el-table-column prop='longestTindoorOverrunDuration' label min-width='180' align='center'></el-table-column>
                    <el-table-column prop='temperatureDifferenceMax' label min-width='130' align='center'>
                        <template slot-scope='{row}'>{{(row.temperatureDifferenceMax).toFixed(1)}}</template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column prop='name' label min-width='100'></el-table-column>
        <el-table-column prop label='位置详情' width='250' align='center'></el-table-column>
        <el-table-column prop label='温度要求范围(℃)' min-width='130' align='center'></el-table-column>
        <el-table-column prop label='平均温度(℃)' min-width='130' align='center'></el-table-column>
        <el-table-column prop label='累计超限时长(分钟)' min-width='130' align='center'></el-table-column>
        <el-table-column prop label='平均超限温度(℃)' min-width='130' align='center'></el-table-column>
        <el-table-column prop label='连续超限最大时长(分钟)' min-width='180' align='center'></el-table-column>
        <el-table-column prop label='最大超限程度(℃)' min-width='130' align='center'></el-table-column>
    </el-table>
</template>
<script>
import bus from '@/utils/bus.js'
export default {
    data() {
        return {
            selected: [],
            expands: []
        }
    },
    props: ['dataList', 'value2'],
    computed: {},
    watch: {
        dataList(newVal, oldVal) {
            if (newVal) {
                this.$nextTick(() => this.doSelect())
            }
        }
    },
    mounted() {
        this.initExpand()
        this.$nextTick(() => this.doSelect())
    },
    methods: {
        expandChange(row, expandedRows) {
            if (expandedRows.length > 0) {
                this.$nextTick(() => this.doSelect())
            }
        },
        initExpand() {
            this.dataList.forEach(i => {
                if (this.value2) {
                    if (i.children.some(c => c.isSatisfy == false)) {
                        this.expands.push(i.id)
                    }
                } else {
                    this.expands.push(i.id)
                }
                // if (i.children.some(c => c.isSatisfy == false)) this.expands.push(i.id)
            })
        },
        doSelect() {
            this.dataList.forEach(i => {
                i.children.forEach(row => {
                    if (!row.isSatisfy) {
                        if (this.$refs[`table${i.id}`]) {
                            this.$refs[`table${i.id}`].toggleRowSelection(row, true)
                        }
                    }
                })
            })
        },
        handleSelectionChange(val) {
            this.selected = []
            this.dataList.forEach(i => {
                i.children.forEach(row => {
                    if (this.$refs[`table${i.id}`]) {
                        this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
                    }
                    //this.selected = this.selected.concat(this.$refs[`table${i.id}`].selection)
                })
            })

            let obj = {}
            let peon = this.selected.reduce((cur, next) => {
                obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
                return cur
            }, []) //设置cur默认类型为数组，并且初始值为空的数组
            bus.$emit('drawLine', peon)
        },
        getRowKeys(row) {
            return row.id
        }
    }
}
</script>
<style lang="scss" scoped>
.expandTable {
    .ex-img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-right: 3px;
    }
    .ex-span {
        width: 50px;
        display: inline-block;
        text-align: left;
    }
}
</style>
<style lang="scss">
.expandTable {
    .el-table thead {
        display: none;
    }
    .el-table__expanded-cell {
        padding: 0;
    }
}
</style>