<script setup lang="ts">
    const url = ref<string>('/static/images/weather-little-icon/day1.png')

    /**
     *  切换城市
     */
    function cityChange() {
        uni.showToast({ title: '切换城市' })
    }

    /**
     * 预报预览
     */
    function previewForecast() {
        uni.showToast({ title: '预报预览' })
    }
</script>

<template>
    <view class="weather-container">
        <view class="weather-city" @tap="cityChange">
            <FuiIcon name="location" color="#3FA5FF" class="location-icon" />
            <text class="location-text">天心区</text>
            <text class="right-line" />
        </view>
        <view class="weather-info">
            <image :src="url" />
            <text> 晴 39°</text>
            <view class="weather-air">良</view>
        </view>
        <view class="weather-detail" @tap="previewForecast"> 未来24小时预报 > </view>
    </view>
</template>

<style lang="less" scoped>
    .weather-container {
        display: flex;
        width: 100%;
        height: 70rpx;
        padding: 20rpx;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .weather-city {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: left;

            .location-icon {
                font-size: 42rpx !important;
                margin-right: 10rpx;
                vertical-align: middle;
            }

            .location-text {
                vertical-align: middle;
            }

            .right-line {
                display: block;
                width: 2px;
                height: 42rpx;
                background-color: #eee;
                margin-left: 24rpx;
                border-radius: 10%;
            }
        }

        .weather-info {
            flex: 1.3;
            display: flex;
            align-items: center;
            justify-content: left;

            image {
                width: 50rpx;
                height: 50rpx;
                margin-right: 18rpx;
                // margin-bottom: 10rpx;
            }

            text {
                vertical-align: top;
            }

            .weather-air {
                width: 65rpx;
                // height: 42rpx;
                line-height: 42rpx;
                background-color: #24e228;
                border-radius: 5px;
                text-align: center;
                font-size: 27rpx;
                margin-left: 10rpx;
                color: #fff;
            }
        }

        .weather-detail {
            flex: 1.4;
            font-size: 28rpx;
            color: #aaa;
        }
    }
</style>
