<template>
  <el-table
    ref="multipleTable"
    class="expandTable"
    :data="dataList"
    style="width: 100%;z-index:1"
    :row-key="getRowKeys"
    :expand-row-keys="expands"
  >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :ref="`table${props.row.id}`" :data="props.row.children" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="right"></el-table-column>
          <el-table-column prop label align="right" width="150">
            <template slot-scope="{row}">
              <img class="ex-img" v-if="row.isSatisfy==false" src="../../assets/warning.png" alt />
              <span class="ex-span">{{row.spaceLocalName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop label align="right">
            <template slot-scope="{row}">
              <span>{{row.temperatureMin}}-{{row.temperatureMax}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="meanTindoor" label align="right">
            <template slot-scope="{row}">{{(row.meanTindoor).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="tindoorOverrunDuration" label align="right"></el-table-column>
          <el-table-column prop="tindoorOverrunDegree" label align="right">
            <template slot-scope="{row}">{{(row.tindoorOverrunDegree).toFixed(1)}}</template>
          </el-table-column>
          <el-table-column prop="longestTindoorOverrunDuration" label align="right"></el-table-column>
          <el-table-column prop="temperatureDifferenceMax" label 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 align="right" width="50"></el-table-column>
    <el-table-column prop label="位置详情" align="right" width="100"></el-table-column>
    <el-table-column prop label="温度要求范围(℃)" align="right"></el-table-column>
    <el-table-column prop label="平均温度(℃)" align="right"></el-table-column>
    <el-table-column prop label="累计超限时长(分钟)" align="right"></el-table-column>
    <el-table-column prop label="平均超限温度(℃)" align="right"></el-table-column>
    <el-table-column prop label="连续超限最大时长(分钟)" align="right"></el-table-column>
    <el-table-column prop label="最大温差(℃)" align="center"></el-table-column>
  </el-table>
</template>
<script>
import bus from '@/utils/bus.js'
export default {
  data() {
    return {
      selected: [],
      expands: [],
    };
  },
  props: ["dataList"],
  computed: {
  },
  watch: {
    dataList(newVal, oldVal) {
      if(newVal) {
        this.$nextTick(() => this.doSelect())
      }
    }
  },
  mounted() {
    this.initExpand()
  },
  methods: {
    initExpand() {
      this.dataList.forEach(i => {
        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){
             this.$refs[`table${i.id}`].toggleRowSelection(row)
          }
         
        })
      })
    },
    handleSelectionChange(val) {
      this.selected = val
      bus.$emit('drawLine',val)
    },
    getRowKeys(row) {
      return row.id;
    },
  }
}
</script>
<style lang="scss" scoped>
.expandTable {
  .ex-img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }
  .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>