<template>
  <m-card mode="border">
    <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-sub>网格工作站</m-sub>
        <div class="table">
          <div>
            <p>网格工作站</p>
            <p class="thead3">网格长</p>
            <p>工作时段</p>
            <p>总人数</p>
          </div>
          <div v-for="(item, i) in dutyTableData" :key="i">
            <p>{{ item.group }}</p>
            <p class="doubleRow">
              <span>
                <span>日</span>
                <span>{{ item.personnelDay }}</span>
              </span>
              <span>
                <span>夜</span>
                <span>{{ item.personnelNight }}</span>
              </span>
            </p>
            <p class="doubleRow2">
              <span>{{ item.workTimeDay }}</span>
              <span>{{ item.workTimeNight }}</span>
            </p>
            <p>{{ item.number }}人</p>
          </div>
        </div>
      </div>
    </m-card>
    <m-card class="card" title="党建和经济">
      <div class="party">
        <Tabs :list="tabList" @select="setCurTab" />
        <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">
          <SubTitle>街道党员人数</SubTitle>
          <Summary :list="partySummary" />
          <SubTitle>物业"三驾马车"</SubTitle>
          <Brief :list="propertySummary" />
        </div>
      </div>
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import Summary, { SummaryProp } from '../components/summary.vue'
import Brief, { BriefProp } from '../components/brief.vue'
import Cricle from '../components/circle.vue'
import avatar1 from '@/assets/images/avatar1.png'
import avatar2 from '@/assets/images/avatar2.png'
import icon1 from '@/assets/images/icon1.png'
import icon2 from '@/assets/images/icon2.png'
import icon3 from '@/assets/images/icon3.png'
import icon4 from '@/assets/images/icon4.png'
import icon5 from '@/assets/images/icon5.png'
import store from '@/store'
export default defineComponent({
  name: 'Command',
  components: { Tabs, SubTitle, Summary, Brief, Cricle },
  setup() {
    // 指挥体系-领导
    const leaders = computed(() => {
      return [
        {
          img: avatar1,
          type: '指挥长',
          name: commandSystem.value.zhz,
        },
        {
          img: avatar2,
          type: '副指挥长',
          name: commandSystem.value.fzhz,
        },
      ]
    })
    // 指挥体系-人员
    const members = computed(() => {
      return [
        {
          name: commandSystem.value.sqglb,
          type: '社区管理办',
        },
        {
          name: commandSystem.value.dzb,
          type: '党政办',
        },
        {
          name: commandSystem.value.sqpab,
          type: '社区平安办',
        },
        {
          name: commandSystem.value.sqzzb,
          type: '社区自治办',
        },
        {
          name: commandSystem.value.ndpcs,
          type: '南东派出所',
        },
        {
          name: commandSystem.value.gczas,
          type: '广场治安所',
        },
        {
          name: commandSystem.value.scjgs,
          type: '市场监管所',
        },
        {
          name: commandSystem.value.cgzd,
          type: '城管中队',
        },
      ]
    })

    store.dispatch('GET_PUBLICSAFE_COMMANDSYSTEM')
    store.dispatch('GET_PUBLICSAFE_STREETPOWER')
    store.dispatch('GET_PUBLICSAFE_PARTY')
    store.dispatch('GET_PUBLICSAFE_ECONOMIC')

    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: '5',
      },
      {
        group: '第二工作站',
        personnelDay: '日间人',
        personnelNight: '夜间人',
        workTimeDay: '8时-18时',
        workTimeNight: '18时-8时',
        number: '5',
      },
      {
        group: '第三工作站',
        personnelDay: '日间人',
        personnelNight: '夜间人',
        workTimeDay: '8时-18时',
        workTimeNight: '18时-8时',
        number: '5',
      },
    ])

    watch(
      // 监听改变网格工作站的数据
      [() => streetPower.value, () => dutyTableData.value],
      ([data, dutyData]) => {
        if (data.length === 0) return
        dutyData.forEach((ele: any, i: number) => {
          const duty = data.find((e: any) => e.workstationName === ele.group)
          if (duty) {
            dutyTableData.value[i] = {
              group: ele.group,
              personnelDay: duty.personnelDay,
              personnelNight: duty.personnelNight,
              workTimeDay: duty.workTimeDay,
              workTimeNight: duty.workTimeNight,
              number: duty.num,
            }
          }
        })
      },
      { immediate: true }
    )

    const btns = ref([
      {
        icon: icon1,
        name: '单兵专题',
      },
      {
        icon: icon2,
        name: '排班表',
      },
    ])
    const soldierList = ref([
      {
        id: '1',
        name: '姓名',
        phone: '13652103974',
      },
      {
        id: '2',
        name: '姓名',
        phone: '13652103974',
      },
      {
        id: '3',
        name: '姓名',
        phone: '13652103974',
      },
    ])
    const curTab = ref('party')
    const setCurTab = (tab: string) => (curTab.value = tab)
    const tabList = ref<TabsProp[]>([
      {
        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, cross } = store.state.pubulicLeftParty
      return [
        {
          name: '居委会',
          value: com || 0,
          icon: icon3,
        },
        {
          name: '业委会',
          value: ywh || 0,
          icon: icon4,
        },
        {
          name: '物业企业',
          value: wy || 0,
          icon: icon5,
        },
        {
          name: '交叉任职',
          value: cross || 0,
        },
      ]
    })
    const economicList = computed(() => {
      return [
        {
          name: '商办空置率',
          value: economic.value.vacancyRate.split('%')[0] || 0,
        },
        {
          name: '综合商业体使用率',
          value: economic.value.useRate.split('%')[0] || 0,
        },
      ]
    })
    return {
      leaders,
      members,
      dutyTableData,
      btns,
      soldierList,
      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
  .leader
    display flex
    flex-wrap wrap
    flex 1
    padding 0.1rem 0
    border-bottom 1px solid rgba(91, 213, 255, 0.5)
    >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
.party
  display flex
  .content
    padding-left 0.1rem
    flex 1
    &.party
      display flex
      flex-direction column
      justify-content space-around
      padding-bottom 0.1rem
    &.economic
      display flex
      >div
        flex 1
.table
  border 0.01rem solid $blue
  font-size 0.09rem
  >div
    display flex
    background $table-bg(0.15)
    &:first-child
      background $table-bg()
    &+div
      border-top inherit
    p
      flex 1
      line-height 4
      text-align center
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      &+p
        border-left 0.01rem solid $blue
      &:nth-of-type(3)
        flex 1.4
      &:last-child
        flex 0.7
      &:first-child
        flex 1.2
    .thead3
      flex 2.5
    .doubleRow
      flex 2.5
      line-height 2
      display flex
      flex-direction column
      flex-wrap wrap
      >span
        flex 1
        padding 0
        margin 0
        display flex
        &:first-child
          flex 0.2
          border-bottom 0.01rem solid $blue
        >span
          flex 1
          &:first-child
            width 30px
            flex 0.2
            border-right 0.01rem solid $blue
    .doubleRow2
      display flex
      flex-direction column
      line-height 2
      >span
        flex 1
        &:first-child
          border-bottom 0.01rem solid $blue
</style>
