<template>
    <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
    <ItemWrap class="contetn_left-bottom contetn_lr-item" title="消息中心">
        <div class="demo-datetime-picker">
            <div class="block" v-if="currentView === 'alarm'">
                <el-date-picker class="date-picker" v-model="datatime" type="datetimerange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
            </div>

            <!-- <n-input class="input-search" placeholder="请输入内容" v-model="input" :clearable="true" /> -->
            <n-button strong secondary type="info" v-if="currentView === 'alarm'" class="btn-search"
                @click="showAddUser">
                搜索
            </n-button>

        </div>
        <div class="btngroup">
            <el-button type="primary" class="btntype" @click="switchView('alarm')">报警信息
                
            </el-button>
            <el-button type="primary" class="btntype" @click="switchView('stock')">库存情况
                
            </el-button>
        </div>
        <div class="user_skills" style="margin-top:20px;">
            <n-table striped class="eltables" :bordered="true" v-if="currentView === 'alarm'">
                <thead>
                    <tr>
                        <th>报警类型</th>
                        <th>报警详情</th>
                        <th>设备地址</th>
                        <th>报警时间</th>
                        <th>通知状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData">
                        <td>{{ item.warntype }}</td>
                        <td>{{ item.detail }}</td>
                        <td>{{ item.address }}</td>
                        <td>{{ item.date }}</td>
                        <td>{{ item.state }}</td>
                    </tr>
                </tbody>
            </n-table>
            <div v-if="currentView === 'stock'" style="display: flex; justify-content: center; width: 100%;">
                <div ref="chartRef" style="width: 400px; height: 400px;"></div>
            </div>
            <!-- <el-table  :data="tableDatas" class="eltables">
                <el-table-column prop="product" label="产品名称" />
                <el-table-column prop="quantity" label="库存" />
                <el-table-column prop="location" label="仓库" />
                <el-table-column prop="lastUpdate" label="时间" />
            </el-table> -->
            <el-pagination class="pagination" v-if="currentView === 'alarm'" background layout="prev, pager, next"
                :total="totalItems" :page-size="pageSize" :current-page="currentPage"
                @current-change="handleCurrentChange" />
        </div>
    </ItemWrap>
</template>
<script setup lang="ts">
import { ref, reactive, watchEffect, onMounted,onUnmounted } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";
import Adduser from "./adduser.vue";
import { NInput, NTable } from "naive-ui";
import * as echarts from "echarts";
const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

const tableData = [
    {
        warntype: '断电报警',
        date: '2016-05-03',
        detail: '设备断电报警',
        address: 'No. 189, Grove St, Los Angeles',
        state: 'No',
    },
    {
        warntype: '断电报警',
        date: '2016-05-03',
        detail: '设备断电报警',
        address: 'No. 189, Grove St, Los Angeles',
        state: 'No',
    },
    {
        warntype: '断电报警',
        date: '2016-05-03',
        detail: '设备断电报警',
        address: 'No. 189, Grove St, Los Angeles',
        state: 'No',
    },
    {
        warntype: '断电报警',
        date: '2016-05-03',
        detail: '设备断电报警',
        address: 'No. 189, Grove St, Los Angeles',
        state: 'No',
    },
];


// 当前视图标识
const currentView = ref('alarm');

// 切换视图
const switchView = (view: string) => {
    currentView.value = view;
    
    if (view === 'stock') {
        if (chartInstance) {
            // 更新图表配置
            chartInstance.setOption(options);
            chartInstance.resize(); // 确保图表尺寸适应新的视图
        } else {
            // 创建新的图表实例
            chartInstance = echarts.init(chartRef.value);
            chartInstance.setOption(options);
        }
    } else {
        // 如果离开库存情况视图，销毁图表实例
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
    }
};
// 初始化数据
switchView("alarm");

const datatime = ref('')
const input = ref('')
const isAddUserVisible = ref(false);
const showAddUser = () => {
    isAddUserVisible.value = true;
};
// 分页相关状态
const pageSize = ref(10); // 每页显示的条目数
const currentPage = ref(1); // 当前页码
const totalItems = ref(tableData.length); // 总条目数

// 根据当前页码和每页大小计算显示的数据
// const displayedTableData = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   return tableData.slice(start, end);
// });

// 当前页码改变时触发的方法
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
};


const options = reactive({
    tooltip: {},
    legend: {
        top: 'bottom'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '100%',
            roseType: 'area',
            center: ['50%', '50%'],
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(options);
    } else if (chartInstance) {
        chartInstance.setOption(options);
    }
};

watchEffect(() => {
    initChart();
});

onMounted(() => {
    window.addEventListener('resize', initChart);
    return () => {
        window.removeEventListener('resize', initChart);
    };
});
onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
</script>

<style scoped>
.contetn_lr-item {
    font-size: 30px;
    margin-top: 80px;
    height: 800px;
}

.btn-search,
.back-home-btn {
    /* background-color: transparent; */
    position: absolute;
    margin-top: 30px;
    top: 10px;
    left: 10px;
}

.btn-search {
    margin-top: 37px;
    margin-left: 25%;
    height: 45px;
}

.input-search {
    background-color: transparent !important;
    border: #006ff0;
    width: 200px;
    height: 50px;
    font-size: 20px;
    margin-top: 10px;
    top: -60px;
    left: 450px;
    padding: auto;
    color: #006ff0;
}

.btntype {
    background-color: transparent;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: large
}

.btngroup {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.user_skills {
    width: 100%;
    text-align: center;
    font-size: larger;
}

::v-deep .pagination {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 15px;
    margin-top: 280px;
}

/* 使分页器中的按钮背景透明 */
::v-deep .el-pagination button,
::v-deep .el-pagination .btn-quicknext,
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-quickprev {
    height: 40px;
    width: 40px;
    font-size: 20px;
    background-color: rgba(17, 0, 255, 0.3) !important;
    /* 半透明灰色 */
    border-color: rgba(128, 128, 128, 0.3) !important;
}

/* 使分页器中的数字和链接透明 */
::v-deep .el-pagination .el-pager li {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* 当鼠标悬停或激活时，保持背景透明 */
::v-deep .el-pagination button:hover,
::v-deep .el-pagination button:focus,
::v-deep .el-pagination .el-pager li:hover,
::v-deep .el-pagination .el-pager li.is-active {
    height: 40px;
    width: 40px;
    font-size: 16px;
    background-color: rgba(104, 3, 255, 0.5) !important;
    /* 加深的半透明灰色 */
}

::v-deep .date-picker {
    background-color: transparent;
    height: 50px;
    font-size: 30px;
    left: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    border-radius: 10px;
}

/* naive */
.eltables {
    background-color: transparent !important;
    font-size: 20px;
    text-align: center;
    border: none;
}

.eltables th {
    background-color: transparent !important;
    color: #006ff0;
    border: none;
}

.eltables td {
    background-color: transparent !important;
    color: #009ffb;
    border: none;
}

.eltables td:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* 半透明的灰色背景 */
}
</style>
