<template>
  <m-card title="小区档案">
    <div>
      <Brief :list="summary.slice(0, 3)" size="0.24rem" />
      <h1></h1>
      <Brief :list="summary.slice(3)" size="0.24rem" />
    </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)}`"
        @click="onSelect(item)"
      >
        <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">
      <m-sub2>业务会</m-sub2>
      <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>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import Brief, { BriefProp } from '@/view/components/brief.vue'
import p1 from '@/assets/images/icon31.png'
import p2 from '@/assets/images/icon37.png'
import p3 from '@/assets/images/icon38.png'
import p4 from '@/assets/images/icon42.png'
import p5 from '@/assets/images/icon43.png'
import p6 from '@/assets/images/icon44.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: 'Archive',
  components: { Brief },
  emits: ['select'],
  setup(_, ctx) {
    const summary = ref<BriefProp[]>([])
    const buildingList = ref<unknown[]>([])
    const curBuilding = ref<string | null>(null)
    const memberList = ref<unknown[]>([])
    const addrList = ref([])

    watch(
      () => store.state.communityInfo,
      (cur) => {
        const {
          totCommunity = 0,
          totHous = 0,
          totCmp = 0,
          chargingPile = 0,
          parkingSpace = 0,
          totForOld = 0,
          communityList = [],
        } = cur
        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 },
          showLoading: false,
        })
      ).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) || []
      store.commit('SET_BUILDING_POINTS', addrList.value)
    }
    function onSelect({ x, y }) {
      if (!x || !y) return
      ctx.emit('select', [x, y])
    }
    return {
      onSelect,
      summary,
      buildingList,
      curBuilding,
      addrList,
      getColor,
      getIcon,
      memberList,
      getDuty,
      selectBuilding,
    }
  },
})
</script>

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

.buildings
  display flex
  justify-content space-between
  margin .05rem 0
  padding 0 .05rem
  >div
    $box()
    $center()
    width 23%
    height .4rem
    cursor pointer
    position relative
    color #aaa
    opacity .8
    text-align center
    padding 0 .08rem
    &:hover
      opacity 1
      color #fff
    &.on
      color #fff
      opacity 1
      box-shadow none
.address
  // display flex
  // flex-wrap wrap
  height 3.2rem
  overflow-y auto
  margin-bottom .1rem
  >div
    display inline-block
    width 48%
    height .6rem
    margin-top .04rem
    margin-left .04rem
    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
    cursor pointer
    &:hover
      box-shadow 0 0 .06rem 0 rgba(255,255,255, .1)
    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
      $box()
      p
        font-size .08rem
        color #aaa
        &:first-child
          font-size .09rem
          color #fff
</style>
