<template>
  <m-card mode="border2">
    <m-card class="card" title="指挥体系">
      <div class="command">
        <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 class="member">
          <div v-for="(item, i) in members" :key="i">
            <div>
              <p>{{ item.name }}</p>
              <span>{{ item.type }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="disposal">
        <m-sub2>网格工作站</m-sub2>
        <div v-for="item in dutyTableData" :key="item.group" class="card">
          <div class="title">
            {{ item.group }}
            <i />
            <p><m-count class="count" :value="item.number" /><span>人</span></p>
          </div>
          <div class="content">
            <p>日班：{{ item.workTimeDay }}</p>
            <p>{{ item.personnelDay }}</p>
          </div>
          <div class="content">
            <p>夜班：{{ item.workTimeNight }}</p>
            <p>{{ item.personnelNight }}</p>
          </div>
        </div>
      </div>
    </m-card>
    <m-card
      class="card"
      title="党建和经济"
      :btns="tabList"
      :cur-btn="curTab"
      @select="setCurTab"
    >
      <div class="party">
        <div v-if="curTab === 'economic'" class="content economic">
          <div v-for="circle in economicList" :key="circle.name">
            <Cricle :value="+circle.value" :name="circle.name" />
          </div>
        </div>
        <div v-else class="content party">
          <m-sub2>街道党员人数</m-sub2>
          <Summary :list="partySummary" :avatar="avatar6" />
          <m-sub2>物业"三驾马车"</m-sub2>
          <Brief :list="propertySummary.slice(0, 3)" color="#fff" />
          <m-sub2 :addition="{ value: propertySummary[3].value }">
            交叉任职
          </m-sub2>
        </div>
      </div>
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import Summary from '../components/summary.vue'
import Brief from '../components/brief.vue'
import Cricle from '../components/circle.vue'
import avatar3 from '@/assets/images/avatar3.png'
import avatar4 from '@/assets/images/avatar4.png'
import avatar6 from '@/assets/images/avatar6.png'
import icon31 from '@/assets/images/icon31.png'
import icon37 from '@/assets/images/icon37.png'
import icon38 from '@/assets/images/icon38.png'
import store from '@/store'
export default defineComponent({
  name: 'Command',
  components: { Summary, Brief, Cricle },
  setup() {
    // 指挥体系-领导
    const leaders = computed(() => {
      return [
        {
          img: avatar3,
          type: '指挥长',
          name: commandSystem.value.commander,
        },
        {
          img: avatar4,
          type: '副指挥长',
          name: commandSystem.value.deputyCommander,
        },
      ]
    })
    // 指挥体系-人员
    const members = computed(() => {
      return (commandSystem.value?.list || []).map((item: any) => ({
        name: item.principalName,
        type: item.managementName,
      }))
    })
    const commandSystem = computed(() => store.state.pubulicLeftCommandSystem)
    const streetPower = computed(() => store.state.pubulicLeftStreetPower)
    const party = computed(() => store.state.pubulicLeftParty)
    const economic = computed(() => store.state.pubulicLeftEconomic)

    const dutyTableData = ref([
      {
        group: '第一工作站',
        personnelDay: '日间人',
        personnelNight: '夜间人',
        workTimeDay: '8时-18时',
        workTimeNight: '18时-8时',
        number: 0,
      },
      {
        group: '第二工作站',
        personnelDay: '日间人',
        personnelNight: '夜间人',
        workTimeDay: '8时-18时',
        workTimeNight: '18时-8时',
        number: 0,
      },
      {
        group: '第三工作站',
        personnelDay: '日间人',
        personnelNight: '夜间人',
        workTimeDay: '8时-18时',
        workTimeNight: '18时-8时',
        number: 0,
      },
    ])

    watch(
      // 监听改变网格工作站的数据
      () => streetPower.value,
      (data) => {
        if (data.length === 0) return
        dutyTableData.value = data.map((item: any) => {
          return {
            group: item.stationName,
            personnelDay: item.personnelDay,
            personnelNight: item.personnelNight,
            workTimeDay: item.workTimeDay,
            workTimeNight: item.workTimeNight,
            number: item.stationPersonnelNum,
          }
        })
      },
      { immediate: true }
    )

    const curTab = ref('party')
    const setCurTab = (tab: string) => (curTab.value = tab)
    const tabList = ref([
      {
        key: 'party',
        name: '党建引领',
      },
      {
        key: 'economic',
        name: '经济',
      },
    ])
    const partySummary = computed(() => {
      return [
        {
          name: '现有党员',
          value: party.value.partyNum || 0,
          unit: '人',
        },
        {
          name: '机关直属党组织',
          value: party.value.organsParty || 0,
          unit: '人',
        },
        {
          name: '居民区党组织',
          value: party.value.residential || 0,
          unit: '人',
        },
        {
          name: '“两新”党组织',
          value: party.value.enterprise || 0,
          unit: '人',
        },
      ]
    })
    const propertySummary = computed(() => {
      const { wy, com, ywh, crossOffice } = party.value
      return [
        {
          name: '居委会',
          value: com || 0,
          icon: icon31,
        },
        {
          name: '业委会',
          value: ywh || 0,
          icon: icon37,
        },
        {
          name: '物业企业',
          value: wy || 0,
          icon: icon38,
        },
        {
          name: '交叉任职',
          value: crossOffice || 0,
        },
      ]
    })
    const economicList = computed(() => {
      return [
        {
          name: '商办空置率',
          value: economic.value.vacancyRate || 0,
        },
        {
          name: '综合商业体使用率',
          value: economic.value.useRate || 0,
        },
      ]
    })
    return {
      avatar6,
      leaders,
      members,
      dutyTableData,
      curTab,
      setCurTab,
      tabList,
      partySummary,
      propertySummary,
      economicList,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.card
  flex 1
  &:first-child
    flex 1.8
.command
  flex 1
  display flex
  flex-direction column
  white-space nowrap
  margin-bottom .1rem
  .leader
    display flex
    flex-wrap wrap
    flex 1
    padding 0.05rem 0
    border-bottom .01rem solid rgba(105,110,114,.3)
    margin-bottom .05rem
    >div
      width 50%
      display flex
      align-items center
      p
        font-size 0.11rem
        font-weight bold
      img
        width 0.28rem
        height @width
        margin-right 0.1rem
      span
        color #ccc
  .member
    display flex
    flex-wrap wrap
    borde 1px solid red
    flex 2
    >div
      width 25%
      display flex
      align-items center
      p
        font-size 0.11rem
        font-weight bold
      img
        width 0.28rem
        height @width
        margin-right 0.1rem
      span
        color #ccc
.disposal
  flex 1.3
  .card
    $card-bg2()
    padding .05rem .1rem
    &+.card
      margin-top .05rem
    .title
      display flex
      align-items center
      font-size .11rem
      font-weight bold
      .count
        font-family $font-barlow
        font-size .12rem
      i
        flex 1
        margin 0 .1rem
        height 0
        border-bottom .01rem dashed $primary-border
      span
        font-size .08rem
        color #999
    .content
      display flex
      align-items center
      justify-content space-between
      p
        &:first-child
          color #ccc
.party
  display flex
  height 100%
  .content
    padding-left 0.1rem
    flex 1
    display flex
    flex-direction column
    justify-content space-around
    &.economic
      flex-direction row
      >div
        flex 1
    :deep(.summary-container)
      >div
        &:before
          left -20%
</style>
