<template>
  <div id="growUpAlbum">
    <div class="top" v-if="photoArr.length>0" :style="'background-image:url('+photoArr[0].img+')'">
      <div class="mask">
        <p class="title">{{albumTitle}}</p>
        <p class="time">{{albumTime}}</p>
        <div class="count">
          <van-icon class="icon" name="photo" />
          {{total}}
        </div>
      </div>
    </div>
    <div class="photo_box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getPhotoBasePhotoList">
        <div class="item" v-for="(item,index) in photoArr" :style="'background-image:url('+item.img+')'" :key="index" @click="handlePhoto(index)">
        </div>
      </van-list>
    </div>
    <van-image-preview v-model="showPreview" :images="previewArr" :start-position="startPosition" @change="previewChange">

      <template v-slot:cover>
        <van-button type="primary" class="save_my_album" color="#3074FF" round @click="handleSaveMyAlbum">添加到我的相册</van-button>
      </template>
    </van-image-preview>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userInfo: '',
      timeNo: '',//档期编号
      photoArr: [],//照片数组
      total: '',//照片总数
      albumTitle: '',//相册标题
      albumTime: '',//相册时间
      showPreview: false,
      startPosition: 0,
      previewIndex: 0,
      previewArr: [],
      pageSize: 10,
      pageNum: 1,
      loading: false,
      finished: false,
    }
  },
  mounted () {
    var userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
    this.timeNo = this.$route.query.timeNo//档期编号
    this.albumTitle = localStorage.getItem('albumTitle');
    this.albumTime = localStorage.getItem('albumTime');

    // this.getPhotoBasePhotoList()//获取当前用户相关的商户相册
  },
  methods: {
    //获取当前用户相关的商户相册
    getPhotoBasePhotoList () {
      this.loading = true;
      this.http.getPhotoBasePhotoList({
        "timeNo": this.timeNo,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        console.log('相册详情:', res)
        this.loading = false
        if (res.code == 200) {
          this.photoArr = this.photoArr.concat(res.rows)
          this.total = res.total
          if (this.pageSize * this.pageNum >= res.total) {
            this.finished = true
          } else {
            this.pageNum++
          }
          this.$nextTick(() => {
            let previewArr = []
            for (let i in this.photoArr) {
              previewArr.push(this.photoArr[i].img)
            }
            this.previewArr = previewArr
          })
        } else {
          this.$toast(res.message);
        }
      })
    },
    previewChange (index) {
      this.previewIndex = index
    },
    // 点击照片
    handlePhoto (index) {
      this.startPosition = index
      this.previewIndex = index
      this.showPreview = true;
    },
    // 点击保存到我的相册
    handleSaveMyAlbum () {
      this.getPhotoAddPersonPhoto(this.previewIndex)
    },
    // 保存照片到我的相册
    getPhotoAddPersonPhoto (index) {
      this.http.getPhotoAddPersonPhoto({
        "basePhoneId": this.photoArr[index].id,
        "centerNo": this.userInfo.centerNo,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast('保存成功，请前往我的相册查看');
        } else {
          this.$toast(res.message);
        }
      })
    }
  }
}
</script>
<style lang="scss">
#growUpAlbum {
  .top {
    width: 100%;
    height: 402px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.41);
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      p {
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .title {
        font-size: 36px;
      }
      .time {
        font-size: 28px;
        margin-top: 10px;
      }
      .count {
        position: absolute;
        bottom: 20px;
        right: 26px;
        font-size: 24px;
        color: #fff;
        display: flex;
        align-items: center;
        .icon {
          font-size: 30px;
          margin-right: 6px;
        }
      }
    }
  }
  .photo_box {
    padding: 24px;
    .item {
      display: inline-block;
      width: 346px;
      height: 456px;
      position: relative;
      margin-bottom: 10px;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      &:not(:nth-of-type(2n)) {
        margin-right: 10px;
      }
    }
  }
  .van-image-preview__cover {
    position: absolute;
    top: auto;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 80px;
  }
  .save_my_album {
    width: 360px;
    height: 80px;
    font-size: 30px;
    color: #fff;
  }
}
</style>