<script setup lang="ts">
import ContainerBox from '@/components/ContainerBox'
import borderBgImage from '@/assets/images/border-bg.png'
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, nextTick, computed, onMounted, Component, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { SeamlessScroll }  from '@twoke/seamless-scroll'

const $router = useRouter()

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

const messageData = ref([
  {
    type: "1",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  },
  {
    type: "1",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  },
  {
    type: "1",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  },
  {
    type: "2",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  },
  {
    type: "2",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  },
  {
    type: "2",
    desp: "渝中区较场口站发生火灾",
    time: "2022年2月14日15:49:54",
    address: "重庆市渝中区较场口站东一路119号",
    dept: "渝中区较场口消防救援站",
    state: 1,
  }
])

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


const timerId = ref<any>(null)
const isUpdate = ref<boolean>(true)

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

function clickMessageItemHander (id: number) {
  $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-${index}`"  
            :desp="item.desp"
            :address="item.address"
            :time="item.time"
            :type="item.type"
            :dept="item.dept"
            :state="item.state"
            @click="() => clickMessageItemHander(index)"
          />
        </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>
