<template>
    <div class="module-container">
        <module-header title="路况天气"></module-header>
        <div class="module-body weather-wrapper" v-loading="loading" :element-loading-background="loadingColor">

            <vue-seamless-scroll :limitMoveNum="3" v-if="weather.length" :data="weather" class="scroll-weather-wrapper">
                <div class="scroll-weather-item flex gap-20" v-for="(item, index) in weather" :key="index">
                    <div class="temprature w-p-50">
                        <WeatherIcon class="weather-icon" :weather="item.skycon" />
                        <span>{{ item.temperature }}°C</span>
                    </div>
                    <div class="weather-info flex-1">
                        <div class="weather-info-header flex-between margin-b-10">
                            <div class="weather-location">{{ item.location }}</div>
                            <div class="weather-date">{{ item.datetime }}</div>
                        </div>
                        <div class="weather-detail flex-wrap gap-10">
                            <div class="weather-detail-item flex-between  w-50 ">
                                <span class="flex-center gap-6">
                                    <img src="~@/assets/images/operationOverview/weather-icon01.png" />
                                    风速
                                </span>
                                <span class="flex-center gap-6">
                                    <span class="weather-val">{{ item.windSpeed }}</span>
                                    <span>m/s</span>
                                </span>
                            </div>
                            <div class="weather-detail-item flex-between w-50 gap-10">
                                <span class="flex-center gap-6">
                                    <img src="~@/assets/images/operationOverview/weather-icon02.png" />
                                    湿度
                                </span>
                                <span class="flex-center gap-6">
                                    <span class="weather-val">{{ item.humidity * 100 }}</span>
                                    <span>%RH</span>
                                </span>
                            </div>
                            <div class="weather-detail-item flex-between w-50 gap-10">
                                <span class="flex-center gap-6">
                                    <img src="~@/assets/images/operationOverview/weather-icon03.png" />
                                    能见度
                                </span>
                                <span class="flex-center gap-6">
                                    <span class="weather-val">{{ item.visibility }}</span>
                                    <span>km</span>
                                </span>
                            </div>
                            <div class="weather-detail-item flex-between w-50 gap-10">
                                <span class="flex-center gap-6">
                                    <img src="~@/assets/images/operationOverview/weather-icon04.png" />
                                    能见度
                                </span>
                                <span class="flex-center gap-6">
                                    <span class="weather-val">{{ item.pm25 }}</span>
                                    <span>/m³</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </vue-seamless-scroll>
            <empty v-else />
        </div>
    </div>
</template>
<script>
import ModuleHeader from '@/components/common/moduleHeader.vue'
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { getBasicData } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'
import WeatherIcon from "@/components/WeatherIcon/index.vue";
export default {
    name: 'road-weather',
    components: { ModuleHeader, vueSeamlessScroll, WeatherIcon },
    mixins: [QueryMixin],
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            query: {
                "roadIds": [],
            },
            weather: [{
                "visibility": "21.31",
                "windSpeed": "3.53",
                "humidity": "0.45",
                "pm25": "23",
                "warningVO": {},
                "temperature": "17.17",
                "skycon": "CLOUDY",
                "datetime": " 12:00:00",
                "location": '璧山'
            }, {
                "visibility": "23.62",
                "windSpeed": "8.18",
                "humidity": "0.47",
                "pm25": "15",
                "warningVO": {},
                "temperature": "16.8",
                "skycon": "CLOUDY",
                "datetime": " 12:00:00",
                "location": '荣昌'
            }, {
                "visibility": "60.0",
                "windSpeed": "19.71",
                "humidity": "0.12",
                "pm25": "3",
                "warningVO": {},
                "temperature": "21.47",
                "skycon": "CLEAR_DAY",
                "datetime": " 12:00:00",
                "location": '铜梁'
            }, {
                "visibility": "60.0",
                "windSpeed": "18.67",
                "humidity": "0.12",
                "pm25": "8",
                "warningVO": {},
                "temperature": "21.66",
                "skycon": "CLEAR_DAY",
                "datetime": " 12:00:00",
                "location": '合川'

            }],
            basicData: {}
        }
    },
    methods: {
        getData() {
            this.loading = true;
            getBasicData(this.query) // 传入路段id数组，如果没有则不传
                .then((res) => {
                    if (res.state && res.value) {
                        this.basicData = { ...res.value }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>
<style scoped lang="scss">
@import "~/styles/common.scss";
@import "~/styles/viewport-convert.scss";

.module-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(12, 22, 51, 0.3) 0%, rgba(10, 17, 26, 0.5) 100%);
    padding: 0 10px 10px 10px;
    box-sizing: border-box;

    .module-body {
        height: calc(100% - 34px);
        width: 100%;
        margin-top: 10px;
        position: relative;
    }

    .scroll-weather-wrapper {
        width: 100%;
        height: 100%;
    }

    .scroll-weather-item {
        padding: 10px 0;
        gap: 10px;
        border-bottom: 1px solid;
        border-image: linear-gradient(270deg, rgba(0, 227, 255, 0), rgb(57, 161, 196), rgba(0, 227, 255, 0)) 1 1;
    }

    .scroll-weather-item:last-child {
        border-bottom: none;
    }

    .temprature {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;

        .weather-icon {
            width: 36px;
            height: 36px;
            color: #fcb611;
        }

        span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FFDA81;
            line-height: 18px;
        }
    }

    .weather-location {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #FFFFFF;
        line-height: 18px;
    }

    .weather-date {
        font-size: 14px;
        font-family: D-DIN-Regular, D-DIN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 15px;
    }

    .weather-detail-item {
        width: calc(50% - 5px);
        background: linear-gradient(270deg, rgba(5, 96, 167, 0) 0%, rgba(34, 203, 255, 0.1) 100%);
        border-radius: 44px;
        padding: 4px 12px;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .weather-val {
        font-family: D-DIN, D-DIN;
        font-weight: 700;
        font-size: 16px;
        color: #3399FF;
    }
}
</style>