<template>
  <div style="height:100%">
    <MapTitle text="创新示范区县(市、区）排名" />
    <!-- 内容 -->
    <div class="rankingContent">
      <!-- 头部 -->
      <div class="rankingBox">
        <div class="tableBox">
          <el-row class="tabletit">
            <el-col :span="6">序号</el-col>
            <el-col :span="12">地区</el-col>
            <el-col :span="6">分数</el-col>
          </el-row>
        </div>
      </div>

      <!-- <el-scrollbar ref="el_Scrollbar" height="100%"> -->

      <div class="tableBox">

        <el-carousel height="200px" trigger="click" :loop="true" :interval="2500" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
            <el-row class="table_cell" v-for="(item, index) in data" :key="index">
              <el-col :span="6">
                <div>
                  <div v-if="item.ranking > 3">{{ item.ranking }}</div>
                  <div v-else class="tab-index" :style="{ background: colors[item.ranking] }">{{ item.ranking }}
                  </div>
                </div>
              </el-col>
              <el-col :span="12">{{ item.name }}</el-col>
              <el-col :span="6">{{ item.score }}</el-col>
            </el-row>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>
<script>
import MapTitle from "@/components/mapTitle/index.vue";
import { Bottom, Top } from "@element-plus/icons";
import Mock from "./mock";
import { mapState } from "vuex";

export default {
  components: {
    MapTitle,
    Bottom,
    Top,
  },
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
    tableData() {
      return Mock[this.curDataType];
    },
    carouselData() {
      // 处理数据 index 转 ranking 排名
      const tableData = this.tableData.map((item, index) => {
        item.ranking = index + 1;
        return item;
      });
      let carouselData = [];
      for (let i = 0; i < tableData.length; i += 5) {
        const list = tableData.slice(i, i + 5);
        carouselData.push(list);
      }
      return carouselData
    }
  },
  data() {
    return {
      colors: {
        1: "#e45c5c",
        2: "#ea8234",
        3: "#fac858",
      },
    };
  },
  mounted() {


  },
};
</script>
<style>
/* 火狐出行滚动条 */
.rank-list .el-scrollbar__view::-webkit-scrollbar {
  display: none;
  width: 0 !important
}

/* .rank-list .el-scrollbar__wrap {
  width: calc(100% + 20px);
} */
</style>
<style lang="scss" scoped>
.rankingContent {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  // margin-top: 10px;
  padding-top: 10px;
  box-sizing: border-box;
}

.rankingBox {
  height: 40px;

  .tableBox {
    width: 100%;
  }
}

::v-deep .el-scrollbar {
  height: calc(100% - 65px);
}

.tableBox {
  color: #ffffff;
  width: calc(100% - 0px);

  .tabletit .el-col {
    font-weight: bold;
    font-size: 14px;
    background-color: #0e4781 !important;
  }

  .el-col {
    color: #d4f7ff;
    font-size: 12px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 23px;

  }

  .el-row {
    border-bottom: 1px dashed #10529a;
    background-color: #093971;
  }

  .tab-index {
    font-weight: bold;
  }


}



// .el-scrollbar {
//   margin-top: 10px;
// }

.tab-index {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  font-size: 16px;
  font-family: tabTypeFace;
  margin: 0 auto;
}
</style>
