<template>
  <m-card mode="border">
    <m-card class="card" title="管理基数">
      <div class="basic">
        <div v-for="item in basicList" :key="item.name">
          <p>
            <img :src="item.icon" />
            {{ item.name }}
          </p>
          <p>
            <m-count class="count" :value="item.value" />
            <span>{{ item.unit }}</span>
          </p>
        </div>
      </div>
    </m-card>
    <m-card class="card" title="指挥体系">
      <div class="command">
        <div class="flag">
          <img src="@/assets/images/wangge.png" />
          <img src="@/assets/images/jingzhang.png" />
        </div>
        <div class="leader">
          <div v-for="(item, i) in leaders" :key="i">
            <img :src="item.img" />
            <div>
              <p>{{ item.name }}</p>
              <span>{{ item.type }}</span>
            </div>
          </div>
        </div>
      </div>
    </m-card>
    <m-card class="card" title="网格力量">
      <div class="table">
        <div>
          <p>部门</p>
          <p>人员</p>
        </div>
        <div v-for="(item, i) in gridList" :key="i">
          <p>{{ item.department }}</p>
          <p>{{ item.persons }}</p>
        </div>
      </div>
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import pic1 from '@/assets/images/pic1.png'
import pic2 from '@/assets/images/pic2.png'
import pic3 from '@/assets/images/pic3.png'
import pic4 from '@/assets/images/pic4.png'
import avatar1 from '@/assets/images/avatar1.png'
import avatar2 from '@/assets/images/avatar2.png'

export default defineComponent({
  name: 'ManageBasic',
  setup() {
    const basicList = ref([
      { name: '总面积', value: 241359, unit: '㎡', icon: pic1 },
      { name: '总户数', value: 341359, unit: '户', icon: pic2 },
      { name: '总人口', value: 965334, unit: '人', icon: pic3 },
      { name: '总单位', value: 5334, unit: '家', icon: pic4 },
    ])
    const leaders = ref([
      {
        img: avatar1,
        name: '姓名',
        type: '网格长',
      },
      {
        img: avatar2,
        name: '姓名',
        type: '副网格长',
      },
      {
        img: avatar1,
        name: '姓名',
        type: '警长',
      },
    ])
    const gridList = ref([
      { department: '派出所', persons: '朱洪元副所长、于冰警长、警力25人' },
      { department: '市场所', persons: '王绍良、陈蕾、张敏' },
      { department: '城管中队', persons: '尤懿副队长、城管队员8人' },
      { department: '城运中心', persons: '许俊' },
      { department: '建管中心', persons: '张沁园、车姝敏、杨姝敏' },
      { department: '党建联络员', persons: '方雅婷、秦雯、郭强' },
      { department: '服务企业人员', persons: '蓝俊' },
    ])
    return {
      basicList,
      leaders,
      gridList,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.card
  flex 1.8
  &:nth-of-type(2)
    flex 1
.basic
  $full()
  display flex
  flex-direction column
  justify-content space-around
  padding .05rem 0
  >div
    display flex
    align-items center
    justify-content space-between
    height 22%
    background linear-gradient(to right, rgba(30,251,255,.2), transparent)
    border-left .02rem solid $secondary-color
    padding 0 .2rem
    img
      width .26rem
      height @width
      margin-right .1rem
    .count
      color $yellow
      font-size .14rem
      font-family $font-pang
      margin-right .05rem
    span
      color #aaa
      font-size .09rem
.command
  display flex
  .flag
    display flex
    flex-direction column
    justify-content space-around
    margin 0 .3rem 0 .05rem
    >img
      display block
      width .36rem
      height @width
      margin .04rem 0
  .leader
    flex 1
    display flex
    flex-wrap wrap
    >div
      width 50%
      display flex
      align-items center
      p
        font-size .11rem
        font-weight bold
      img
        width .28rem
        height @width
        margin-right .1rem
      span
        color #ccc
.table
  border .01rem solid $blue
  >div
    display flex
    background $table-bg(.15)
    &:first-child
      background $table-bg()
    &+div
      border-top inherit
    p
      flex 1
      line-height 2
      padding 0 .05rem
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      &+p
        border-left .01rem solid $blue
      &:first-child
        flex 0.4
</style>
