<template>
  <div class="photo" v-if="pageShow">
    <div class="photo-header">
      <h2>{{ info.albumName }}</h2>
      <div class="right" @click="linkTo('./AddAlbum?id=' + id)" hover-class="text-hover" v-if="id !== '1' && isAdmin">
        <image src="./images/setting.png" />
        <span>相册设置</span>
      </div>
    </div>
    <div class="photo-info">
      <div class="photo-info__item">
        <h2>{{ totalInfo.all || 0 }}</h2>
        <span>照片</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.today || 0 }}</h2>
        <span>今日</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.benyue || 0 }}</h2>
        <span>本月</span>
      </div>
      <div class="photo-info__item">
        <h2>{{ totalInfo.bennian || 0 }}</h2>
        <span>今年</span>
      </div>
    </div>
    <div class="photo-list">
      <div class="photo-title">
        <div class="left">
          <picker mode="date" @change="onChange">
            <div class="left-item">
              <span>{{ date || '所有日期' }}</span>
              <image src="./images/down.png" />
            </div>
          </picker>
          <div class="left-item" style="margin-right: 0;" @click="toChoose">
            <span v-if="userId"><AiOpenData v-if="userId" type="userName" :openid="userId"></AiOpenData></span>
            <span v-else>所有干部</span>
            <image src="./images/down.png" />
          </div>
        </div>
        <div class="right" hover-class="text-hover" @click="toEdit">
          <image src="./images/edit.png" />
          <span>编辑照片</span>
        </div>
      </div>
      <div class="photo-item__wrapper">
        <div class="photo-item" @click="linkTo('./Photo?id=' + item.id)" v-for="(item, index) in list" :key="index">
          <!-- <image :src="item.photoUrl" mode="aspectFill" /> -->
          <u-lazy-load :image="item.photoUrl" :loading-img="$cdn + 'watermark/loading.png'" img-mode="aspectFill"></u-lazy-load>
          <div class="photo-item__text">
            <h2><AiOpenData v-if="item.createUserId" type="userName" :openid="item.createUserId"></AiOpenData></h2>
            <p>{{ item.createTime }}</p>
          </div>
        </div>
        <AiEmpty v-if="!list.length"></AiEmpty>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" @click="linkTo('./AddReport?id=' + id)">上传拼图汇报</div>
      <div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'AlbumDetail',
    appName: '工作相册',

    data () {
      return {
        list: [],
        type: '',
        info: {},
        name: '',
        date: '',
        imgList: [],
        hideStatus: false,
        pageShow: false,
        id: '',
        current: 1,
        totalInfo: {},
        isMore: false,
        userId: ''
      }
    },

    computed: {
      ...mapState(['user'])
    },

    onLoad (query) {
      this.id = query.id
      this.isAdmin = !!this.$store.state.user.adminAuthType

      this.$nextTick(() => {
        this.getTotalInfo(query.id)
        this.getInfo(query.id)
        this.getList()
      })

      uni.$on('change', () => {
        this.isMore = false
        this.current = 1
        this.getInfo(query.id)

        this.$nextTick(() => {
          this.getList()
        })
      })

      uni.$on('update', () => {
        this.isMore = false
        this.current = 1
        this.getTotalInfo(query.id)

        this.$nextTick(() => {
          this.getList()
        })
      })
    },

    onUnload () {
      uni.$off('change')
      uni.$off('update')
    },

    methods: {
      ...mapActions(['selectPrivilegedContact']),

      linkTo (url) {
        uni.navigateTo({
          url
        })
      },

      toChoose () {
        this.$loading()
        this.selectPrivilegedContact({
          fromDepartmentId: 0,
          mode: 'single',
          selectedOpenUserIds: this.userId ? [this.userId] : ''
          }).then(res => {
          console.log(res)
          uni.hideLoading()
          if (res.userList && res.userList) {
            this.userId = res.userList[0].openUserId
          } else {
            this.$u.toast('该用户未授权')
          }

          this.isMore = false
          this.current = 1

          this.$nextTick(() => {
            this.getList()
          })
        }).catch(() => {
          uni.hideLoading()
        })
      },

      toEdit () {
        if (!this.list.length) {
          return this.$u.toast('相册无照片，请上传照片')
        }

        this.linkTo(`./EditAlbum?id=${this.id}`)
      },

      onChange (e) {
        this.date = e.detail.value
        this.isMore = false
        this.current = 1

        this.$nextTick(() => {
          this.getList()
        })
      },

      getInfo (id) {
        this.$loading()
        this.$http.post(`/api/appalbum/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.info = res.data
          }

          this.pageShow = true
        })
      },

      getTotalInfo (id) {
        this.$http.post(`/api/appalbumphoto/photoDetail?id=${id}`).then(res => {
          if (res.code === 0) {
            this.totalInfo = res.data
          }
        })
      },

      toAddImg () {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: this.info.photoSource === '1' ? ['camera'] : ['album', 'camera'],
          success: res => {
            this.linkTo(`./Watermark?url=${encodeURIComponent(res.tempFilePaths[0])}&albumId=${this.id}`)
          }
        })
      },

      getList () {
        if (this.isMore) return

        this.$loading()
        this.$http.post(`/api/appalbumphoto/DetailByAlbumID`, null, {
          params: {
            albumId: this.id,
            pageSize: 10,
            queryTime: this.date,
            userId: this.userId,
            pageNum: this.current
          }
        }).then(res => {
          if (res.code === 0) {
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records]
            } else {
              this.list = res.data.records
            }

            if (res.data.records.length < 10) {
              this.isMore = true
              uni.hideLoading()

              return false
            }

            this.current = this.current + 1
          }

          uni.hideLoading()
        })
      }
    },

    onReachBottom () {
      this.getList()
    }
  }
</script>

<style lang="scss" socped>
  .photo {
    min-height: 100vh;
    padding-bottom: 130px;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    .photo-list {
      padding: 32px;

      .photo-item__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .photo-item {
          position: relative;
          width: 328px;
          height: 328px;
          margin-bottom: 32px;
          border-radius: 12px;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          .photo-item__text {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            padding: 20px 16px 16px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

            h2 {
              margin-bottom: 12px;
              color: #fff;
              font-size: 32px;
              font-weight: 600;
            }

            p {
              color: #fff;
              font-size: 28px;
            }
          }

          &:nth-of-type(2n) {
            margin-left: 30px;
          }
        }
      }

      .photo-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 44px 0;

        & > h2 {
          color: #333333;
          font-size: 38px;
          font-weight: 600;
        }

        .left {
          display: flex;
          align-items: center;

          .left-item {
            display: flex;
            align-items: center;
            margin-right: 32px;

            span {
              color: #666666;
              font-size: 26px;
            }

            image {
              width: 32px;
              height: 32px;
              margin-left: 8px;
            }
          }
        }

        .right {
          display: flex;
          align-items: center;
          font-size: 26px;
          color: #333;

          image {
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
      }
    }

    .photo-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 148px;
      padding: 0 32rpx;
      color: #Fff;
      background: #3975C6;

      div {
        display: flex;
        align-items: center;
        width: 216px;
        height: 56px;
        line-height: 56px;
        text-align: center;
        justify-content: center;
        border-radius: 28px;
        font-size: 28px;
        background: #285DA4;
      }

      image {
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }

      h2 {
        flex: 1;
        margin-right: 20px;
        color: #fff;
        font-size: 38px;
      }
    }

    .photo-info {
      display: flex;
      align-items: center;
      height: 168px;
      background: #3975C6;

      & > div {
        flex: 1;
        text-align: center;

        h2 {
          margin-bottom: 10px;
          font-weight: 600;
          font-size: 44px;
          color: #fff;
        }

        span {
          color: #C3D5EE;
          font-size: 26px;
        }
      }
    }

    .btn-wrapper {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 112px;

      .btn {
        &:active, &.hover {
          opacity: 0.7;
        }
      }

      .btn:first-child {
        flex: 1;
        height: 112px;
        line-height: 112px;
        text-align: center;
        background: #FFFFFF;
        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
        color: #333333;
        font-size: 36px;
      }

      .btn:last-child {
        flex: 1;
        height: 112px;
        line-height: 112px;
        text-align: center;
        background: #1365DD;
        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
        color: #fff;
        font-size: 36px;
      }
    }
  }
</style>
