<template>
  <div class="list">
    <AiTopFixed>
      <div class="area-content">
        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect">
          <img src="./img/local-icon.png" alt="">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-down" color="#666" size="24" />
        </AiAreaPicker>
      </div>
    </AiTopFixed>
    <div class="album-list">
      <div class="item" v-for="(item, index) in list" :key="index" v-if="item.total" @click="toDetail(item)">
        <img :src="item.url" alt="">
        <p class="text">{{item.name}}</p>
        <div class="tips">共{{item.total}}张</div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

  data() {
    return {
      list: [],
      areaId: '',
      areaName: ''
    }
  },
  computed: { ...mapState(['user']) },
  mounted() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    this.getList()
    uni.setNavigationBarTitle({title: '乡村相册'})
  },

  methods: {
    areaSelect(e) {
      this.areaId = e.id
      this.areaName = e.name
      this.getList()
    },  
    getList() {
      this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
        params: {
          areaId: this.areaId,
        }
      }).then(res => {
        if (res.code == 0) {
          this.list = res.data
        }
      })
    },
    toDetail(item) {
      uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${item.url}`})
    },
  },
  onReachBottom() {
    this.current++;
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.list {
  .area-content{
    width: 100%;
    line-height: 64px;
    img{
      width: 42px;
      vertical-align: middle;
      margin-right: 16px;
    }
    .u-icon{
      margin-left: 6px;
    }
  }
  .album-list{
    padding: 32px 0 0 32px;
    overflow: hidden;
    .item{
      width: calc(33% - 16px);
      height: 240px;
      border-radius: 8px;
      position: relative;
      margin: 0 16px 16px 0;
      float: left;
      img{
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
      .text{
        position: absolute;
        bottom: 16px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFF;
        line-height: 44px;
      }
      .tips{
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0 8px;
        line-height: 40px;
        background-color: rgba(0,0,0,.6);
        color: #fff;
        border-radius: 8px;
        font-size: 22px;
      }
    }
  }
}
</style>