<template>
  <msg-card title="路口拥堵排名">
    <div class="msg_card_inner">
      <el-input
          class="s_input"
          style="background-color: transparent"
          placeholder="请输入路口名称"
          @input="filterCrossTable"
          v-model="crossName"
          :maxlength='64'
      >
        <template slot="prepend"><i class="el-icon-search"></i></template>
      </el-input>
      <div class="left_table">
        <el-table
            :current-row-key="currentRowKey"
            :row-key="getRowKey"
            @row-click="rowClick"
            v-loading="tableLoading"
            style="width: 100%;"
            height="100%"
            highlight-current-row
            element-loading-text="数据加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.4)"
            ref="multipleTable"
            :row-class-name="getRowClassName"
            :data="tableData"
            class="track-result-table"
            cell-class-name="custom-table-cell"
            header-row-class-name="custom-table-header"
            header-cell-class-name="custom-table-header-cell"
        >
          <el-table-column
              align="center"
              width="100"
              label="排名"
              sortable
              prop="index"
          >
          </el-table-column>
          <el-table-column
              width="auto"
              align="center"
              :show-overflow-tooltip="true"
              prop="crossName"
              label="路口名称"
          >
          </el-table-column>
          <el-table-column
              align="center"
              prop="congestionIndex"
              width="100"
              label="拥堵指数"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </msg-card>
</template>

<script>
import MsgCard from "@/components/Standard/msg-card.vue";
import {crossList,crossListSignal} from "@/common/api/signalEvaluation";

export default {
  name: 'crossRank',
  components: {MsgCard},
  data() {
    return {
      currentRowKey:'',
      tableData: [],
      fullData: [],
      crossName: '',
      tableLoading: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getRowKey(row){
      return row.crossId
    },
    resetHighLight(){
      this.currentRowKey = null
    },
    getList() {
      crossListSignal({}).then(res => {
        this.tableLoading = false;
        this.fullData = res.data.content.sort((a,b)=>{
          return b.congestionIndex - a.congestionIndex
        }).map((item, index) => {
          return {isSignal:'1',index: index + 1, ...item}
        })
        this.tableData = JSON.parse(JSON.stringify(this.fullData))
        this.rowClick(this.tableData[0])
        this.currentRowKey = this.tableData[0].crossId
      })
    },
    updateLayer(data) {
      // 拷贝再给tableData赋值，防止v-model绑定监听不生效
      let copyData = JSON.parse(JSON.stringify(this.tableData));
      for (let i = 0; i < copyData.length; i++) {
        if (copyData[i].id === data.id) {
          if (!copyData[i].isSignal.toString().includes("select")) {
            copyData[i].isSignal = "select";
          }
        } else {
          if (copyData[i].isSignal.toString().includes("select")) {
            copyData[i].isSignal = 1;
          }
        }
      }
      this.tableData = copyData;
    },
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
        return "row-odd";
      } else {
        return "row-even";
      }
    },
    rowClick(row) {
      // this.lastCheck = row;
      // this.updateLayer(row);
      // map.flyTo({
      //   center: row.location.split(","),
      // });
      this.$emit("crossChange", row);
    },
    filterCrossTable(e) {
      this.tableData = this.fullData.filter((item) => {
        return item.crossName.includes(e);
      });
    },
  }
}
</script>
<style lang="less" scoped>
@import url("../../../../assets/less/elementTable.less");



::v-deep .el-input-group__prepend {
  background-color: transparent;
  border: 1px solid rgba(25, 58, 110, 1);
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid rgba(25, 58, 110, 1);
  border-left: none;
  color: white;
  font-size: 16px;
  font-weight: 500;
}
.s_input {
  margin-bottom: 15px;
}
.msg_card_inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 10px;

  .left_table {
    overflow: hidden;
    flex-grow: 1;
  }
}
</style>