<template>
  <m-card title="生态">
    <div class="detail">
      <div
        v-for="item in ecologyList"
        :key="item.labelName"
        @click="getPoints(item.labelName)"
      >
        <m-count class="count orange-count" :value="item.num" />
        <p>{{ item.labelName }}</p>
      </div>
    </div>
    <m-sub2>便民设施</m-sub2>
    <div class="sum">
      <div v-for="item in sumList" :key="item.name">
        <img :src="item.icon" />
        <div>
          <m-count class="count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div>
      <m-sub2>商业综合体</m-sub2>
      <div class="business">
        <img
          v-for="photo in businessPhotos"
          :key="photo"
          class="photo"
          :src="photo"
        />
      </div>
    </div>
    <div>
      <m-sub2>历保</m-sub2>
      <div class="history photos">
        <m-scroll
          v-if="photos1 && photos1.length > 0"
          :length="Math.ceil(photos1.length / 3)"
          mode="2"
          :step="0.76"
          :limit="2"
        >
          <div
            v-for="(_, index) in Math.ceil(photos1.length / 3)"
            :key="index"
            class="wrapper"
          >
            <div
              v-for="photo in photos1.slice(index * 3, index * 3 + 3)"
              :key="photo.id"
              :name="`${index * 3}, ${index * 3 + 3}`"
              class="photo"
              :style="`background-image:url('${photo.photoUrl
                .replace('https://zhongbang.omniview.pro/', prefix)
                .replace('http://zhongbang.omniview.pro/', prefix)}')`"
            >
              <p :title="photo.buildingName">{{ photo.buildingName }}</p>
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
    <div>
      <m-sub2>文保</m-sub2>
      <div class="history photos">
        <m-scroll
          v-if="photos2 && photos2.length > 0"
          :length="Math.ceil(photos2.length / 3)"
          mode="2"
          :step="0.76"
          :limit="2"
        >
          <div
            v-for="(_, index) in Math.ceil(photos2.length / 3)"
            :key="index"
            class="wrapper"
          >
            <div
              v-for="photo in photos2.slice(index * 3, index * 3 + 3)"
              :key="photo.id"
              :name="`${index * 3}, ${index * 3 + 3}`"
              class="photo"
              :style="`background-image:url('${photo.photoUrl
                .replace('https://zhongbang.omniview.pro/', prefix)
                .replace('http://zhongbang.omniview.pro/', prefix)}')`"
            >
              <p :title="photo.buildingName">{{ photo.buildingName }}</p>
            </div>
          </div>
        </m-scroll>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import img1 from '@/assets/images/img1.png'
import img2 from '@/assets/images/img2.png'
import img3 from '@/assets/images/img3.png'
import img4 from '@/assets/images/img4.png'
import img5 from '@/assets/images/img5.png'
import img6 from '@/assets/images/img6.png'
import img7 from '@/assets/images/img7.png'
import img8 from '@/assets/images/img8.png'
import img9 from '@/assets/images/img9.png'
import photo1 from '@/assets/images/photo1.png'
import photo2 from '@/assets/images/photo2.png'
import store from '@/store'
import { api } from '@/ajax'

export default defineComponent({
  name: 'Ecology',
  setup() {
    const prefix = computed(() => api.SOURCE_URL)
    const ecologyList = computed(() => {
      const data = store.state.ecologyList
      const keys = ['衣', '食', '住', '行']
      return data.filter((e) => keys.includes(e.labelName))
    })
    const sumList = computed(() => {
      const data = store.state.facilityConvenient
      return Object.keys(data).map((key: string) => {
        return {
          name: key,
          value: data?.[key]?.length || 0,
          icon: whichIcon(key),
        }
      })
    })
    function whichIcon(name: string): string {
      switch (name) {
        case '便利店':
          return img3
        case '公厕':
          return img7
        case '药房':
          return img9
        case '菜场':
          return img5
        case '菜店':
          return img2
        case '为老':
          return img1
        case '电话亭':
          return img4
        case '垃圾箱房':
          return img8
        case '街面废物箱':
          return img6
        default:
          return img3
      }
    }
    const businessPhotos = ref([photo1, photo2])
    const photosList = computed(() => store.state.ecologyPhoto)
    const photos1 = computed(() =>
      photosList.value.filter((e) => e.buildingType.includes('历保'))
    )
    const photos2 = computed(() =>
      photosList.value.filter((e) => e.buildingType.includes('文保'))
    )
    const getPoints = (type: string) => {
      store.commit('SET_POINT_TYPE', type)
    }
    return {
      prefix,
      ecologyList,
      sumList,
      businessPhotos,
      photos1,
      photos2,
      getPoints,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.detail
  display flex
  width 100%
  justify-content space-around
  flex-wrap wrap
  margin .05rem 0
  >div
    $center()
    width 25%
    cursor pointer
    &:hover
      color #FF8635
      font-weight bold
  .count
    font-size .14rem
    font-family $font-barlow
    margin-right .08rem
.sum
  display flex
  flex-wrap wrap
  margin .05rem 0
  >div
    display flex
    align-items center
    width 25%
    margin .02rem 0
    img
      width .26rem
      height @width
      margin 0 .1rem 0 .05rem
    .count
      font-size .14rem
      font-family $font-barlow
    p
      color #ccc
.photos
  height .76rem
  margin-bottom .04rem
  overflow hidden
  .wrapper
    width 100%
    display flex
    justify-content space-between
    flex-wrap wrap
  .photo
    width 31%
    height .76rem
    position relative
    background-repeat no-repeat
    background-size cover
    background-position center
    >p
      position absolute
      left 0
      right 0
      bottom 0
      height .2rem
      line-height @height
      background rgba(0,0,0,0.6)
      text-align center
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      padding 0 .04rem
      box-sizing border-box
.business
  display flex
  justify-content space-between
  margin-bottom .02rem
  .photo
    width 48%
    height 1.1rem
    background-repeat no-repeat
    background-size cover
    background-position bottom center
</style>
