<template>
<!--  好友点赞-->
  <div >
    <div class="snapdragonDiv">
      <div class="basicPopDiv">
        <div class="titleDiv">
          <div class="titleDiv1">
            <div class="leftLineDiv"></div>
            <span>好友助力共同集赞</span>
            <div class="RightLineDiv"></div>
          </div>
        </div>
        <div class="content-body">
          <div >
            <div class="zoom"
                 v-for="(item, index) in pictureUrl"
                 v-show="item"
                 :key="index"
            >
              <van-image
                width="4.97rem"
                height="3.97rem"
                fit="cover"
                :src="item"
                v-lz-click="'10'"
                @click="getImg(pictureUrl, index)"
              />
            </div>
          </div>
          <div style="padding-top: 0.7rem;width:100%">
          <button class="button" v-lz-click="'27'" @click="praiseClick">帮他点个赞</button></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import Vue from 'vue';
    import { ImagePreview } from 'vant';
    import store from '../../../../store/store.js';
    import apis1 from '../../../../util/apis1.js';
    Vue.use(ImagePreview);

    let { imgClickPraise} = apis1;
    export default {
        props: ['pictureUrl'],
        data() {
            return {
            };
        },
        created() {
        },
        methods: {
            //关闭点赞
            praiseCloseClick() {
                this.$emit('praiseCloseClick');
            },
            //点赞
            praiseClick(){
                imgClickPraise({
                    //shareUserId
                    shareUserId: store.state.shareUserId
                }).then(res => {
                    if (res.resp_code == 0) {
                        if(res.data.flag === '002'){
                            this.$toast({
                                duration: 0, // 持续展示 toast
                                forbidClick: true,
                                message: '他已经收到你的赞啦～',
                            });
                        }
                        //2秒后消失
                        var x = setTimeout(() => {
                            this.publicData.$emit('follow', true);
                            clearTimeout(x);
                            this.$toast.clear()
                        }, 2000);
                        this.$emit('praiseClick');
                    }
                    else{
                        console.log(res.data.flag +"---"+ res.data.resp_msg);
                        this.$toast({
                            duration: 0, // 持续展示 toast
                            forbidClick: true,
                            message: res.resp_msg,
                        });
                        //3秒后消失
                        var a = setTimeout(() => {
                            this.publicData.$emit('follow', true);
                            clearTimeout(a);
                            this.$toast.clear()
                        }, 3000);
                        this.$emit('praiseClick');
                    }
                });
            },
            //查看图片
            getImg(images,index) {
                ImagePreview({
                    images: this.pictureUrl,
                    showIndex: false,
                    loop: false,
                    startPosition: index
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
  #noPrizeDiv {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    z-index: 20;
  }

  #thanksjion {
    height: 6.6rem;
    width: 6rem;
    position: absolute;
    z-index: 2;
    margin: auto;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.2rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/165321/39/14389/3705/605960ecE9c9498f9/a359e13c90a17a1c.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }

  #close {
    height: 0.3rem;
    width: 0.3rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url('//img10.360buyimg.com/imgzone/jfs/t1/143521/26/18654/387/5fd9e706E8f1594e3/ae5cc06440559585.png') no-repeat;
    background-size: 100% 100%;
  }

  #top-img {
    height: 0.35rem;
    width: 2.39rem;
    margin: auto;
    margin-top: 0.4rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/138090/24/18694/2054/5fd996ffE21debdd7/9495c2233cce85e2.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }

  #bottom-content {
    height: 5.28rem;
    width: 6rem;
    background-color: white;
    margin: auto;
    border-radius: 0.2rem;
    margin-top: 0.3rem;
    padding-top: 0.48rem;
  }

  #bottom-content img {
    display: block;
    height: 1.83rem;
    width: 2.77rem;
    margin: auto;
  }

  #bottom-content p {
    /* padding-top: 0.2rem; */
    font-size: 0.28rem;
    font-weight: bold;
    color: #333333;
    display: block;
    margin-top: 0.38rem;
    text-align: center;
    /* margin-top: 0.3rem; */
  }

  #bottom-content button {
    display: block;
    margin: 0 auto;
    margin-top: 1.06rem;
    width: 5rem;
    background-color: #e2231a;
    color: white;
    font-size: 0.28rem;
    border-radius: 0.1rem;
    border: 1px solid #e2231a;
    padding: 0.26rem 0;
  }

  .snapdragonDiv {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    top: 0;
    bottom: 0;
    z-index: 200;

    .basicPopDiv {
      position: fixed;
      width: 6.48rem;
      min-height: 7rem;
      max-height: 100vh;
      background-color: #eaebf0;
      border-radius: 0.2rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;

      .titleDiv {
        width: 100%;
        height: 1.14rem;
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;

        .titleDiv1 {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333333;
          font-size: 0.46rem;
        }

        .leftLineDiv {
          width: 34px;
          height: 4px;
          background: linear-gradient(to right, #4f5f7a, #e9eaef);
          border-radius: 4px;
          margin-right: 0.1rem;
        }

        .RightLineDiv {
          width: 34px;
          height: 4px;
          background: linear-gradient(to left, #4f5f7a, #e9eaef);
          border-radius: 4px;
          margin-left: 0.1rem;
        }

        .closeDiv {
          position: absolute;
          top: -0.01rem;
          right: -0.25rem;
          bottom: 0;
          width: 48px;
          height: 48px;

          img {
            display: none
          }

          &:before, &:after {
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            content: "";
            width: .4rem;
            height: 0.04rem;
            border-radius: 1px;
            background-color: #8293ab;
          }

          &:before {
            transform: translate(-50%, -50%) rotate(45deg);
          }

          &:after {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }
      }

      .content-body {
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0.25rem;
        background-color: white;
        padding: .34rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0rem 0.05rem 0.16rem 0rem rgba(177, 177, 177, 0.18);
        border-radius: 0.1rem;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.47rem;
        letter-spacing: 0rem;
        color: #495975;
        display: flex;
        flex-direction: column;
        font-size: 0.44rem;
        align-items: center;
        justify-content: space-evenly;

        .icon {
          width: 1.53rem;
          height: 1.53rem;
        }

        .text {
          color: #495975;
        }

        .button {
          width: 100%;
          height: 0.94rem;
          background-color: #495975;
          border-radius: 0.1rem;
          color: #ffffff;
          font-size: 0.46rem;
        }
      }
    }
  }
  .explaincss{
    width: 4.76rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.26rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.47rem;
    letter-spacing: 0rem;
    color: #495975;
  }
  .markingcss{
    border-bottom:1px dashed #495975;
    height: 1.1rem;
    width:5.18rem;
    text-align: left;
    display: flex;
    align-items: center;
  }
  .markingcss0{
    border-bottom:0px dashed #495975;
    height: 1.1rem;
    width:5.18rem;
    text-align: left;
    padding-top:0.14rem;
  }
</style>
