<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="90px">
            <el-form-item label="监控点名称" prop="pointId">
              <el-select v-model="queryParams.pointId">
                <el-option v-for="item in monitorPoints" :key="item.pointId" :label="item.pointName"
                  :value="item.pointId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事件类型" prop="eventType">
              <el-select v-model="queryParams.eventType" multiple collapse-tags collapse-tags-tooltip>
                <el-option v-for="item in eventTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item label="处理状态" prop="dealStatus">
              <el-select v-model="queryParams.dealStatus" >
                <el-option label="未处理" value="0"></el-option>
                <el-option label="已处理" value="1"></el-option>
                <el-option label="已忽略" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围" prop="params">
              <el-date-picker v-model="queryParams.params.date" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts"
                @change="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <div class="table-list">
        <div class="table-item" v-for="item in eventList">
          <div class="table-item-content">
            <img :src="`${imgSuffix}${item.mediaList[0].filePath}`" alt="">
            <div class="table-event-name">{{ item.eventName }}</div>
            <div class="table-event-time">
              <div>监控点：{{item.pointName}}</div>
              <div>{{ item.createTime }}</div>
            </div>
          </div>
          <div class="table-item-footer" v-if="item.dealStatus==0">
            <el-button type="warning" size="small" @click="dealEvents(item,'1')">处理</el-button>
            <el-button type="primary" size="small" @click="dealEvents(item,'2')">忽略</el-button>
          </div>
        </div>
      </div>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup name="dealKeyEvents" lang="ts">
import { eventsMediaList, updateEvents } from '@/api/sense/events';
import { listMonitorPoint } from '@/api/manage/monitorPoint'
import { getDicts } from '@/api/system/dict/data'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { dateFormat } from '@/utils/index'
const eventList = ref([]);
const eventTypeOptions = ref([])
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const monitorPoints = ref([])
const queryFormRef = ref<ElFormInstance>();
const imgSuffix = import.meta.env.VITE_APP_FILEPATH
const shortcuts = [
  {
    text: '今天',
    value: () => {
      const now = new Date();
      return getStartAndEndTimeForDate(now)
    }
  },
  {
    text: '昨天',
    value: () => {
      const now = new Date();
      now.setDate(now.getDate() - 1);
      return getStartAndEndTimeForDate(now)
    }
  },
  {
    text: '前天',
    value: () => {
      const now = new Date();
      now.setDate(now.getDate() - 2);
      return getStartAndEndTimeForDate(now)
    }
  }
]
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
  pointId: undefined,
  eventType: [],
  eventCategory: '2,3,4',
  dealStatus: '0',
  params: {
    date: [],
    startDate: '',
    endDate: ''
  }
})
const getStartAndEndTimeForDate = (date) => {
  let startOfDay = new Date(date);
  startOfDay.setHours(0, 0, 0, 0); // 设置为当天的开始时间
  let endOfDay = new Date(date);
  endOfDay.setHours(23, 59, 59, 999); // 设置为当天的最后一秒
  return [startOfDay, endOfDay];
}
const getList = async () => {
  loading.value = true;

  const { pageNum, pageSize, pointId, eventType, eventCategory, dealStatus, params } = queryParams.value
  let startDate = ''
  let endDate = ''
  if (params.date && params.date.length) {
    startDate = params.date[0]
    endDate = params.date[1]
  }
  const paramObj = {
    pageNum,
    pageSize,
    pointId,
    eventType: eventType && eventType.join(),
    eventCategory,
    dealStatus,
    params: {
      startDate,
      endDate
    }
  }
  const res = await eventsMediaList(paramObj);
  eventList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}



/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

const getMonitorPoints = () => {
  listMonitorPoint().then(({ code, rows }) => {
    if (code === 200) {
      monitorPoints.value = rows
    }
  })
}
const dealEvents = (row,status) => {
  updateEvents(Object.assign(row, { dealStatus: status })).then(({ code }) => {
    if (code === 200) {
      proxy?.$modal.msgSuccess('操作成功')
      getList();
    }
  })
}

onMounted(() => {
  getList();
  getMonitorPoints();
  getDicts('event_type').then(({ code, data }) => {
    if (code === 200) {
      eventTypeOptions.value = (data || []).filter((item, index) => index >= 4)
    }
  })
});
</script>
<style lang="scss" scoped>
.table-list {
  display: flex;
  flex-wrap: wrap; // 换行

  .table-item {
    width: 24%;
    padding: 10px;
    margin: 0 10px 10px 0;
    border-radius: 2px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  }

  .table-item-content {
    position: relative;
    img {
      height: 200px;
      width: 100%;
    }
    .table-event-name{
      position: absolute;
      background: red;
      color: #fff;
      font-size: 12px;
      padding: 5px;
      right: 0;
      top: 0;
    }
    .table-event-time{
      position: absolute;
      color: #fff;
      font-size: 11px;
      padding: 5px;
      left: 0;
      bottom: 0;
      >div{
        margin-bottom: 5px;
      }
    }
  }

  .table-item-footer {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
