<script setup lang="ts">
import ContainerBox from '@/components/ContainerBox'
// @ts-expect-error ts-migrate(2339)  Property 'getTodayDuty' does not exist on type '{}'.
import borderBgImage from '@/assets/images/border-bg.png'
// @ts-expect-error ts-migrate(2339)  Property 'getTodayDuty' does not exist on type '{}'.
import borderImage from '@/assets/images/border.png'
import StatisticsItem from './StatisticsItem.vue'
import MessageCard from './MessageCard.vue'
import { doingIcon, doneIcon, todayIcon } from '@/utils/icons'
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { SeamlessScroll }  from '@twoke/seamless-scroll'
import { getTodayCase } from '@/api/home'
import { TodayEventCase, TodayStatistics } from '@/api/model'

const $router = useRouter()

const statisticsItems = ref([
  {
    icon: todayIcon,
    title: "今日警情数量",
    number: 0,
    unit: "件"
  },
  {
    icon: doingIcon,
    title: "正在处理警情数",
    number: 0,
    unit: "件"
  },
  {
    icon: doneIcon,
    title: "完成警情数",
    number: 0,
    unit: "件"
  },
])

const messageData = ref<TodayEventCase[]>([])

const seamlessScroll = ref<typeof SeamlessScroll & { updateData: (fn: () => void ) => void }>(null as unknown as (typeof SeamlessScroll & { updateData: (fn: () => void ) => void }))

const isUpdate = ref<boolean>(true)

const enableScroll = computed<boolean>(() => messageData.value.filter(item => item.jqzt === '接警').length === 0)


function loadStatisticsItems (data: TodayStatistics) {
  statisticsItems.value = [
    {
      icon: todayIcon,
      title: "今日警情数量",
      number: data.total,
      unit: "件"
    },
    {
      icon: doingIcon,
      title: "正在处理警情数",
      number: data.processing,
      unit: "件"
    },
    {
      icon: doneIcon,
      title: "完成警情数",
      number: data.complete,
      unit: "件"
    },
  ]
}

function loadEventCase (datas: TodayEventCase[]) {
  messageData.value = datas
}


async function loadData() {
  getTodayCase().then(res => copeResponse(res.data, data => {
    loadStatisticsItems(data[0])
    loadEventCase(data[1])
  }))
}

loadData()

const dataTimer = setInterval(() => {
  loadData()
}, 30 * 1000)


onUnmounted(() => {
  if(dataTimer) clearInterval(dataTimer)
})

function clickMessageItemHander (id: string) {
  $router.push(`/detail/${id}`)
}

</script>

<template>
  <container-box :border="borderImage" :background="borderBgImage" title="今日警情" style="width:23.2vw;height:85.2vh;" >
    <div class="statistics-items">
      <StatisticsItem v-for="(item,index) in statisticsItems" 
        :key="`statistics-item-${index}`"
        :icon="item.icon"
        :title="item.title"
        :number="item.number"
        :unit="item.unit"
      />
    </div>
    <div class="message-list">
      <SeamlessScroll ref="seamlessScroll" :enable="enableScroll" height="70vh" width="22vw">
        <div v-show="isUpdate">
           <MessageCard v-for="(item,index) in messageData" :key="`message-item-${item.id}`"  
            :desp="''"
            :address="item.ddmc"
            :time="item.lasj"
            :type="item.jqflydm"
            :dept="item.xfjyjg_tywysbm"
            :state="item.jqzt"
            @click="() => clickMessageItemHander(item.id)"
          />
        </div>
      </SeamlessScroll>
    </div>
  </container-box>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.statistics-items {
  position: absolute;
  left: 0vw;
  width: 100%;
  padding: 0vh 0.5vw;
  .flex(space-between);
}
.message-list {
  padding-top: 6.8vh;
  .flex();
  flex-direction: column;
}
</style>
