<template>
  <div class="header">
    <HeaderItem v-for="item in headerItems"
      :title="item.title"
      :count="item.count"
      :changeType="item.change < 0"
      :change="Math.abs(item.change)"
    >
      <template #icon>
        <div class="icon">
          <img  :src="item.icon" />
        </div>
      </template>
    </HeaderItem>
  </div>
</template>

<script>
import HeaderItem from './HeaderItem'
import today01Icon from '@/assets/images/icon/today-01.png';
import today02Icon from '@/assets/images/icon/today-02.png';
import today03Icon from '@/assets/images/icon/today-03.png';

export default {
  components: {
    HeaderItem
  },
  data: () =>({
    headerItems: [
      {
        title: '今日警情数量',
        icon: today01Icon,
        count: 22,
        change: -2
      },
      {
        title: '正在处理警情数',
        icon: today02Icon,
        count: 22,
        change: 2
      },
      {
        title: '完成警情数',
        icon: today03Icon,
        count: 22,
        change: 2
      }
    ]
  })
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 168px;
    height: 148px;
  }
}
</style>

