<template>
  <m-card mode="border2">
    <m-card class="card" mode="4" title="管理基数">
      <div class="basic">
        <div v-for="item in basicList" :key="item.name">
          <p>{{ item.name }}</p>
          <p>
            <m-count
              class="count"
              :value="item.value"
              :decimal="item.decimal || 0"
            />
            <span>{{ item.unit }}</span>
          </p>
        </div>
        <img src="@/assets/images/manage-basic.png" />
      </div>
    </m-card>
    <m-card class="card" mode="4" 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" mode="4" title="网格力量">
      <div v-if="gridList.length > 0" class="table">
        <div v-for="(item, i) in gridList" :key="i">
          <p>{{ item.department }}</p>
          <p>{{ item.persons }}</p>
        </div>
      </div>
      <m-empty v-else />
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { computed, defineComponent } 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 avatar3 from '@/assets/images/avatar3.png'
import avatar4 from '@/assets/images/avatar4.png'
import avatar5 from '@/assets/images/avatar5.png'
import store from '@/store'

export default defineComponent({
  name: 'ManageBasic',
  setup() {
    const streetPower = computed(() => store.state.pubulicLeftStreetPower)
    const stationInfo = computed(
      () =>
        streetPower.value.find((e: any) => e.id === store.state.curView.id) ||
        {}
    )
    const basicList = computed(() => {
      const {
        totalArea = 0,
        totalHousehold = 0,
        totalPopulation = 0,
        totalUnit = 0,
      } = stationInfo.value
      return [
        {
          name: '总面积',
          value: totalArea,
          unit: 'k㎡',
          icon: pic1,
          decimal: 2,
        },
        {
          name: '总户数',
          value: totalHousehold,
          unit: '户',
          icon: pic2,
        },
        {
          name: '总人口',
          value: totalPopulation,
          unit: '人',
          icon: pic3,
        },
        {
          name: '总单位',
          value: totalUnit,
          unit: '家',
          icon: pic4,
        },
      ]
    })
    const leaders = computed(() => {
      const {
        gridId = '无',
        viceGridId = '无',
        sheriffId = '无',
      } = stationInfo.value
      return [
        {
          img: avatar3,
          name: gridId,
          type: '网格长',
        },
        {
          img: avatar4,
          name: viceGridId,
          type: '副网格长',
        },
        {
          img: avatar5,
          name: sheriffId,
          type: '警长',
        },
      ]
    })
    // const getName = (type: string) => {
    //   switch (type) {
    //     case 'pcs':
    //       return '派出所'
    //     case 'scs':
    //       return '市场所'
    //     case 'cgzd':
    //       return '城管中队'
    //     case 'wgzx':
    //       return '网格中心'
    //     case 'lhsrs':
    //       return '绿化市容所'
    //     case 'djlly':
    //       return '党建联络员'
    //     case 'fwqyry':
    //       return '服务企业人员'
    //     default:
    //       return '无'
    //   }
    // }
    const gridList = computed(() => {
      const { gridPower } = stationInfo.value
      if (!gridPower) return []

      return gridPower.map((item: any) => {
        return {
          department: item.departmentName,
          persons: item.personnel,
        }
      })
    })
    return {
      basicList,
      leaders,
      gridList,
    }
  },
})
</script>

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

$dot()
  content ''
  display inline-block
  width .02rem
  height @width
  background #5BD5FF
  box-shadow 0 0 .03rem .02rem #5BD5FF
  border-radius 50%
  margin 0 .05rem
  transform translateY(-100%)
.card
  flex 1.8
  &:nth-of-type(2)
    flex 1
.basic
  $full()
  position relative
  $center()
  >img
    height 80%
  >div
    position absolute
    &:nth-of-type(1)
      top .1rem
      left .3rem
      text-align right
      p
        &:first-child
          &:after
            $dot()
    &:nth-of-type(2)
      top .1rem
      right .3rem
      p
        &:first-child
          &:before
            $dot()
    &:nth-of-type(3)
      bottom .1rem
      left .3rem
      text-align right
      p
        &:first-child
          &:after
            $dot()
    &:nth-of-type(4)
      bottom .1rem
      right .3rem
      p
        &:first-child
          &:before
            $dot()
    img
      width .26rem
      height @width
      margin-right .1rem
    .count
      font-size .14rem
      font-family $font-barlow
      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
  display flex
  flex-direction column
  justify-content space-around
  $full()
  >div
    display flex
    justify-content space-between
    padding .03rem .1rem
    background rgba(70,83,97,.4)
    box-shadow inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
    border-radius .03rem
    p
      &:first-child
        color #ccc
</style>
