<template>
    <div>
        <div class="app-container">
        <!-- 顶部导航栏 -->
        <header class="app-header">
            <h1 class="app-title">贵阳轨交智慧巡查平台</h1>
            <div class="header-controls">
                <div class="layout-controls">
                    <el-button icon="FullScreen" size="small" :class="layout === 'full' ? 'active' : ''"
                        @click="changeLayout('full')"></el-button>
                    <el-button icon="Menu" size="small" :class="layout === 'for-col' ? 'active' : ''"
                        @click="changeLayout('for-col')"></el-button>
                    <el-button icon="Grid" size="small" :class="layout === 'grid' ? 'active' : ''"
                        @click="changeLayout('grid')"></el-button>
                </div>
                <div class="zoom-control">
                    <el-dropdown placement="top-start">
                        <el-button> {{ curSpeed }} </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in speedArr" :key="item" @click="curSpeed = item">{{ item
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="app-main">
            <!-- 视频监控网格区域 -->
            <div class="monitor-grid" :class="`layout-${layout}`">
                <MonitorCard v-for="(monitor, index) in monitors" :key="index" :title="monitor.title"
                    :videoUrl="monitor.url" :is-live="monitor.isLive" @record-event="handleRecordEvent" />

            </div>

            <div class="event-sidebar">
                <div class="sidebar-header" @click="gotEventPage">
                    <h2>事件列表</h2>
                    <el-icon class="toggle-icon">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="event-filters">
                    <div>
                        <div class="custom-checkbox-group">
                            <div v-for="(value, key) in STATUS" :key="key" class="custom-checkbox-item">
                                <button class="custom-checkbox-btn" :class="{ 'is-checked': eventFilter.includes(key) }"
                                    @click="toggleCheckbox(key)">
                                    {{ value }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- <el-icon @click="showFilter = !showFilter">
                        <Filter />
                    </el-icon>
                    <div class="filter-options"
                        :style="{ opacity: showFilter ? '1' : '0', transition: 'opacity 0.3s ease-in-out' }">
                        <el-checkbox-group v-model="eventFilter" size="small">
                            <div v-for="(value, key) in STATUS" :key="key" style="margin-bottom: 10px;">
                                <el-checkbox :label="value" :value="key" border />
                            </div>
                        </el-checkbox-group>
                    </div> -->
                </div>
                <div class="event-list" v-loading="state.loading">
                    <div class="event-item" v-for="event in events" :key="event.id" @click="handleProcessEvent(event)">
                        <!-- <div class="event-type">{{ event.type }}</div> -->
                        <div class="event-img-box">
                            <!-- <img :src="event.fileImg" alt="事件预览"
                                class="video-thumb" @click.stop="openAnnotationModal(event)"> -->
                            <img :src="event.fileImgUrl" alt="事件预览" class="video-thumb">
                            <div class="event-img-mask"></div>
                        </div>
                        <div class="event-info">
                            <div class="event-title">{{ event.name }}</div>
                            <div class="event-time">{{ event.findTime }}</div>
                        </div>
                        <!-- <div class="event-actions">
                            <el-button size="small" type="text" @click="handleProcessEvent(event.id)">处理</el-button>
                        </div> -->
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- 事件处理弹窗 -->
    <HandleDrawer ref="handleDrawerRef" @handleQuery="handleQuery" />
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
     <!-- 浮窗地图 -->
    <!-- <FloatMap 
      v-if="state.showMap"
      :plane-position="planePosition"
      @close="state.showMap = false"
    /> -->
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowRight, } from '@element-plus/icons-vue';
import MonitorCard from './components/MonitorCard.vue';
import { ElMessage } from 'element-plus';
import { STATUS, MONITOR_FILTER_STATUS } from '@/constant/dict/event';
import HandleDrawer from './components/HandleDrawer.vue';
import { get, add } from '@/api/public/basic'
import {EventType} from '@/@types/event'
import {getFileUrl} from '@/utils/upload'
import FloatMap from '@/components/floatMap/index.vue'

const router = useRouter();
const handleDrawerRef= ref();
// 状态管理
const layout = ref<'grid' | 'for-col' | 'full'>('full');
const eventFilter = ref(Object.keys(MONITOR_FILTER_STATUS));
const planePosition = ref({
  lng: 116.404, // 经度
  lat: 39.915   // 纬度
})


// 模拟监控数据
const monitors = ref([
    { title: '站点名称-直播/视频文件名', isLive: true, url: 'https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4' },
    { title: '站点名称-直播/视频文件名', isLive: true, url: 'https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4' },
    { title: '站点名称-直播/视频文件名', isLive: false, url: 'https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4' },
    { title: '站点名称-直播/视频文件名', isLive: false, url: 'https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4' }
]);
const curSpeed = ref('1.0');
const speedArr = ref(['0.5', '1.0', '1.5', '2.0']);

// 模拟事件数据
const events = ref<EventType[]>([]);

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const state = reactive({
    loading: false,
    queryParams: {
        pageSize: 10,
        pageNum: 1,
        curStatus:null as string | null,
    },
    showMap: false,
})



const toggleCheckbox = (value) => {
    const index = eventFilter.value.indexOf(value);
    if (index === -1) {
        eventFilter.value.push(value);
    } else {
        eventFilter.value.splice(index, 1);
    }
    state.queryParams.curStatus = eventFilter.value?.length? eventFilter.value.join(',')  : null
    handleQuery()
}


// 方法
const changeLayout = (newLayout: 'grid' | 'for-col' | 'full') => {
    layout.value = newLayout;
    if (newLayout === 'full') {
        monitors.value = [
            {
                title: '贵州地铁3号线-铁力路站~友谊路站测试巡查任务-巡查直播',
                isLive: true,
                url: 'https://www.gysubway-video.top/live/output/index.m3u8'
            }
        ];
        state.showMap = true;
    } else if (newLayout === 'for-col') {
        state.showMap = false;
        monitors.value = [...Array(4).fill({ title: '站点名称-直播/视频文件名', isLive: true })];
        monitors.value = monitors.value.map((item, index) => {
            return {
                ...item,
                url: `https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4`
            }
        })
    } else if (newLayout === 'grid') {
        state.showMap = false;
        monitors.value = [...Array(9).fill({ title: '站点名称-直播/视频文件名', isLive: true })]
        monitors.value = monitors.value.map((item, index) => {
            return {
                ...item,
                url: `https://subway-guiyang.oss-cn-shanghai.aliyuncs.com/test.mp4`
            }
        })
    }
};

const gotEventPage = () => {
    router.push('/event/68563652564e4b65735a57')
}

// 创建事件
const handleRecordEvent = (data: {
    fileImg: string,
    name: string,
}) => {
    // 新增一条事件
    state.loading = true
    add(data, 'i5tGjoafvAY').then(res => {
        if (res.status == 0) {
            ElMessage.success('新增成功')
            handleQuery()
        }
    })
};

// 获取事件列表
const handleQuery = () => {
    state.loading = true
    get({
        ...state.queryParams,
        curStatus : eventFilter.value?.length? eventFilter.value.join(',')  : null
    }, 'i5HVQL5weRA').then(async (res) => {
        if (res.status == 0) {
            const eventV = [] as EventType[]
            for (let i = 0; i < res.data?.result.length; i++) {
                const item = res.data?.result[i] as EventType;
                const img = await getImg(item.fileImg) as string
                eventV.push({
                    ...item,
                    fileImgUrl: img
                })
            }
            events.value = eventV
            state.loading = false
        }
    })
}

const getImg = async (fliId: string) => {
  const res = await getFileUrl(fliId,true)
  console.log(res)
  return res || ''
}


const handleProcessEvent = (event: any) => {
    handleDrawerRef.value.show(event)
};



onMounted(() => {
    changeLayout('full')
    handleQuery()
})

</script>

<style scoped>
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f5ff;
    overflow: hidden;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    color: #165DFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* 页面标题 */
.app-title {
    margin: 0;
    font-size: 26px;
    flex: 1;
    font-weight: 700;
    text-align: center;
    letter-spacing: 11px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.layout-controls {
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px;
}

.layout-controls .active {
    background-color: white;
    color: #165DFF;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.app-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.monitor-grid {
    flex: 1;
    padding: 20px;
    overflow: auto;
    transition: all 0.3s ease;
}

.layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.layout-for-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.layout-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.event-sidebar {
    width: 320px;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    border-left: 1px solid #e5e7eb;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.toggle-icon {
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
}

.toggle-icon:hover {
    color: #165DFF;
}

.event-filters {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    /* justify-content: flex-end; */
    cursor: pointer;
    position: relative;
}

.filter-options {
    position: absolute;
    right: 50px;
    top: 0px;
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    transition: all 0.3s ease all;
    width: 100px;
}

.event-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.event-item {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.event-item:hover {
    background-color: #f9fafb;
}

.event-type {
    font-size: 12px;
    color: #165DFF;
    margin-bottom: 10px;
}

.event-img-box {
    height: 200px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
    }

    .event-img-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #e7e7e766;
        border-radius: 6px;
        pointer-events: none;
        transition: background-color 0.3s ease;
    }

    &:hover .event-img-mask {
        background-color: rgba(0, 0, 0, 0.2);
    }
}

.event-info {
    display: flex;
}

.event-title {
    flex: 1;
    text-align: left;
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time {
    text-align: right;
    font-size: 12px;
    color: #999;
}

.event-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.5);
}

.form-status {
    width: 18px;
    display: block;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
}

.custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.custom-checkbox-btn {
    padding: 4px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 10px;
    background-color: #fff;
    color: #606266;
    cursor: pointer;
    transition: all 0.3s;
}

.custom-checkbox-btn:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

.custom-checkbox-btn.is-checked {
    color: #409eff;
    background-color: #ecf5ff;
    border-color: #409eff;
}
</style>