<template>
  <div id="MyAlbum">
    <div class="photo_box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getUserAlbum">
        <div class="day_box" v-for="(dayItem, dayIndex) in photoArr" :key="dayIndex">
          <p class="day_time">{{ dayItem.time }}</p>
          <div
            class="item"
            v-for="(item, index) in dayItem.photos"
            :key="index"
            :style="'background-image:url(' + item.img + ')'"
            @click="handlePhoto(dayIndex, index)"
          >
            <div class="check_icon" :class="item.checked ? 'checked' : ''" v-if="controlStatus == 'del'">
              <van-icon class="icon" name="success" />
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-image-preview v-model="showPreview" :images="previewArr" :start-position="startPosition" @change="previewChange">
    </van-image-preview>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  data() {
    return {
      userInfo: '',
      photoArr: [], //照片数组
      total: '', //照片总数
      showPreview: false,
      startPosition: 0,
      previewIndex: 0,
      previewArr: [],
      pageSize: 10,
      pageNum: 1,
      loading: false,
      finished: false,
      controlStatus: 'default', //默认状态:default 管理状态:control 删除状态:del
      delIds: [], //需要删除的图片id数组
      uploadImgList: [], //上传图片数组
      spaceSize: [], //用户空间
    }
  },
  mounted() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }

    // this.getUserAlbum()//获取当前用户相关的商户相册
    this.getUserSpaceSize()
  },
  methods: {
    //获取当前用户相关的商户相册
    getUserAlbum() {
      this.loading = true
      if (!this.userInfo.centerNo) return
      this.yxAxios
        .post(`${this.proxyUrl}/api/growth/photo/userAlbum`, {
          centerNo: this.userInfo.centerNo,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        })
        .then((res) => {
          console.log('相册详情:', res)
          this.loading = false
          if (res.data.code == 200) {
            this.formatPhoto(res.data.rows)
            this.total = res.data.total
            if (this.pageSize * this.pageNum >= res.data.total) {
              this.finished = true
            } else {
              this.pageNum++
            }
          } else {
            // this.$toast(res.data.message);
            console.log(res.data.message)
          }
        })
    },
    // 获取用户空间大小
    getUserSpaceSize() {
      this.yxAxios
        .post(`${this.proxyUrl}/api/growth/photo/getUserSpaceSize`, {
          centerNo: this.userInfo.centerNo,
        })
        .then((res) => {
          console.log('空间大小:', res)
          if (res.data.code == 200) {
            const sizeM = res.data.data / 1024 / 1024
            if (sizeM / 1024 > 1000) {
              this.spaceSize = (sizeM / 1024).toFixed(2) + 'G'
            } else {
              this.spaceSize = sizeM.toFixed(2) + 'M'
            }
            console.log(this.spaceSize)
          } else {
            // this.$toast(res.data.message);
            console.log(res.data.message)
          }
        })
    },
    // 处理照片数组
    formatPhoto(data) {
      let photoArr = this.photoArr
      var weekArr = ['一', '二', '三', '四', '五', '六', '日']
      for (let i in data) {
        let week = this.Moment(data[i].createTime).isoWeekday()
        data[i].time = this.Moment(data[i].createTime).format('MM月DD日') + ' 周' + weekArr[week - 1]
        data[i].checked = false
        if (photoArr.length == 0) {
          photoArr.push({
            time: data[i].time,
            photos: [data[i]],
          })
        } else if (photoArr[photoArr.length - 1].time == data[i].time) {
          photoArr[photoArr.length - 1].photos.push(data[i])
        } else {
          photoArr.push({
            time: data[i].time,
            photos: [data[i]],
          })
        }
      }
      console.log('处理后的photoArr:', photoArr)
      this.photoArr = photoArr
    },
    // 预览图切换
    previewChange(index) {
      this.previewIndex = index
    },
    // 点击照片
    handlePhoto(dayIndex, index) {
      // 先判断状态，删除操作时为选择图片，默认状态为预览图片操作,操作状态不触发事件
      if (this.controlStatus == 'del') {
        this.photoArr[dayIndex].photos[index].checked = !this.photoArr[dayIndex].photos[index].checked
      } else if (this.controlStatus == 'default') {
        let previewArr = []
        for (let i in this.photoArr[dayIndex].photos) {
          previewArr.push(this.photoArr[dayIndex].photos[i].img)
        }
        this.previewArr = previewArr
        this.startPosition = index
        this.previewIndex = index
        this.showPreview = true
      }
    },

    // 点击删除照片
    handleDel() {
      // 计算需要删除的图片
      let delIds = []
      for (let i in this.photoArr) {
        for (let j in this.photoArr[i].photos) {
          if (this.photoArr[i].photos[j].checked) {
            delIds.push(this.photoArr[i].photos[j].id)
          }
        }
      }
      this.delIds = delIds
      if (this.delIds.length == 0) {
        this.$toast('请至少选择一张照片')
      } else {
        this.$dialog
          .confirm({
            title: '警告',
            message: '确认删除照片？',
          })
          .then(() => {
            this.delPhotoByIds()
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    // 删除照片操作
    delPhotoByIds() {
      this.$toast.loading({
        message: '正在删除...',
        duration: 0,
        forbidClick: true,
      })
      this.http.removePersonPhoto(this.delIds.join(',')).then((res) => {
        this.$toast.clear()
        if (res.code == 200) {
          this.$toast('删除成功')
          this.controlStatus = 'control'
          this.pageReload() //删除成功后页面重新加载
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 页面数据重新加载
    pageReload() {
      this.pageNum = 1
      this.finished = false
      this.photoArr = []
      this.getUserAlbum()
      this.getUserSpaceSize()
    },
  },
}
</script>
<style lang="scss">
#MyAlbum {
  height: 100%;
  .photo_box {
    min-height: 100%;
    box-sizing: border-box;
    padding: 24px;
    padding-bottom: 168px;
    background: #f5f6fa;
    .day_box {
      padding-top: 22px;
    }
    .day_time {
      font-size: 32px;
      margin-bottom: 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;
      }
      .check_icon {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.62);
        border: 2px solid #ffffff;
        border-radius: 50%;
        .icon {
          display: none;
          font-size: 34px;
          margin-top: 2px;
          margin-left: 3px;
          color: #fff;
        }
        &.checked {
          background: #3074ff;
          border-color: #3074ff;
          .icon {
            display: block;
          }
        }
      }
    }
  }
  .control_panel {
    width: 100%;
    height: 168px;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .control_btn,
    .cancel_btn,
    .del_btn {
      display: inline-block;
      font-size: 32px;
      color: #3074ff;
      padding: 40px;
      margin-bottom: 40px;
    }
    .del_btn {
      color: #e70000;
    }
    .cancel_btn {
      color: #999;
      margin-right: 80px;
    }
    .control_box {
      width: 100%;
      box-sizing: border-box;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn {
        width: 116px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        .icon {
          font-size: 40px;
        }
        .text {
          width: 100%;
          font-size: 28px;
          margin-top: 16px;
          text-align: center;
        }
      }
      .blue_btn {
        width: 370px;
        height: 92px;
        margin-left: 80px;
      }
    }
  }
  .van-image-preview__cover {
    position: absolute;
    top: auto;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 80px;
  }
}
</style>
<style lang="scss">
// 长辈版
.elder {
  #MyAlbum .control_panel .control_btn,
  #MyAlbum .control_panel .cancel_btn,
  #MyAlbum .control_panel .del_btn {
    font-size: 36px;
  }
}
</style>