<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.leader }}(城管) 、{{ item.leader1 }}(绿化)</span>
              </span>
              <span>
                <span>夜</span>
                <span>{{ item.leader2 }}(警长)</span>
              </span>
            </p>
            <p class="doubleRow2">
              <span>{{ item.dayTime }}</span>
              <span>{{ item.nightTime }}</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 } 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 = ref([
      {
        img: avatar1,
        type: '指挥长',
        name: '袁登全',
      },
      {
        img: avatar2,
        type: '副指挥长',
        name: '卢军',
      },
      // {
      //   img: avatar1,
      //   type: '指挥长',
      //   name: '姓名',
      // },
      // {
      //   img: avatar2,
      //   type: '指挥长',
      //   name: '姓名',
      // },
    ])
    const members = ref([
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
      {
        name: '范杲逻',
        type: '党政办',
      },
      {
        name: '庞勇',
        type: '社区平安办',
      },
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
      {
        name: '鲁涵智',
        type: '社区管理办',
      },
    ])
    const dutyTableData = ref([
      {
        group: '第一工作站',
        leader: '长名',
        leader1: '人名',
        leader2: '名2',
        dayTime: '8时-18时',
        nightTime: '18时-8时',
        number: 5,
      },
      {
        group: '第二工作站',
        leader: '长名',
        leader1: '人名',
        leader2: '名2',
        dayTime: '8时-18时',
        nightTime: '18时-8时',
        number: 5,
      },
      {
        group: '第三工作站',
        leader: '长名',
        leader1: '人名',
        leader2: '名2',
        dayTime: '8时-18时',
        nightTime: '18时-8时',
        number: 5,
      },
    ])
    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 = ref<SummaryProp[]>([
      {
        name: '全部',
        value: 165,
        unit: '人',
      },
      {
        name: '政府单位',
        value: 20,
        unit: '人',
      },
      {
        name: '企业',
        value: 45,
        unit: '人',
      },
      {
        name: '群众',
        value: 100,
        unit: '人',
      },
    ])
    const propertySummary = computed(() => {
      const { num1, num2, num3 } = store.state.propertySummary
      return [
        {
          name: '居委会',
          value: num1 || 0,
          icon: icon3,
        },
        {
          name: '业委会',
          value: num2 || 0,
          icon: icon4,
        },
        {
          name: '物业企业',
          value: num3 || 0,
          icon: icon5,
        },
        {
          name: '交叉任职',
          value: 5,
        },
      ]
    })
    const economicList = ref([
      {
        name: '商办空置率',
        value: 88,
      },
      {
        name: '综合商业体使用率',
        value: 88,
      },
    ])
    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>
