<template>
  <el-dialog :title="title" custom-class="weatherDetails" v-model="dialogVisible" width="800px" :close-on-click-modal="false">
            <div class="weatherMain">
                <el-tabs tab-position="left" style="height: 350px" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in messageAll" :key="index" :name="index.toString()">
                        <template #label>
                            <div class="tabLabel">
                                <p>{{item.name}}</p>
                                <p>{{item.data[0].name}}</p>
                            </div>
                        </template>
                        <div class="tabMain">
                            <img :src="item.data[0].img" alt="">
                            <div class="tabMain_msg">
                                <div class="detailsMsg">{{item.data[0].msg}}</div>
                                <div class="detailsTime">
                                    <div class="detailN">
                                        <span>预警时间:</span>
                                        <span>{{item.weather.update_time}};</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="detailsTime">
                            <div class="detailN">
                                <span>温度:</span>
                                <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
                            </div>
                            <div class="detailN">
                                <span>湿度:</span>
                                <span>{{item.weather.humidity}}%;</span>
                            </div>
                            <div class="detailN">
                                <span>气压:</span>
                                <span>{{item.weather.pressure}}kPa;</span>
                            </div>
                            <div class="detailN">
                                <span>风力:</span>
                                <span>{{item.weather.wind_power}};</span>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
                </span>
            </template>
        </el-dialog>
</template>

<script>
//大风预警图片
import windBlue from '@/assets/weather/windBlue.png'
import windYellow from '@/assets/weather/windYellow.png'
import windOrange from '@/assets/weather/windOrange.png'
import windRed from '@/assets/weather/windRed.png'
//暴雨预警图片
import rainBlue from '@/assets/weather/rainBlue.png'
import rainYellow from '@/assets/weather/rainYellow.png'
import rainOrange from '@/assets/weather/rainOrange.png'
import rainRed from '@/assets/weather/rainRed.png'
//雷电预警图片
import thunderYellow from '@/assets/weather/thunderYellow.png'
import thunderOrange from '@/assets/weather/thunderOrange.png'
import thunderRed from '@/assets/weather/thunderRed.png'
//暴雪预警图片
import snowBlue from '@/assets/weather/snowBlue.png'
import snowYellow from '@/assets/weather/snowYellow.png'
import snowOrange from '@/assets/weather/snowOrange.png'
import snowRed from '@/assets/weather/snowRed.png'
//正常天气
import sunshine from '@/assets/weather/sunshine.png'
import overcast from '@/assets/weather/overcast.png'
import cloudy from '@/assets/weather/cloudy.png'
import rain from '@/assets/weather/rain.png'
import snow from '@/assets/weather/snow.png'
import thunder from '@/assets/weather/thunder.png'
export default {
    data() {
        return {
            dialogVisible: false,
            title: '',
            messageAll: [],
            activeName: '',
            statusName: ''
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
            this.activeName = tab.props.name
        }
    }
}
</script>

<style lang="less">
.el-overlay{
    .el-overlay-dialog{
        .weatherDetails{
            .weatherMain{
                .el-tabs{
                    .el-tabs__header{
                        min-width: 80px;
                        .el-tabs__nav-wrap{
                            .el-tabs__nav-prev{
                                .el-icon{
                                    font-size: 18px;
                                    font-weight: bold;
                                }
                            }
                            .el-tabs__nav-next{
                                .el-icon{
                                    font-size: 18px;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                    .el-tabs__item{
                        height: 60px;
                        .tabLabel{
                            p{
                                margin: 0;
                                line-height: 25px;
                            }
                        }
                    }
                    .el-tabs__content{
                        .tabMain{
                            display: flex;
                            img{
                                width: 180px;
                                height: 180px;
                                margin: 30px 0 0 20px;
                            }
                            .tabMain_msg{
                                margin: 30px 0 0 20px;
                                .detailsMsg{
                                    height: 180px;
                                    font-size: 18px;
                                    line-height: 30px;
                                    text-indent: 2em;
                                }
                                .detailsTime{
                                    margin-top: 20px;
                                    font-size: 18px;
                                    display: flex;
                                    justify-content: end;
                                    .detailN{
                                        margin-right: 20px;
                                        span:nth-of-type(1){
                                            font-weight: bold;
                                        }
                                    }
                                }
                            }
                        }
                        .detailsTime{
                            display: flex;
                            justify-content: end;
                            margin-top: 20px;
                            font-size: 18px;
                            .detailN{
                                margin-right: 20px;
                                span:nth-of-type(1){
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>