<template>
  <div class="Overview">
    <div class="item-block" v-for="info in tunnelHoles" :key="info.key">
      <div class="title">{{ info.directionName }}今日流量</div>
      <div class="flex">
        <div class="flex-block m-width">
          <span class="name">新洞</span><span class="number">{{ formatNumber(info.newCount) }}</span>
        </div>
        <div class="flex-block m-width">
          <span class="name">老洞</span><span class="number">{{ formatNumber(info.oldCount) }}</span>
        </div>
      </div>
    </div>

    <div class="overview-right">
      <div class="title">
        事件统计
        <div class="dateSelect-block">
          <span
            :class="['date-block', { active: date.key === dateSelected }]"
            v-for="date in dateList"
            :key="date.key"
            @click="dateChange(date.key)"
          >
            {{ date.name }}
          </span>
        </div>
      </div>
      <div class="flex">
        <div class="flex-block" v-for="accident in accidents" :key="accident.key">
          <div :class="['icon', accident.icon]"></div>
          <span class="name">{{ accident.name }}</span>
          <span class="number">{{ formatNumber(accident.count) }}</span>
        </div>
        <div class="btn-block" @click="packUp">
          收起 <Icon color="rgba(240, 245, 255, 0.95)" :size="14" icon="ep:arrow-up" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { getTunnelReport, getEventReport } from '@/api/home'
const emit = defineEmits<{ (e: 'pack-up'): void }>()

const tunnelHoles = ref<any[]>([
  { key: 0, directionName: '杭向', newCount: 0, oldCount: 0 },
  { key: 1, directionName: '衢向', newCount: 0, oldCount: 0 }
])
const accidents = ref<any[]>([
  { key: '1', name: '交通事故', count: 0, icon: 'icon1' },
  { key: '2', name: '车辆故障', count: 0, icon: 'icon2' },
  { key: '3', name: '道路施工', count: 0, icon: 'icon3' },
  { key: '4', name: '路面状况', count: 0, icon: 'icon4' },
  { key: '5', name: '其他', count: 0, icon: 'icon5' }
])
// 日期选择列表
const dateList = ref<any[]>([
  { key: '1', name: '今天' },
  { key: '2', name: '本月' },
  { key: '3', name: '本年' }
])
const dateSelected = ref('1')
// 延迟时间 30分钟
const delay = 30 * 60 * 1000

const formatNumber = (num: number) => {
  return num.toLocaleString()
}

// 收起
const packUp = () => {
  emit('pack-up')
}

// 日期选择
const dateChange = (key: string) => {
  dateSelected.value = key
  getAccidents()
}

const tunnelHoleCount_timer = ref<NodeJS.Timeout | null>(null)
const accidents_timer = ref<NodeJS.Timeout | null>(null)

// 获取隧道统计
const getTunnelHoleCount = async () => {
  if (tunnelHoleCount_timer.value) {
    clearTimeout(tunnelHoleCount_timer.value)
    tunnelHoleCount_timer.value = null
  }

  const res = await getTunnelReport({})
  if (res) {
    tunnelHoles.value[0].newCount = res.tunnelUpNew
    tunnelHoles.value[0].oldCount = res.tunnelUpOld
    tunnelHoles.value[1].newCount = res.tunnelDownNew
    tunnelHoles.value[1].oldCount = res.tunnelDownOld
  }

  tunnelHoleCount_timer.value = setTimeout(() => {
    getTunnelHoleCount()
  }, delay)
}

// 获取事件统计
const getAccidents = async () => {
  if (accidents_timer.value) {
    clearTimeout(accidents_timer.value)
    accidents_timer.value = null
  }

  const res = await getEventReport({ type: dateSelected.value })
  if (res) {
    accidents.value[0].count = res['交通事故'].count // 交通事故
    accidents.value[1].count = res['车辆故障'].count // 车辆故障
    accidents.value[2].count = res['道路施工'].count // 道路施工
    accidents.value[3].count = res['路面状况'].count // 路面状况
    accidents.value[4].count = res['其他'].count // 其他
  }
  accidents_timer.value = setTimeout(() => {
    getAccidents()
  }, delay)
}

watch(
  () => ASYNC_DIRECTIONS(),
  (directions) => {
    directions.forEach((dir, index) => {
      if (tunnelHoles.value[index]) {
        tunnelHoles.value[index].directionName = dir.name
      }
    })

    // 获取数据
    getTunnelHoleCount()
  },
  { deep: true, immediate: true }
)

onUnmounted(() => {
  if (tunnelHoleCount_timer.value) {
    clearTimeout(tunnelHoleCount_timer.value)
    tunnelHoleCount_timer.value = null
  }
  if (accidents_timer.value) {
    clearTimeout(accidents_timer.value)
    accidents_timer.value = null
  }
})

onMounted(() => {
  getAccidents()
})
</script>
<style lang="scss" scoped>
$base-url: '@/assets/images/home/';

.Overview {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  font-family: PingFang SC;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0em;
  color: #ffffff;

  .item-block {
    margin-right: 80px;
    &:last-child {
      margin-right: 0;
    }
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 20px;
      background-color: #00ddff;
      border-radius: 2px;
      margin-right: 8px;
    }

    .dateSelect-block {
      display: flex;
      margin-left: 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      border-radius: 8px;
      background: rgba(15, 95, 255, 0.2);
      overflow: hidden;
      cursor: pointer;
      .date-block {
        // width: 44px;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        &.active {
          background: #0f60db;
        }
      }
    }
  }

  .overview-right {
    flex: 1;
  }

  .flex-block {
    display: flex;
    align-items: center;
    min-width: 121px;
    height: 40px;
    border-radius: 4px;
    background: #103f79;
    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    padding: 4px 14px;
    box-sizing: border-box;
    margin-left: 12px;
    &.m-width {
      min-width: 144px;
    }
    &:first-child {
      margin-left: 0;
    }
    .name {
      flex-shrink: 0;
    }
    .number {
      margin-left: 12px;
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      flex: 1;
    }
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 8px;

      &.icon1 {
        background: url($base-url + 'event_icon1.png') no-repeat;
        background-size: 100% 100%;
      }
      &.icon2 {
        background: url($base-url + 'event_icon2.png') no-repeat;
        background-size: 100% 100%;
      }
      &.icon3 {
        background: url($base-url + 'event_icon3.png') no-repeat;
        background-size: 100% 100%;
      }
      &.icon4 {
        background: url($base-url + 'event_icon4.png') no-repeat;
        background-size: 100% 100%;
      }
      &.icon5 {
        background: url($base-url + 'event_icon5.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .btn-block {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    font-variation-settings: 'opsz' auto;
    color: rgba(240, 245, 255, 0.95);
    margin-left: 24px;
  }
}
</style>
