<template>
  <m-card mode="border">
    <m-card class="card" title="指挥体系">
      <div class="command">
        <div class="flag">
          <img src="@/assets/images/zheng.png" />
          <img src="@/assets/images/jing.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>
      <div class="disposal">
        <m-sub>处置力量</m-sub>
        <div class="duty">
          <div>
            <p>值班人员</p>
            <p>日间值班 · 08:00 ~ 18:00</p>
          </div>
          <span />
          <div>
            <p>值班人员</p>
            <p>夜间值班 · 18:00 ~ 08:00</p>
          </div>
        </div>
        <div class="table">
          <div>
            <p>工作小组</p>
            <p>组长</p>
            <p>电话</p>
            <p>常驻人数</p>
            <p>报道制人数</p>
          </div>
          <div v-for="(item, i) in dutyTableData" :key="i">
            <p>{{ item.group }}</p>
            <p>{{ item.leader }}</p>
            <p>{{ item.phone }}</p>
            <p>{{ item.number1 }}</p>
            <p>{{ item.number2 }}</p>
          </div>
        </div>
      </div>
      <div class="soldier">
        <m-sub>单兵巡查边量</m-sub>
        <div class="btns">
          <div v-for="btn in btns" :key="btn.name">
            <img :src="btn.icon" />
            {{ btn.name }}
          </div>
        </div>
        <div class="list">
          <div v-for="soldier in soldierList" :key="soldier.id">
            <p>{{ soldier.name }}</p>
            <p>{{ soldier.phone }}</p>
            <span>查看点位</span>
          </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 } 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'
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 dutyTableData = ref([
      {
        group: '第一小组',
        leader: '组长名',
        phone: '1356249823',
        number1: 5,
        number2: 5,
      },
      {
        group: '第一小组',
        leader: '组长名',
        phone: '1356249823',
        number1: 5,
        number2: 5,
      },
      {
        group: '第一小组',
        leader: '组长名',
        phone: '1356249823',
        number1: 5,
        number2: 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 = ref<BriefProp[]>([
      {
        name: '居委会',
        value: 10,
        icon: icon3,
      },
      {
        name: '业委会',
        value: 15,
        icon: icon4,
      },
      {
        name: '物业企业',
        value: 20,
        icon: icon5,
      },
      {
        name: '交叉任职',
        value: 5,
      },
    ])
    const economicList = ref([
      {
        name: '商办空置率',
        value: 88,
      },
      {
        name: '综合商业体使用率',
        value: 88,
      },
    ])
    return {
      leaders,
      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 2.1
.command
  display flex
  .flag
    display flex
    flex-direction column
    justify-content space-around
    margin 0 .3rem 0 .05rem
    >img
      display block
      width .3rem
      height @width
      margin .04rem 0
  .leader
    display flex
    flex-wrap wrap
    flex 1
    >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
.disposal
  .duty
    display flex
    align-items center
    margin-bottom .05rem
    >span
      width .01rem
      height .14rem
      margin 0 .2rem
      background $secondary-color
    >div
      flex 1
      >p
        &:last-child
          color #ccc
.soldier
  margin .05rem 0
  .btns
    display flex
    justify-content flex-end
    >div
      display flex
      align-items center
      color $primary-color
      margin-left .2rem
      cursor pointer
      transition .3s ease-in-out
      &:hover
        transform scale(1.1)
        text-decoration underline
      img
        width .1rem
        height @width
        margin-right .05rem
  .list
    display flex
    justify-content space-between
    >div
      width 30%
      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
      padding .05rem .1rem
      box-sizing border-box
      span
        color $primary-color
        cursor pointer
        &:hover
          text-decoration underline
.party
  display flex
  .content
    padding-left .1rem
    flex 1
    &.party
      display flex
      flex-direction column
      justify-content space-around
      padding-bottom .1rem
    &.economic
      display flex
      >div
        flex 1
.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
      &:nth-of-type(3)
        flex 1.4
      &:last-child
        flex 1.1
</style>
