<template>
  <div class="table-box">
    <el-table
      :height="tableHeight"
      ref="multipleTable"
      :data="tableData"
      row-key="position"
      border
      default-expand-all
      @selection-change="handleSelectionChange"
      :tree-props="{ children: 'subList' }"
    >
      <el-table-column type="selection" :width="getFontSize(60)"> </el-table-column>
      <el-table-column prop="position" label="位置"> </el-table-column>
      <el-table-column prop="flow" label="流量" :width="getFontSize(75)">
      </el-table-column>

      <el-table-column
        :width="specialHeadWidth[item.metricName] || getFontSize(75)"
        v-for="(item, index) in headerData"
        :key="index"
        :prop="item.metricCode"
        :label="item.metricName"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getFontSize } from "@/common/js/utils.js";
import { getFontSizeHeight } from "@/common/js/utils.js";
export default {
  data() {
    return {
      headerData: [],
      tableData: [],
      tableHeight: null,
      specialHeadWidth: {
        溢流率: getFontSize(100),
        绿灯间隔清空率: getFontSize(150),
        三急一速数量: getFontSize(150),
        绿灯有效利用率: getFontSize(150),
        饱和度: getFontSize(100),
        负载均衡度: getFontSize(100),
        平均速度: getFontSize(85),
      },
    };
  },
  mounted() {
    this.getTableHeight();
    window.onresize = () => {
      return (() => {
        this.getTableHeight();
      })();
    };
    this.headerData = this.indexOption;
    // this.tableData = [
    //   {
    //     id: 1,
    //     a: "测试流量",
    //     address: "东进口",
    //     "1": "平均速度",
    //     children: [
    //       {
    //         id: 2,
    //         a: "子集测试流量",
    //         address: "直行",
    //         "1": "平均速度",
    //       },
    //     ],
    //   },
    //   {
    //     id: 1,
    //     a: "测试流量",
    //     address: "东进口",
    //     "1": "平均速度",
    //     children: [
    //       {
    //         id: 2,
    //         a: "子集测试流量",
    //         address: "直行",
    //         "1": "平均速度",
    //       },
    //     ],
    //   },
    // ];

    this.tableData =this.tableContentList;
    // [
    //   {
    //     positionCode: "1",
    //     position: "北进口",
    //     flow: 2670,
    //     hasProblem: 1,
    //     subList: [
    //       {
    //         positionCode: "l",
    //         dirCode: "1",
    //         position: "左转",
    //         flow: 999,
    //         hasProblem: 1,
    //         subList: null,
    //         "1": "0%",
    //         "2": "100%",
    //         "3": "101s",
    //         "4": "78m",
    //         "5": "2次",
    //         "6": "16km/h",
    //       },
    //       {
    //         positionCode: "s",
    //         dirCode: "1",
    //         position: "直行",
    //         flow: 1671,
    //         hasProblem: 1,
    //         subList: null,
    //         "1": "0%",
    //         "2": "62%",
    //         "3": "69s",
    //         "4": "120m",
    //         "5": "2次",
    //         "6": "24km/h",
    //       },
    //     ],
    //     "1": "0%",
    //     "2": "71%",
    //     "3": "55s",
    //     "4": "120m",
    //     "5": "1次",
    //     "6": "20km/h",
    //   },
    //   {
    //     positionCode: "3",
    //     position: "东进口",
    //     flow: 50,
    //     hasProblem: 0,
    //     subList: [
    //       {
    //         positionCode: "l",
    //         dirCode: "3",
    //         position: "左转",
    //         flow: 32,
    //         hasProblem: 0,
    //         subList: null,
    //         "1": "0%",
    //         "2": "50%",
    //         "3": "0s",
    //         "4": "40m",
    //         "5": "1次",
    //         "6": "12km/h",
    //       },
    //       {
    //         positionCode: "s",
    //         dirCode: "3",
    //         position: "直行",
    //         flow: 18,
    //         hasProblem: 0,
    //         subList: null,
    //         "1": "0%",
    //         "2": "100%",
    //         "3": "0s",
    //         "4": "5m",
    //         "5": "1次",
    //         "6": "24km/h",
    //       },
    //     ],
    //     "1": "0%",
    //     "2": "67%",
    //     "3": "0s",
    //     "4": "40m",
    //     "5": "1次",
    //     "6": "16km/h",
    //   },
    //   {
    //     positionCode: "5",
    //     position: "南进口",
    //     flow: 1451,
    //     hasProblem: 0,
    //     subList: [
    //       {
    //         positionCode: "l",
    //         dirCode: "5",
    //         position: "左转",
    //         flow: 542,
    //         hasProblem: 0,
    //         subList: null,
    //         "1": "0%",
    //         "2": "0%",
    //         "3": "0s",
    //         "4": "58m",
    //         "5": "0次",
    //         "6": "18km/h",
    //       },
    //       {
    //         positionCode: "r",
    //         dirCode: "5",
    //         position: "右转",
    //         flow: 28,
    //         hasProblem: 0,
    //         subList: null,
    //         "1": "0%",
    //         "2": "0%",
    //         "3": "0s",
    //         "4": "39m",
    //         "5": "0次",
    //         "6": "19km/h",
    //       },
    //       {
    //         positionCode: "s",
    //         dirCode: "5",
    //         position: "直行",
    //         flow: 881,
    //         hasProblem: 0,
    //         subList: null,
    //         "1": "0%",
    //         "2": "0%",
    //         "3": "0s",
    //         "4": "58m",
    //         "5": "0次",
    //         "6": "18km/h",
    //       },
    //     ],
    //     "1": "0%",
    //     "2": "0%",
    //     "3": "0s",
    //     "4": "58m",
    //     "5": "0次",
    //     "6": "18km/h",
    //   },
    // ];
    this.setRow();
  },
  props: ["indexOption", "tableContentList"],
  methods: {
    getFontSize: getFontSize,
    getTableHeight() {
      this.tableHeight = String(Math.floor(getFontSizeHeight(320)));
    },
    setRow() {
      const data = [];
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(this.tableData[0], true);
      });
      // this.tableData.forEach((item) => {
      //   if (
      //     item.positionCode === "1" ||
      //     item.positionCode === "3" ||
      //     item.positionCode === "5" ||
      //     item.positionCode === "7"
      //   ) {
      //     data.push(item);
      //     this.$nextTick(() => {
      //       this.$refs.multipleTable.toggleRowSelection(item, true);
      //     });
      //   }
      // });
      // if (data.length) {
      // }
      // this.$emit("tableSelectChange", data);
    },
    handleSelectionChange(val) {
      this.$emit("tableSelectChange", val);
    },
  },
};
</script>

<style lang="less" scoped>
.table-box {
  overflow-x: auto;
  /deep/.el-table__cell {
    padding-left: 15px;
  }
  /deep/.el-table__expand-icon {
    position: absolute;
    left: 5px;
  }
}
</style>
