<template>
    <div style="height: 200px; overflow: auto">
        <vueSeamlessScroll :data="list" :limitMoveNum="2">
            <div
                class="qi-block-out"
                v-for="(metro, index) in list"
                :key="index"
            >
                <div class="qi-block">
                    <div class="left">
                        <div>
                            <i :class="metro.icon"></i>
                        </div>
                        <p>{{ metro.data.temperature }}℃</p>
                    </div>
                    <div class="right">
                        <div class="title">
                            <p>{{ metro.weatherNode }}</p>
                            <p>{{ myDate }}</p>
                        </div>
                        <ul>
                            <li>
                                <div class="word">
                                    <img :src="feng" alt /> 风速
                                </div>
                                <div class="value">
                                    {{
                                        Number(metro.data.windSpeed).toFixed(2)
                                    }}m/s
                                </div>
                            </li>
                            <li>
                                <div class="word">
                                    <img :src="shidu" alt />湿度
                                </div>
                                <div class="value">
                                    {{
                                        Number(
                                            metro.data.humidity * 100
                                        ).toFixed(2)
                                    }}%RH
                                </div>
                            </li>
                            <li>
                                <div class="word">
                                    <img :src="jian" alt />能见度
                                </div>
                                <div class="value">
                                    {{
                                        Number(metro.data.visibility).toFixed(
                                            2
                                        )
                                    }}km
                                </div>
                            </li>
                            <li>
                                <div class="word">
                                    <img :src="pm" alt />PM2.5
                                </div>
                                <div class="value">
                                    {{ Number(metro.data.pm25).toFixed(2) }}/m3
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </vueSeamlessScroll>
    </div>
</template>
<script>
import jian from "@/assets/images/roadVisualizationCopy/jian.png";
import feng from "@/assets/images/roadVisualizationCopy/feng.png";
import shidu from "@/assets/images/roadVisualizationCopy/shidu.png";
import pm from "@/assets/images/roadVisualizationCopy/pm2.5.png";
import lei from "@/assets/images/roadVisualizationCopy/lei.png";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
export default {
    props: {
        myDate: {
            type: String,
            default: "",
        },
    },
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {
            jian: jian,
            feng: feng,
            shidu: shidu,
            pm: pm,
            lei: lei,
            list: [],
            list2: [1, 2, 3, 4],
        };
    },
    mounted() {},
    methods: {
        init(list) {
            this.list = list;
        },
    },
};
// const props = defineProps({
//   msgdata: Array,
//   myDate: String
// });
// const list = [1, 2, 3, 4];
</script>
<style scoped lang="scss" >
.qi-block {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;

  img {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }
  .left {
    width: 20%;
    color: #ffce5a;
    padding: 15px 0;
    div {
      text-align: center;
    }
    p {
      text-align: center;
      margin-top: 5px;
    }
    i {
      font-size: 35px;
    }
  }
  .right {
    flex: 1;
    .title {
      display: flex;
      justify-content: space-between;
      padding-right: 15px;
      p {
        &:last-child {
          color: rgba(238, 238, 238, 0.741);
        }
      }
    }
    ul {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      li {
        width: 50%;
        line-height: 30px;
        display: flex;
        // justify-content: space-between;
        padding-right: 20px;
        div {
          &:first-child {
            width: 55%;
          }
        }
      }
    }
  }
  .center {
    margin: 3px 0;
    font-size: 16px;
    color: white;
    border-bottom: 1px solid rgba(17, 51, 103, 0.45);
    // width: 50%;
    text-align: center;
  }
  .word {
    color: rgba(86, 136, 214, 1);
    font-size: 12px;
  }
  .unit {
    font-size: 12px;
  }
}
</style>