<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
            :row-key="getRowKey"
            highlight-current-row
            :current-row-key="currentRowKey"
            @row-click="rowClick"
            v-loading="tableLoading"
            style="width: 100%;"
            height="100%"
            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="mainlineName"
              label="路口名称"
          >
          </el-table-column>
          <el-table-column
              align="center"
              width="100"
              prop="trafficIndex"
              label="拥堵指数"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </msg-card>
</template>

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

export default {
  name: 'lineRank',
  components: {MsgCard},
  data() {
    return {
      currentRowKey:'',
      tableData: [],
      fullData: [],
      crossName: '',
      tableLoading: true
    }
  },
  mounted() {
    // this.$emit('lineChange', 1)
    this.getList()
  },
  methods: {
    getRowKey(row){
      return row.mainlineName
    },
    resetHighLight(){
      this.currentRowKey = null
    },
    getList(){
      mainlineList({}).then(res=>{
        this.tableLoading =false
        this.fullData = res.data.content.map((item,index)=>{
          return {...item, index:index+1}
        })
        this.tableData = JSON.parse(JSON.stringify(this.fullData))
      })
    },
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
          return "row-odd";
      } else {
          return "row-even";
      }
    },
    rowClick(row) {
      this.$emit("lineChange", row);
    },
    filterCrossTable(e) {
      this.tableData = this.fullData.filter((item) => {
        return item.mainlineName.includes(e);
      });
    },
  }
}
</script>
<style lang="less" scoped>
@import url("../../../../assets/less/elementTable.less");

.s_input {
  margin-bottom: 15px;
}

::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;
}

.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>