<template>
  <div class="full-w-h lists">
    <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"

              style="width: 100%;"
              height="100%"
              highlight-current-row
              v-loading="tableLoading"
              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="name"
                label="路口名称"
            >
<!--              prop="crossName"-->
            </el-table-column>
<!--            <el-table-column-->
<!--                align="center"-->
<!--                prop="congestionIndex"-->
<!--                width="100"-->
<!--                label="拥堵指数"-->
<!--            >-->
<!--            </el-table-column>-->
          </el-table>
        </div>
        <w-map :mapId="'dataQueries-map'" ref="wMap"/>
      </div>
    </msg-card>
  </div>
</template>

<script>
import * as mapTool from '@/utils/mapboxTools'
import WMap from "@/components/Standard/mapMapbox.vue";
import {allCamera, crossList} from "@/common/api/signalEvaluation";
import mapAssets from "@/config/holo/mapAssets";
import MsgCard from "@/components/Standard/msg-card.vue";
let map = null
export default {
  name: 'leftList',
  components: {MsgCard, WMap},
  data(){
    return{
      currentRowKey:'',
      crossName:'',
      tableLoading: true,
      tableData: [],
      fullData: [],

    }
  },
  mounted(){
    map = this.$refs.wMap.initMap({zoom: 17.8,pitch:0})
    map.on('style.load',()=>{
      this.getList()
    })
  },
  methods:{
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
          return "row-odd";
      } else {
          return "row-even";
      }
    },
    getList() {
      crossList({}).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].id
      })
    },
    getRowKey(row){
      return row.id
    },
    filterCrossTable(e) {
      this.tableData = this.fullData.filter((item) => {
        return item.crossName.includes(e);
      });
    },
    rowClick(row) {
      // this.lastCheck = row;
      // this.updateLayer(row);
      map?.flyTo({
        //center: [row.longitude,row.latitude],
        center: row.location.split(","),
        duration: 1500
      });
      this.$emit("crossChange", row);
    },
  }
}
</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(90, 144, 238, 0.34);
  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;
    height: 950px;
    margin-bottom: 20px;
  }
}
</style>
