<template>
    <div class="event_list">
        <titleView>
            <template #icon>
                <img src="@/assets/img/zf_event_list_icon.svg" alt="">
            </template>
            <template #title>
                <span>事件列表</span>
            </template>
            <template #right>
                <div class="select">
                    <selectView  placeholder="请选择分类" v-model="eventType" :options="options"></selectView>
                </div>
            </template>
        </titleView>
        <div class="list_wrapper">
            <el-scrollbar>
                <div class="list">
                    <eventItem v-for="i in 20"></eventItem>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import titleView from "@/components/zfControlPlatform/titleView/index.vue"
import selectView from "@/components/selectView/index.vue"
import eventItem from "@/components/zfControlPlatform/eventList/eventItem.vue"
const eventType = ref()
const options = ref([
    {
        label: "拥堵",
        value: 0
    },
    {
        label: "抛洒物",
        value: 1
    },
    {
        label: "涉路施工",
        value: 2
    },
    {
        label: "停车",
        value: 3
    },
    {
        label: "塌方",
        value: 4
    },
])
</script>

<style lang="less" scoped>
.event_list {
    background-color: #053b7b;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    .select{
        width: 120px;
    }
    .list_wrapper{
        width: 100%;
        flex-shrink: 0;
        flex: 1;
        // background-color: rgb(222, 175, 100);
        display: flex;
        align-items: center;
        overflow-x: auto;
        :deep(.el-scrollbar__view){
                height: 100%;
            }
        .list{
            display: flex;
            align-items: center;
            padding: 16px 16px 0;
            
        }
    }

}
</style>