<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="6">预警等级</el-col>
            <el-col :span="12">风险事件</el-col>
          </el-row>
        </div>
      </div>
      <div class="contentBox">
        <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-list"
              v-for="(item, index) in data"
              :key="index"
            >
              <el-col :span="6">
                <div class="num">
                  <div>{{ item.num }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grade-box">
                  <img
                    v-if="item.grade == 1"
                    src="../../../../../assets/img/grade1.png"
                    class="grade-icon"
                  />
                  <img
                    v-else
                    src="../../../../../assets/img/grade2.png"
                    class="grade-icon"
                  />
                  <div
                    class="name"
                    :style="{ color: gradeType[item.grade].color }"
                  >
                    {{ gradeType[item.grade].name }}
                  </div>
                </div>
              </el-col>
              <el-col :span="12">{{ item.event }}</el-col>
            </el-row>
          </el-carousel-item>
        </el-carousel>
      </div>
    </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() {
      let carouselData = [];
      for (let i = 0; i < this.tableData.length; i += 5) {
        const list = this.tableData.slice(i, i + 5);
        carouselData.push(list);
      }
      console.log(carouselData);
      return carouselData;
    },
  },
  data() {
    return {
      gradeType: {
        1: {
          name: "高",
          color: "#ef4b4b",
        },
        2: {
          name: "中",
          color: "#f78131",
        },
      },
    };
  },
};
</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;
  font-weight: bold;
  font-size: 14px;
  background-color: #3395ff30 !important;

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

    .el-col {
      color: #d4f7ff;
      font-size: 12px;
      padding: 8px 0;
      line-height: 23px;
    }
  }
}
.contentBox {
  color: #fff;
  font-size: 16px;
  .el-row {
    padding: 0 24px 0 20px;
    display: flex;
    align-items: center;
  }
  .el-row:nth-child(even) {
    background-color: #3395ff13;
  }
  .el-col {
    color: #d4f7ff;
    font-size: 12px;
    padding: 8px 0;
    line-height: 18px;
  }
  .num {
    font-family: "YouSheBiaoTiHei";
    color: #ffffff;
    font-size: 17px;
  }
  .grade-box {
    display: flex;
    align-items: center;
    .grade-icon {
      width: 15px;
    }
    .name {
      margin-left: 10px;
      font-family: "YouSheBiaoTiHei";
      font-size: 16px;
    }
  }
}
</style>
