<template>
  <m-card mode="border">
    <m-card title="小区档案" mode="3">
      <div class="info">
        <div><img src="@/assets/images/zhenxing.png" /></div>
        <div>
          <h3>振兴小区</h3>
          <div>
            <div>
              <img src="@/assets/images/p11.png" />
              <div>
                <p>健康</p>
                <m-count class="count" :value="92" />
              </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 ['紫光大厦', '文海大楼', '振兴小区', '振华大楼']"
          :key="item"
          :class="{ on: curBuilding === item }"
          @click="curBuilding = item"
        >
          {{ item }}
        </div>
      </div>
      <div class="address">
        <div
          v-for="(item, i) in addrList"
          :key="i"
          :style="`border-left-color: ${getColor(item.type)}`"
        >
          <div>
            <img :src="getIcon(item.name)" />
            <p>{{ item.address }}</p>
          </div>
          <div class="type">
            <span>{{ item.name }}</span>
            <span>{{ item.type }}</span>
          </div>
          <i :style="`background:${getColor(item.type)}`" />
        </div>
      </div>
      <div class="industry">
        <div class="title">
          <img src="@/assets/images/p9.png" />
          业委会
        </div>
        <div class="content">
          <div v-for="item in 3" :key="item">
            <p>姓名</p>
            <p>XX业委会主任</p>
          </div>
        </div>
      </div>
    </m-card>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } 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'

export default defineComponent({
  name: 'LeftSection',
  components: { Brief },
  setup() {
    const summary = ref<BriefProp[]>([
      { name: '小区数', value: 3, icon: p1 },
      { name: '总户数', value: 2715, icon: p2 },
      { name: '物业企业', value: 3, icon: p3 },
      { name: '充电桩', value: 150, icon: p4 },
      { name: '车位', value: 2500, icon: p5 },
      { name: '为老设施', value: 15, icon: p6 },
    ])
    const addrList = ref([
      {
        name: '封闭',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '门岗',
      },
      {
        name: '有门岗无值班',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '门岗',
      },
      {
        name: '集合',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '为老',
      },
      {
        name: '助餐',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '为老',
      },
      {
        name: '助浴',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '为老',
      },
      {
        name: '充电桩',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '公共',
      },
      {
        name: '停车',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '公共',
      },
      {
        name: '充电桩',
        address: '上海市黄浦区延安东路1292弄6~40号',
        type: '公共',
      },
    ])
    const getColor = (type: string): string => {
      switch (type) {
        case '门岗':
          return '#826AFA'
        case '为老':
          return '#FF6161'
        case '公共':
          return '#8ED617'
        default:
          return '#fff'
      }
    }
    const getIcon = (type: string): unknown => {
      switch (type) {
        case '集合':
          return type3
        case '助餐':
          return type6
        case '助浴':
          return type7
        case '充电桩':
          return type1
        case '停车':
          return type5
        default:
          return type2
      }
    }
    const curBuilding = ref('紫光大厦')
    return {
      summary,
      addrList,
      getColor,
      getIcon,
      curBuilding,
    }
  },
})
</script>

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

.info
  display flex
  min-height .8rem
  margin-top .03rem
  >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
  >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
    &: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
  justify-content space-around
  >div
    width 48%
    padding .03rem .07rem
    box-sizing border-box
    position relative
    margin-bottom .05rem
    background rgba(33,58,89,.2)
    border .01rem solid rgba(91,213,255,.1)
    border-left .02rem solid transparent
    overflow hidden
    >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
    i
      position absolute
      right -0.1rem
      bottom -0.1rem
      width .2rem
      height .2rem
      transform rotate(45deg)
      opacity .4
.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
    >div
      display flex
      flex-direction column
      justify-content center
      padding 0 .12rem
      min-height .5rem
      width 31%
      background url('@/assets/images/border.png') 100% / 100% 100% no-repeat
      p
        &:nth-of-type(2)
          color #aaa
</style>
