<template>
  <div class="detail">
    <div class="banner-img">
      <p>{{params.title}}</p>
      <img :src="params.titleImgUrl" alt="">
    </div>
    <div class="num-row">
      <div class="item">
        <h3>{{numInfo.total}}</h3>
        <p>照片</p>
      </div>
      <div class="item">
        <h3>{{numInfo.lastMonth}}</h3>
        <p>本月</p>
      </div>
      <div class="item">
        <h3>{{numInfo.thisMonth}}</h3>
        <p>上月</p>
      </div>
      <div class="item">
        <h3>{{numInfo.thisYear}}</h3>
        <p>今年</p>
      </div>
    </div>
    <div class="list-conent">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="time-select">
          <span>{{item.name}}</span>
          <u-icon name="arrow-down" color="#333" size="16" />
          <span class="edit-btn" @click="editClick(editText)">{{editText}}</span>
        </div>
        <div class="img-list">
          <div class="img-item" v-for="(e, indexs) in item.list" :key="indexs">
            <p>{{e.createUserName}} 上传</p>
            <img :src="e.url" alt="" @click.stop="previewImage(item.list, e.url)">
            <span class="cir-icon" v-if="editText== '取消' && !e.isCheked" @click="checkImg(e, index, indexs)"></span>
            <u-icon name="checkmark-circle-fill" color="#26f" size="54" class="del-icon" @click="delSelect(e, index, indexs)" v-if="editText== '取消' && e.isCheked"></u-icon>
          </div>
        </div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>

    <div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div>
    <div class="footer-btn" @click="delConfirm" v-if="editText == '取消'">删除</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      list: [],
      limit: 9,
      size: 10 * 1024 * 1024,
      fileList: [],
      numInfo: {},
      params: {},
      editText: '编辑',
      delIds: []
    }
  },
  computed: { ...mapState(['user']) },
  onLoad(option) {
    this.params = option
    this.getList()
    this.getStatistic()
  },
  onShow() {
    document.title = "乡村相册"
  },
  methods: {
    delConfirm() {
      if(!this.delIds.length) {
        return this.$u.toast('请先选中需要删除的照片')
      }
      var id = this.delIds.join(',')
      this.$confirm('确定删除这些相片?').then(() => {
        this.$http.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.$u.toast('删除成功！')
            this.list = []
            this.getList()
            this.getStatistic()
            this.editClick('取消')
          }
        })
      })
    },
    editClick(text) {
      this.editText = text == '编辑' ? '取消' : '编辑'
      this.delIds = []
      if(text == '取消' && this.delIds.length) {
        this.list = []
        this.getList()
      }
    },
    checkImg(row, index, indexs) {
      this.list[index].list[indexs].isCheked = true
      this.delIds.push(row.id)
      this.$forceUpdate()
    },
    delSelect(row, index, indexs) {
      this.list[index].list[indexs].isCheked = false
      this.delIds.map((item, i) => {
        if(item == row.id) {
          this.delIds.splice(i, 1)
        }
      })
      this.$forceUpdate()
    },
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
    getList() {
      this.$http.post(`/app/appvillagepicturealbum/queryAlbum`, null, {
        params: {
          areaId: this.params.areaId,
          type: this.params.type
        }
      }).then(res => {
        if (res.code == 0) {
          this.list = Object.keys(res.data).map(v => {
            return {
              name: v,
              list: res.data[v]
            }
          })
          this.list.map((item) => {
            item.list.map((e) => {
              e.isCheked = false
            })
          })
        }
      })
    },
    getStatistic() {
      this.$http.post(`/app/appvillagepicturealbum/statistic`, null, {
        params: {
          areaId: this.params.areaId,
          type: this.params.type
        }
      }).then(res => {
        if (res.code == 0) {
          this.numInfo = res.data
        }
      })
    },
    uploadImg() {
      let params = {
        count: this.limit,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          let count = res.tempFiles?.length || res.tempFile ? 1 : 0
          if (count > this.limit && this.limit !== 1) {
            return this.$u.toast(`不能超过${this.limit}个`)
          }
          if (res.tempFiles) {
            res.tempFiles?.map((item) => {
              this.uploadFile(item)
            })
          } else if (res?.tempFile) {
            this.uploadFile(res.tempFile)
          }
        },
      }

      uni.chooseImage(params)
    },
    uploadFile(img) {
      this.fileList = []
      if (this.size > 0 && img.size > this.size) {
        return this.$u.toast(`不能超过${Math.ceil(this.size / 1024 / 1024)}MB`)
      }
      uni.showLoading({title: '上传中'})
      let formData = new FormData()
      formData.append('file', img)
      this.$http.post('/admin/file/add2', formData).then((res) => {
        uni.hideLoading()
        if (res?.data) {
          this.fileList.push(res.data)
          this.confirmUpload()
        } else {
          this.$u.toast(res.msg)
        }
      }).catch(err => {
        this.$u.toast(err)
        uni.hideLoading()
      })
    },
    confirmUpload() {
      var urlList = []
      this.fileList.map((item) => {
        urlList.push(item.url)
      })
      this.$http.post(`/app/appvillagepicturealbum/addPictures`, {
        areaId: this.params.areaId,
        type: this.params.type,
        urlList: urlList,
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast('上传成功!')
          this.getList()
          this.getStatistic()
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.detail {
  background: #F3F6F9;
  .banner-img{
    width: 100%;
    height: 272px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      filter: blur(2px);
    }
    p{
      position: absolute;
      top: 96px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 56px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFF;
      line-height: 80px;
      z-index: 99;
    }
  }
  .num-row{
    padding: 0 32px;
    display: flex;
    background-color: #fff;
    .item{
      flex: 1;
      text-align: center;
      h3{
        margin: 32px 0 16px 0;
        font-size: 38px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 52px;
      }
      p{
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 36px;
        padding-bottom: 32px;
      }
    }
  }
  .list-conent{
    padding-bottom: 112px;
  }
  .time-select{
    height: 116px;
    line-height: 116px;
    padding-left: 32px;
    font-size: 38px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    position: relative;
    span{
      display: inline-block;
      margin-right: 16px;
    }
    .edit-btn{
      display: inline-block;
      color: #26f;
      font-weight: 400;
      width: 200px;
      text-align: right;
      line-height: 88px;
      position: absolute;
      font-size: 32px;
      right: 18px;
      top: 20px;
    }
  }
  .img-list{
    overflow: hidden;
    padding-left: 32px;
    .img-item{
      position: relative;
      margin: 0 32px  32px 0;
      float: left;
      width: calc(50% - 32px);
      box-sizing: border-box;
      img{
        width: 100%;
        height: 328px;
        border-radius: 8px;
      }
      p{
        position: absolute;
        bottom: 16px;
        left: 16px;
        z-index: 9;
        font-size: 26px;
        color: #FFF;
        line-height: 36px;
      }
      .del-icon{
        position: absolute;
        right: 0;
        top: 0;
      }
      .cir-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 4px solid #ccc;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  .footer-btn{
    width: 100%;
    text-align: center;
    height: 112px;
    line-height: 112px;
    background: #3975C6;
    box-shadow: 0 1px 0 0 #EEEEEE;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    z-index: 999;
  }
}
</style>
