<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 10:33:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-25 16:19:23
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
 * @Description: 病害巡检-路面状况排名
-->

<template>
  <div class="content">
    <vue-seamless-scroll
      class="vue-scroll"
      :class-option="defaultOption"
      :data="roadList"
      v-if="roadList.length > 4"
    >
      <div
        class="road-div"
        v-for="(item, index) in roadList"
        :key="`road-${index}`"
      >
        <div class="index" :class="`road-index-${index}`">TOP</div>
        <div class="name">{{ item.name }}</div>
        <div class="value">病害数：{{ item.value }}</div>
        <div
          :class="`rate-${
            item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
          }`"
          class="rate"
        >
          环比：<span>{{ item.huanbi }}</span>
        </div>
        <div
          :class="`rate-${
            item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
          }`"
          class="rate"
        >
          同比：<span>{{ item.tongbi }}</span>
        </div>
      </div>
    </vue-seamless-scroll>
    <template v-else>
      <div
        class="road-div"
        v-for="(item, index) in roadList"
        :key="`road-${index}`"
      >
        <div class="index" :class="`road-index-${index}`">TOP</div>
        <div class="name">{{ item.name }}</div>
        <div class="value">病害数：{{ item.value }}</div>
        <div
          :class="`rate-${
            item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
          }`"
          class="rate"
        >
          环比：<span>{{ item.huanbi }}</span>
        </div>
        <div
          :class="`rate-${
            item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
          }`"
          class="rate"
        >
          同比：<span>{{ item.tongbi }}</span>
        </div>
      </div>
    </template>
  </div>
</template>
  
  <script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { roadRankList } from "@/api/xj/screen/disease-screen";
export default {
  name: "RoadRank",
  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)
      },
      // 路面状况排名数据
      roadList: [],
    };
  },
  watch: {
    select: {
      handler() {
        this.getRoadList();
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    /* 获取路面状况排名数据 */
    getRoadList() {
      roadRankList({ type: this.select }).then(({ data, code }) => {
        if (code === 200) {
          this.roadList = data
            .map((item) => {
              return {
                ...item,
                tongbi: item.tongbi.slice(0, 3),
                huanbi: item.huanbi.slice(0, 3),
              };
            })
            .slice(0, 5);
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
  color: #aac6c7;
  overflow: hidden;

  .road-div {
    min-height: 2rem;
    width: 100%;
    display: flex;

    > div {
      display: flex;
      align-items: center;
    }

    &:nth-child(2n + 1) {
      background-color: #0c203f;
    }

    .index {
      width: 4.5rem;
    }

    .name {
      width: 5rem;
    }

    .value {
      width: 6.5rem;
    }

    .rate {
      width: 7rem;
    }

    .rate-up {
      span {
        color: #fd9604;
      }
      background-image: url("../../../assets/screen/disease/rate-up.png");
      background-repeat: no-repeat;
      background-size: 20%;
      background-position: 85% 50%;
    }

    .rate-down {
      span {
        color: #1fa318;
      }
      background-image: url("../../../assets/screen/disease/rate-down.png");
      background-repeat: no-repeat;
      background-size: 20%;
      background-position: 85% 50%;
    }

    .road-index-0 {
      background-image: url("../../../assets/screen/disease/road-index-0.png");
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 60% 50%;
    }

    .road-index-1 {
      background-image: url("../../../assets/screen/disease/road-index-1.png");
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 60% 50%;
    }

    .road-index-2 {
      background-image: url("../../../assets/screen/disease/road-index-2.png");
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 60% 50%;
    }

    .road-index-3 {
      background-image: url("../../../assets/screen/disease/road-index-3.png");
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 60% 50%;
    }

    .road-index-4 {
      background-image: url("../../../assets/screen/disease/road-index-4.png");
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 60% 50%;
    }
  }
}
</style>
  