<template>
  <div class="photo">
    <div class="photo-wrapper">
      <image mode="widthFix" :src="img" @click="isShow = true" />
    </div>
    <u-popup v-model="isShow" :closeable="false" border-radius="32" mode="bottom" @close="isShow = false, currIndex = -1">
			<div class="photo-bottom">
        <div class="top">
          <h2>查看图片</h2>
          <p>长按图片进行分享给他人</p>
          <image @click="isShow = false, currIndex = -1" src="./images/down_boldw.png" />
        </div>
        <div class="btns">
          <div class="btn-item" hover-class="bg-hover" @click="back">
            <image src="./images/fanhui-black.png" />
            <span>返回</span>
          </div>
          <div class="btn-item" hover-class="bg-hover" @click="remove">
            <image src="./images/remove-black.png" />
            <span>删除</span>
          </div>
        </div>
      </div>
		</u-popup>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    name: 'Photo',

    appName: '相片',

    data () {
      return {
        img: '',
        id: '',
        isShow: true
      }
    },

    onLoad (query) {
      this.id = query.id

      this.$http.post(`/api/appalbumphoto/queryDetailById?id=${query.id}`).then(res => {
        if (res.code == 0) {
          this.img = res.data.photoUrl
        }
      })
    },

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

      back () {
        uni.navigateBack({
          delta: 1
        })
      },

      share () {
        uni.showActionSheet({
          itemList: ['分享', '微信分享'],
          success: data => {
            if (data.tapIndex === 0 || data.tapIndex === 1) {
              if (data.tapIndex === 0) {
                this.wxInvoke(['shareAppMessage', {
                  title: this.info.title,
                  desc: this.info.tableExplain,
                  link: this.linkUrl,
                  imgUrl: this.info.headPicture
                }, () => {
                  this.isShow = false
                }])
              } else {
                this.wxInvoke(['shareWechatMessage', {
                  title: this.info.title,
                  desc: this.info.tableExplain,
                  link: this.linkUrl,
                  imgUrl: this.info.headPicture
                }, () => {
                  this.isShow = false
                }])
              }
            }
          }
        })
      },

      remove () {
        this.$confirm('确定删除该图片？').then(() => {
          this.$http.post(`/api/appalbumphoto/delete?ids=${this.id}`).then(res => {
            if (res.code == 0) {
              this.$u.toast('删除成功')
              uni.$emit('update')

              this.back()
            }
          })
        }).catch(() => {
        })
      },

      preview (url) {
        uni.previewImage({
          urls: [url],
          current: url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .photo {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow-y: auto;

    * {
      box-sizing: border-box;
    }

    .photo-bottom {
      .top {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 96px;

        h2 {
          font-size: 28px;
          color: #333333;
          line-height: 40px;
        }

        p {
          color: #999999;
          font-size: 24px;
        }

        image {
          position: absolute;
          top: 50%;
          right: 32px;
          z-index: 1;
          width: 32px;
          height: 32px;
          transform: translateY(-50%);
        }
      }

      .btns {
        display: flex;
        align-items: center;
        height: 216px;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          flex: 1;

          image {
            width: 80px;
            height: 80px;
          }

          span {
            color: #333333;
            font-size: 28px;
          }
        }
      }
    }

    .photo-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 100vh;

      & > image {
        width: 100%;
      }
    }
  }
</style>
