<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-21 10:11:03
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-31 14:25:18
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
 * @Description: 交安事件大屏-交安事件排名
-->


<template>
  <div class="content">
    <vue-seamless-scroll
      class="vue-scroll"
      :class-option="defaultOption"
      :data="rankList"
      v-if="rankList.length > 7"
    >
      <div
        class="rank-div"
        v-for="(item, index) in rankList"
        :key="`rank-${index}`"
      >
        <div class="rank-top" :class="`rank-top-${index}`">
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
        <div class="rank-bottom">
          <div
            :style="{ width: `${item.rate}%` }"
            :class="`rank-bottom-${index}`"
          ></div>
          <div class="rank-bottom-tip"></div>
        </div>
      </div>
    </vue-seamless-scroll>
    <template v-else>
      <div
        class="rank-div"
        v-for="(item, index) in rankList"
        :key="`rank-${index}`"
      >
        <div class="rank-top" :class="`rank-top-${index}`">
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
        <div class="rank-bottom">
          <div
            :style="{ width: `${item.rate}%` }"
            :class="`rank-bottom-${index}`"
          ></div>
          <div class="rank-bottom-tip"></div>
        </div>
      </div>
    </template>
  </div>
</template>
  
  <script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { rankCount } from "@/api/xj/screen/traffic-screen";
export default {
  name: "TrafficRank",
  components: { vueSeamlessScroll },
  props: {
    select: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 轮播配置
      defaultOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
      },
      // 排名数据
      rankList: [],
    };
  },
  watch: {
    select: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
    },
  },
  created() {
    this.getData();
  },
  methods: {
    /* 获取排名数据 */
    getData() {
      rankCount({ type: this.select }).then(({ code, data }) => {
        if (code === 200) {
          let sum = 0;
          data.forEach((element) => {
            sum += element.value * 1;
          });
          this.rankList = data
            .map((item) => {
              return {
                ...item,
                rate: (item.value * 100) / sum,
              };
            })
            .slice(0, 10);
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-left: 1rem;

  .rank-div {
    width: 100%;
    height: 2.5rem;

    .rank-top {
      width: 100%;
      height: 2rem;
      padding: 0 1rem 0.2rem 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name {
        font-size: 0.9rem;
        color: #c7daf2;
      }

      .value {
        font-family: "DouYu";
        font-size: 0.9rem;
        color: #1d92d1;
      }
    }

    .rank-bottom {
      width: 100%;
      height: 0.3rem;
      display: flex;
      background-color: #113463;

      > div:nth-child(1) {
        height: 100%;
        max-width: 99%;
      }

      .rank-bottom-tip {
        width: 0.5rem;
        height: 0.5rem;
        top: -0.1rem;
        left: -0.1rem;
        position: relative;
        background-color: #8effce;
        border-radius: 0.25rem;
      }

      .rank-bottom-0 {
        background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
      }

      .rank-bottom-1 {
        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
      }

      .rank-bottom-2 {
        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
      }

      .rank-bottom-3 {
        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
      }

      .rank-bottom-4 {
        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
      }

      .rank-bottom-5 {
        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
      }

      .rank-bottom-6 {
        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
      }

      .rank-bottom-7 {
        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
      }

      .rank-bottom-8 {
        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
      }

      .rank-bottom-9 {
        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
      }
    }

    .rank-top-0 {
      background-image: url("../../../assets/screen/traffic/rank-top-0.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;

      .value {
        color: #fcc105;
      }
    }

    .rank-top-1 {
      background-image: url("../../../assets/screen/traffic/rank-top-1.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;

      .value {
        color: #00fffc;
      }
    }

    .rank-top-2 {
      background-image: url("../../../assets/screen/traffic/rank-top-2.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;

      .value {
        color: #6ac2ff;
      }
    }

    .rank-top-3 {
      background-image: url("../../../assets/screen/traffic/rank-top-3.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-4 {
      background-image: url("../../../assets/screen/traffic/rank-top-4.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-5 {
      background-image: url("../../../assets/screen/traffic/rank-top-5.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-6 {
      background-image: url("../../../assets/screen/traffic/rank-top-6.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-7 {
      background-image: url("../../../assets/screen/traffic/rank-top-7.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-8 {
      background-image: url("../../../assets/screen/traffic/rank-top-8.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }

    .rank-top-9 {
      background-image: url("../../../assets/screen/traffic/rank-top-9.png");
      background-repeat: no-repeat;
      background-position: 2% 50%;
    }
  }
}
</style>