<template>
  <m-card
    title="实有人口"
    :addition="{ value: truePeople.personnelNum, unit: '人' }"
  >
    <Brief :list="summary" />
    <div class="content">
      <div v-for="item in population" :key="item.name">
        <m-count class="count" :value="item.value" />
        <div>
          <span>{{ item.name }}</span>
          <!-- <img src="@/assets/images/location.png" /> -->
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import inImg from '@/assets/images/in.png'
import out from '@/assets/images/out.png'
import store from '@/store'
import china from '@/assets/images/china.png'

export default defineComponent({
  name: 'Population',
  components: { Brief },
  setup() {
    store.dispatch('GET_PUBLICSAFE_TRUE_PEOPLE')
    const truePeople = computed(() => store.state.pubulicSafeTruePeople)

    const summary = computed(() => {
      return [
        { name: '本市户籍', value: truePeople.value.thisCity, icon: inImg },
        { name: '境外流入', value: truePeople.value.outCountry, icon: out },
        { name: '境内流入', value: truePeople.value.inCountry, icon: china },
      ]
    })

    const population = ref([
      { name: '老龄人口', value: 35648 },
      { name: '低保人口', value: 65315 },
      { name: '残障人士', value: 2657 },
    ])
    return {
      summary,
      population,
      truePeople,
    }
  },
})
</script>

<style lang="stylus" scoped>
.content
  display flex
  justify-content space-between
  >div
    width 32%
    background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
    padding 0.05rem 0.15rem
    .count
      font-size 0.12rem
    >div
      display flex
      align-items center
      justify-content space-between
      width 100%
      span
        font-size 0.09rem
        color #ccc
      img
        width 0.1rem
        height @width
</style>
