<template>
  <div class="content_box">
    <vue3-seamless-scroll v-if="option.dataset && option.dataset.length > 0" class="seamless" :list="option.dataset"
      :limitScrollNum="rowNum" :hover="true" :step="waitTime" :wheel="true" :isWatch="true">
      <div v-for="(item, index) in option.dataset" class="detail flex_column" :key="index">
        <div class="flex_v cursor" :style="!showRankNum ? { paddingLeft: 0 } : { paddingLeft: '24px' }"
          @click="handleOpenDialog(item)">
          <div class="item_content">
            <div class="item_header flex">
              <div class="item_level_text">{{ item.level }}</div>
              <div class="item_title_text">{{ item.title }}</div>
            </div>
            <div class="item_footer">
              <div class="item_dept">{{ item.dept }}</div>
              <div class="item_time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </vue3-seamless-scroll>
    <div v-else style="
        color: #fff;
        font-size: 14px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      ">
      暂无数据
    </div>
    <n-modal v-model:show="status.showDialog" :class="['custom-tab-modal']" title="报警详情" preset="card"
      @on-after-leave="handleCloseDialog" :draggable="{ bounds: 'none' }" :style="{ width: '800px', height: '516px' }">
      <div v-if="isLoading" style="display: flex; width: 100%; justify-content: center; margin-top: 16px">
        <n-spin size="large" />
      </div>
      <n-grid v-else cols="24" x-gap="12" style="overflow-y: auto; padding-bottom: 12px">
        <n-gi :span="14">
          <!-- 基础信息 -->
          <div class="detail-item">
            <label>报警时间：</label>
            <span>
              {{ status.selectedRow?.time }}
            </span>
          </div>
          <div class="detail-item">
            <label>报警等级：</label>
            <span class="highlight" style="color: #ff5454">
              {{ status.selectedRow?.level }}
            </span>
          </div>
          <div class="detail-item">
            <label>风险描述：</label>
            <span class="highlight">
              {{ status.selectedRow?.title }}
            </span>
          </div>
          <div class="detail-item">
            <label>报警区域：</label>
            <span>
              {{ status.selectedRow?.dept }}
            </span>
          </div>
        </n-gi>
      </n-grid>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck

import { PropType, toRefs, shallowReactive, watch, ref, reactive } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import PlayBack from '@/components/Pages/yushiVideo/playback.vue'
import PlayLive from '@/components/Pages/yushiVideo/playLive.vue'
import axiosInstance from '@/api/axios'
import VChart from 'vue-echarts'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType & typeof option>,
    required: true
  }
})
const isLoading = ref(false)
const pointChartOption = ref(null)
const status = reactive({
  showDialog: false,
  selectedRow: null
})
const { rowNum, waitTime, showRankNum } = toRefs(props.chartConfig.option)
const { w, h } = toRefs(props.chartConfig.attr)

const option = shallowReactive({
  dataset: configOption.dataset
})



const handleOpenDialog = (row: any) => {
  status.selectedRow = {
    ...row, // 基础数据从item获取
  };

  status.showDialog = true;
  isLoading.value = false;
}


// 手动更新
watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    option.dataset = newData
  },
  {
    immediate: true,
    deep: false
  }
)

// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  option.dataset = newData
})

const handleCloseDialog = () => {
  status.showDialog = false
  status.selectedRow = null
}
</script>

<style lang="scss" scoped>
.content_box {
  width: v-bind('w') + 'px';
  height: v-bind('h') + 'px';
  overflow: hidden;
}

.seamless {
  // padding: 0 30px 14px 30px;
}

.detail {
  color: #fff;
  position: relative;
  font-size: 12px;
  width: 100%;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_v {
  display: flex;
  align-items: center;
  background-color: #072230;
  border-bottom: 1.5px solid #123E54;

}

.item_level_text {
  width: fit-content;
  height: 18px;
  color: #ff9191;
  border-radius: 12px;
  background: #B10000;
  font-size: 14px;
  text-align: center;

  line-height: 18px;
  padding: 2px 12px;
  margin-right: 20px;
}

.item_title_text {
  color: #b10000;
  font-size: 18px;
}

.flex_c {
  display: flex;
  justify-content: center;
  align-items: center;
}


.item_content {
  width: 100%;
}

.item_header {
  margin-left: 20px;
  flex: 1;
  max-width: 350px;
  // height: 30px;
  align-items: end;
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏超出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  margin-top: 2px;
}

.item_footer {
  margin-left: 20px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.item_time {
  margin-right: 40px;
  font-size: 18px;
  color: #7E8990;
}

.item_dept {
  color: #7E8990;
  font-size: 12px;
}

.detail-item {
  padding: 8px 0;
  display: flex;
}

.cursor {
  cursor: pointer;
}

.detail-item label {
  min-width: 90px;
  color: rgb(145 187 242);
}

.detail-item span {
  font-weight: bold;
}

.info {
  font-size: 1.25rem;
  font-weight: 700;
  width: fit-content;
  margin: 0 16px 0 0;
  display: flex;
  align-items: center;
}

.info .sub-title {
  padding: 0 0 0 24px;
  margin-right: 8px;
}

.info .info-num {
  color: rgb(34 211 238);
  font-size: 1.875rem;
}

.info .info-body {
  padding-bottom: 6px;
}

.enterBtn {
  color: rgb(62 200 244);
  text-decoration: underline;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  left: 87%;
  top: -45px;
}
</style>
<style lang="scss">
.custom-tab-modal>.n-card-header {
  background-color: rgba(26, 56, 113, 1) !important;
  background-image: linear-gradient(to right, rgba(8, 100, 177, 0.7), transparent) !important;
  padding: 16px !important;
  border: 2px solid rgba(62, 200, 244, 1);
  border-bottom-width: 0px !important;
}

.custom-tab-modal>.n-card__content {
  background-color: rgba(26, 56, 113, 1) !important;
  border: 2px solid rgba(62, 200, 244, 1);
  padding-right: 0;
  padding-bottom: 0;
}

::-webkit-scrollbar-thumb {
  background-color: #2461db;
  border-radius: 6px;
}

.custom-tab-modal .timeLineClass>div:last-child {
  padding-left: 8px;
}
</style>
