<template>
    <div class="title">
        <h3>{{ titleData }}</h3>
    </div>
    <div class="weather">
        <div class="time">
            {{ currentTime }} {{ lunarDay.ncWeek }}
        </div>
        <div class="line"></div>
        <div class="forecast">
            <span>{{ weatherData.city }}：{{ weatherData.weather }} {{ weatherData.temperature }}℃</span>
            <svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" />
            <!-- <img src="../../../assets/images/weather/duoyun.png" /> -->
        </div>
    </div>
    <div class="seeting">
        <n-tooltip trigger="hover" v-if="settingShow">
            <template #trigger>
                <n-button class="tooltips" circle quaternary @click="showClick">
                    <template #icon>
                        <n-icon>
                            <Settings />
                        </n-icon>
                    </template>
                </n-button>
            </template>
            显示项
        </n-tooltip>
        <n-tooltip trigger="hover">
            <template #trigger>
                <n-button class="tooltips" circle quaternary @click="returnBack">
                    <template #icon>
                        <n-icon>
                            <Power />
                        </n-icon>
                    </template>
                </n-button>
            </template>
            返回上一页
        </n-tooltip>
        <n-tooltip trigger="hover" v-if="warningShow">
            <template #trigger>
                <n-badge class="warningbadge" :value="waringData.length" :max="15">
                    <n-button class="tooltips" circle quaternary @click="waringClick">
                        <template #icon>
                            <n-icon>
                                <Bell />
                            </n-icon>
                        </template>
                    </n-button>
                </n-badge>
            </template>
            报警
        </n-tooltip>
    </div>
    <n-drawer class="waringDrawer" v-model:show="waringDrawer" :default-width="420" resizable placement="right">
        <n-drawer-content closable>
            <template #header>
                <div class="title">
                    <span>消息</span>
                    <span class="button" @click="waringMore">更多</span>
                </div>
            </template>
            <div class="waringList">
                <div class="item" v-for="(item, index) in waringData" :key="index">
                    <div class="name">
                        <span>{{ item.deviceName }}</span>
                        <span class="time">{{ item.alertTime }}</span>
                    </div>
                    <div class="info">
                        <span>{{ item.paramName }}</span>
                        <n-button type="info" size="small" @click="waringConfirm(item)">确认</n-button>
                    </div>
                </div>
            </div>
        </n-drawer-content>
    </n-drawer>
    <n-modal class="waringModal" v-model:show="waringModal">
        <n-card :bordered="false" size="huge" role="dialog" aria-modal="true">
            <el-table class="waringTable" :data="waringList" header-row-class-name="headerRowClass"
                header-cell-class-name="headerCellClass" row-class-name="rowClass" cell-class-name="cellClass" height="350"
                stripe>
                <el-table-column prop="deviceName" label="设备名称" align="center" />
                <el-table-column prop="paramName" label="变量名称" align="center" />
                <el-table-column prop="alertName" label="告警级别" align="center" />
                <el-table-column prop="totalCounts" label="告警累计" align="center" />
                <el-table-column prop="alertFirstTime" label="首次告警时间" align="center" />
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="scope">
                        <el-button class="confirm" type="info" size="small" @click="waringConfirm(scope.row)">确认</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="warClose" @click="warClose">
                <CloseCircleOutline />
            </div>
        </n-card>
    </n-modal>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { getWeather } from '@/api/user/index';
import { getWarList, process } from '@/api/waring/index';
import { waringVo } from '@/api/waring/types';
import { Filter, Maximize, Settings, Power, Bell } from '@vicons/tabler';
import { CloseCircleOutline } from '@vicons/ionicons5';
import { useDateFormat, useNow } from '@vueuse/core';
import { uniqueArrayObject } from '@/utils/index';
import mitt from '@/plugins/bus';
import calendar from '@/utils/lunar';

const route = useRoute()
const router = useRouter()

const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
const emit = defineEmits(['showModalClick', 'returnClick']);
const timer = ref()
const isCurrentRoute = ref(true)
const waringDrawer = ref(false)
const waringModal = ref(false)
const waringData = ref<waringVo[]>([])
const waringList = ref<waringVo[]>([])
const routerType = ref('')

const weatherData = ref(
    { city: "", weather: "", temperature: "", weatherImg: "" }
);

const lunarDay: any = calendar.solarToLunar(
    useNow().value.getUTCFullYear(),
    useNow().value.getUTCMonth() + 1,
    useNow().value.getUTCDate()
);
const props = defineProps({
    titleData: {
        type: String,
        default: '数据大屏',
    },
    settingShow: {
        type: Boolean,
        default: false
    },
    warningShow: {
        type: Boolean,
        default: false
    }
});

onMounted(() => {
    routerType.value = route.query?.id === undefined ? "0" : "1"
    getWeatherData()
});

mitt.on('waringMessage', (res: any) => {
    //监听报警信息
    console.log(res.data);
    waringData.value.push(res.data)
    console.log("waringData--", waringData.value);
    waringData.value = uniqueArrayObject(waringData.value, "id")
    console.log("waringData--", waringData.value);
});

function showClick() {
    //显示/隐藏表格配置栏
    emit('showModalClick', true);
    //   showModal.value = true;
}
function returnBack() {
    //返回首页
    // emit('returnClick', '');
    if (routerType.value === '1'&&route.path!="/screen") {
        router.push({
            path: "/screen",
            query: { id: sessionStorage.getItem('id') }
        })
    } else {
        router.replace("/dashboard")
    }
}
function waringClick() {
    //点击报警按钮
    waringDrawer.value = true
}

// function getWeatherData() {
//     //获取天气
//     getWeather().then((res: any) => {
//         if (res.code === 200) {
//             weatherData.value = res.data;
//         }
//     });
// }

function getWeatherData() {
    //获取天气
    getWeather().then((res: any) => {
        if (res.code === 200) {
            if (isCurrentRoute) {
                timer.value = setTimeout(async () => {
                    await (timer.value && clearTimeout(timer.value));
                    await getWeatherData();
                }, 600000)
            }
            weatherData.value = res.data;
        } else {
            clearTimeout(timer.value);
        }
    });
}

function waringMore() {
    //点击报警更多
    waringDrawer.value = false
    waringModal.value = true
    getwaringList()
}
function getwaringList() {
    const params = 0;
    getWarList(params).then((res: any) => {
        if (res.code === 200) {
            waringList.value = res.rows;
        }
    });
}
function waringConfirm(item: any) {
    //报警确认
    ElMessageBox.confirm('是否确认?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        const params = item.id;
        process(params).then((res: any) => {
            if (res.code === 200) {
                waringList.value = res.data;
                // waringDrawer.value = false
                // waringModal.value = false
                getwaringList()
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }
        });
    }).catch(() => { })
}
function warClose() {
    //报警列表关闭
    waringModal.value = false
}
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 5.7rem;

    .title {
        width: 80%;
        background: url(@/assets/images/title-bg.png);
        background-size: 100%;
        text-align: center;
        padding-bottom: 38px;
        margin: 0 auto;

        h3 {
            font-size: 38px;
            font-family: 'YouSheBiaoTiHei';
            font-weight: 400;
            letter-spacing: 4px;
            background: linear-gradient(180deg, #FEFDFF 0%, #95DAFF 97%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
        }
    }
}

.weather {
    display: flex;
    align-items: center;
    position: absolute;
    top: 2.5rem;
    left: 7rem;
    color: #B2D4FF;
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-family: 'AlibabaPuHuiTiRegular';

    .line {
        width: 2px;
        height: 2rem;
        background: linear-gradient(to top, #000E38, #1EA8DD, #000E38);
        margin: 0 1rem;
    }

    .forecast {
        display: flex;
        align-items: center;

        .weatherSvg {
            width: 1.5em !important;
            height: 1.5em !important;
            margin-left: 10px;
        }

        // img {
        //     width: 25px;
        //     margin-left: 10px;
        // }
    }
}

.seeting {
    position: absolute;
    top: 2.5rem;
    right: 7rem;

    .warningbadge {
        margin-top: -10px;
    }

    .tooltips {
        width: 36px;
        height: 36px;
        background: linear-gradient(180deg, #003269 1%, rgba(3, 79, 163, 0.2314) 56%, #003269 100%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;

        :deep(span) {
            color: #5beff9;
        }

        margin-left: 10px;
    }
}
</style>