<template>
  <m-card mode="border">
    <m-card title="小区档案" mode="3">
      <div class="info">
        <div><img src="@/assets/images/zhenxing.png" /></div>
        <div>
          <h3>振兴小区</h3>
          <p>
            振兴小区建筑面积44250.0000平米，占地面积20000.0000平米，雅致的绿化，成熟的小区，营造安静且优雅的空间环境，构筑温情社区空间。对口育才幼儿园、凯乐幼儿园、蛇口启鹏幼儿园、蓓蕾幼儿园育才二中。
          </p>
        </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">
          {{ 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="@/assets/images/p7.png" />
            <p>{{ item.address }}</p>
          </div>
          <div>
            <img src="@/assets/images/p8.png" />
            {{ item.name }}
          </div>
          <span>{{ item.type }}</span>
          <b :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'

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: '公共',
      },
    ])
    const getColor = (type: string): string => {
      switch (type) {
        case '门岗':
          return '#826AFA'
        case '为老':
          return '#FF6161'
        case '公共':
          return '#8ED617'
        default:
          return '#fff'
      }
    }
    return {
      summary,
      addrList,
      getColor,
    }
  },
})
</script>

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

.info
  display flex
  height 1.1rem
  margin .05rem 0
  overflow hidden
  >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 .05rem
      > img
        width 90%
    &:last-child
      display flex
      flex-direction column
      justify-content space-around
      h3
        color #ccc
        font-size .16rem
        margin 0
.buildings
  display flex
  justify-content space-between
  >div
    $center()
    width 30%
    height .4rem
    background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
.address
  display flex
  flex-wrap wrap
  justify-content space-around
  >div
    width 48%
    padding .05rem .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
      &:nth-of-type(2)
        margin-top .02rem
        font-weight bold
      img
        width .15rem
        margin-right .05rem
    span
      position absolute
      right .04rem
      bottom .02rem
      font-size .08rem
    b
      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 #ccc
    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>
