<template>
  <m-card mode="border">
    <m-card title="小区档案" mode="3">
      <div class="info">
        <div><img src="@/assets/images/zhenxing.png" /></div>
        <div>
          <h3>{{ communityName }}</h3>
          <div>
            <div>
              <img src="@/assets/images/p11.png" />
              <div>
                <p>健康</p>
                <m-count class="count" :value="healthVal" />
              </div>
            </div>
            <!-- <div>
              <img src="@/assets/images/p12.png" />
              <div>
                <p>疫苗接种率</p>
                <m-count class="count" :value="57" />%
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div>
        <Brief :list="summary.slice(0, 3)" size="0.32rem" />
        <h1></h1>
        <Brief :list="summary.slice(3)" size="0.32rem" />
      </div>
      <div class="buildings">
        <div
          v-for="item in buildingList"
          :key="item.sectId"
          :class="{ on: curBuilding === item.sectId }"
          @click="selectBuilding(item.sectId)"
        >
          {{ item.sectName }}
        </div>
      </div>
      <div class="address">
        <div
          v-for="(item, i) in addrList"
          :key="i"
          :style="`border-left-color: ${getColor(item.classification)}`"
        >
          <div>
            <div>
              <img :src="getIcon(item.relationName)" />
              <p>{{ item.sectName }}</p>
            </div>
            <div class="type">
              <span>{{ item.relationName }}</span>
              <span>{{ item.classification }}</span>
            </div>
            <i :style="`background:${getColor(item.classification)}`" />
          </div>
        </div>
      </div>
      <div v-show="memberList.length > 0" class="industry">
        <div class="title">
          <img src="@/assets/images/p9.png" />
          业委会
        </div>
        <div class="content">
          <div v-for="(item, i) in memberList" :key="i">
            <p>{{ item.dirName }}</p>
            <p>{{ getDuty(item.dirDuty) }}</p>
            <p>{{ item.hocName }}</p>
          </div>
        </div>
      </div>
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import Brief, { BriefProp } from '@/view/components/brief.vue'
import p1 from '@/assets/images/p1.png'
import p2 from '@/assets/images/p2.png'
import p3 from '@/assets/images/p3.png'
import p4 from '@/assets/images/p4.png'
import p5 from '@/assets/images/p5.png'
import p6 from '@/assets/images/p6.png'
import type1 from '@/assets/images/type1.png'
import type2 from '@/assets/images/type2.png'
import type3 from '@/assets/images/type3.png'
import type4 from '@/assets/images/type4.png'
import type5 from '@/assets/images/type5.png'
import type6 from '@/assets/images/type6.png'
import type7 from '@/assets/images/type7.png'
import store from '@/store'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'LeftSection',
  components: { Brief },
  setup() {
    const summary = ref<BriefProp[]>([])
    const buildingList = ref<unknown[]>([])
    const curBuilding = ref<string | null>(null)
    const memberList = ref<unknown[]>([])
    const addrList = ref([])
    const communityName = ref('')
    const healthVal = ref(0)

    watch(
      () => store.state.issueData,
      (issueData) => {
        if (!issueData || issueData.length === 0) return
        const [{ totalScore = 0 }] = issueData
        healthVal.value = totalScore
      },
      { deep: true, immediate: true }
    )

    watch(
      () => store.state.communityInfo,
      (cur) => {
        const {
          totCommunity = 0,
          totHous = 0,
          totCmp = 0,
          chargingPile = 0,
          parkingSpace = 0,
          totForOld = 0,
          communityList = [],
          bigscreenCommunityName = '',
        } = cur
        communityName.value = bigscreenCommunityName
        summary.value = [
          { name: '小区数', value: totCommunity, icon: p1 },
          { name: '总户数', value: totHous, icon: p2 },
          { name: '物业企业', value: totCmp, icon: p3 },
          { name: '充电桩', value: chargingPile, icon: p4 },
          { name: '车棚', value: parkingSpace, icon: p5 },
          { name: '为老设施', value: totForOld, icon: p6 },
        ]
        buildingList.value = communityList
        curBuilding.value =
          (communityList[0] && communityList[0].sectId) || null
        addrList.value = []
        memberList.value = []
        selectBuilding(curBuilding.value)
      },
      { deep: true, immediate: true }
    )
    const getColor = (type: string): string => {
      switch (type) {
        case '摄像头':
          return '#826AFA'
        case '为老设施':
          return '#FF6161'
        case '小区设施':
          return '#8ED617'
        default:
          return '#fff'
      }
    }
    const getIcon = (type: string): string => {
      if (!type) return type2
      if (type.indexOf('集合') >= 0) return type3
      if (type.indexOf('餐') >= 0) return type6
      if (type.indexOf('助浴') >= 0) return type7
      if (type.indexOf('充电') >= 0) return type1
      if (type.indexOf('车棚') >= 0) return type5
      if (type.indexOf('垃圾') >= 0) return type4
      return type2
    }
    const getDuty = (type: string): string => {
      switch (type) {
        case '1':
          return '主任'
        case '2':
          return '预留印鉴副主任'
        case '3':
          return '副主任'
        default:
          return '业委会成员'
      }
    }
    async function selectBuilding(id: string | null): Promise<void> {
      if (!id) return
      curBuilding.value = id
      addrList.value = (
        await ajax.get({
          url: api.GET_COMMUNITY_FACILITY,
          params: { sectId: id, pageSize: 1000 },
        })
      ).data.content.filter((item: any) => item.classification != '微更新')
      memberList.value =
        (
          buildingList.value &&
          (buildingList.value.find(
            (b: any) => b.sectId === curBuilding.value
          ) as any)
        ).icMember.sort((a: any, b: any) => +a.dirDuty - +b.dirDuty) || []
    }
    return {
      healthVal,
      communityName,
      summary,
      buildingList,
      curBuilding,
      addrList,
      getColor,
      getIcon,
      memberList,
      getDuty,
      selectBuilding,
    }
  },
})
</script>

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

.info
  display flex
  min-height .8rem
  margin .05rem 0
  >div
    flex 1
    color #ccc
    text-align justify
    &:first-child
      flex .56
      $center()
      background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
      margin-right .1rem
      > img
        width 88%
    &:last-child
      display flex
      flex-direction column
      justify-content space-around
      h3
        color #ccc
        font-size .13rem
        margin 0
      >div
        display flex
        >div
          flex 1
          display flex
          img
            width .25rem
            height @width
            margin-right .1rem
          p
            color #aaa
            font-size .09rem
          .count
            color #fff
            font-size .2rem
            font-family $font-pang

.buildings
  display flex
  justify-content space-between
  margin .05rem 0
  >div
    $center()
    width 23%
    height .4rem
    background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
    cursor pointer
    position relative
    color #aaa
    opacity .8
    text-align center
    padding 0 .08rem
    &:hover
      opacity 1
      color #fff
    &.on
      color #fff
      opacity 1
      &:after
        content ''
        display block
        position absolute
        width 40%
        height 100%
        border .01rem solid $edge
        left 0
        right 0
        margin 0 auto
        opacity .2
        box-shadow 0 0 .05rem .02rem $edge
.address
  // display flex
  // flex-wrap wrap
  height 3rem
  overflow-y auto
  >div
    display inline-block
    width 48%
    height .6rem
    margin-bottom .06rem
    margin-right @margin-bottom
    overflow hidden
    padding .03rem .05rem
    box-sizing border-box
    position relative
    background rgba(33,58,89,.2)
    border .01rem solid rgba(91,213,255,.1)
    border-left .02rem solid transparent
    i
      position absolute
      right -0.1rem
      bottom -0.1rem
      width .2rem
      height .2rem
      transform rotate(45deg)
      opacity .4
    >div
      display flex
      width 100%
      height 100%
      flex-direction column
      justify-content space-around
      >div
        display flex
        align-items center
        p
          color #aaa
          flex 1
        img
          width .15rem
          height @width
          margin-right .1rem
      .type
        display flex
        justify-content space-between
        font-size .08rem
.industry
  .title
    display flex
    align-items center
    font-family $font-zcool
    font-size .14rem
    color $edge
    img
      width .18rem
      height @width
      margin-right .05rem
  .content
    display flex
    justify-content space-between
    flex-wrap wrap
    overflow hidden
    >div
      flex 1
      display flex
      flex-direction column
      justify-content center
      padding .05rem .08rem
      min-height .5rem
      margin-bottom .05rem
      margin-right @margin-bottom
      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
      p
        font-size .08rem
        color #aaa
        &:first-child
          font-size .09rem
          color #fff
</style>
