<template>
  <transition name="fade"
              @after-enter="afterEnter"
              @after-leave="afterLeave">
    <div class="popup-box"
         v-show="show"
         v-if="status"
         @click="close">
      <div class="popup-wrap"
           @click.stop>
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
import bus from "../../util/bus.js";
export default {
  props: {
    visible: {
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      show: false,
      status: true,
      transitionend: false
    };
  },
  methods: {
    afterEnter() {
      this.afterOpen();
      this.transitionend = true;
    },
    afterLeave() {
      this.beforeClose();
      this.status = false;
      this.$parent.$destroy();
    },
    close() {
      if (this.show && this.transitionend) {
        this.show = false;
        this.$emit("close");
      }
    },
    afterOpen() {
      this.scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add("dialog-open");
      document.body.style.top = -this.scrollTop + "px";
    },
    beforeClose() {
      document.body.classList.remove("dialog-open");
      document.scrollingElement.scrollTop = this.scrollTop;
      document.body.style.top = "";
    }
  },
  watch: {
    visible(val) {
      this.show = val;
    }
  },
  mounted() {
    this.show = this.visible;
    window.addEventListener('popstate', () => {
      // 避免浏览器返回时还开着
      this.close()
    })
  }
};
</script>

<style lang="scss">
.popup-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(#000, 0.3);
  z-index: 99;
}

.gift-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 99;

  .title {
    height: 1rem;
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      line-height: 1rem;
      font-size: 0.32rem;
      border-bottom: 2px solid transparent;
      padding: 0 0.2rem;

      &.is-active {
        color: #ff6060;
        border-color: #ff6060;
      }
    }
  }

  .gift-content__box {
    padding: 0.3rem 0.4rem;
    height: 7.8rem;
    overflow: scroll;
  }

  .gift-content__box--record {
    height: 8.4rem;
    padding: 0;
    overflow: scroll;
    // -webkit-overflow-scrolling: touch;

    .is-empty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #666;
    }

    .record-list__item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .2rem .4rem;
      border-bottom: 1px solid #f7f7f7;

      .item-name {
        display: flex;
        flex-direction: column;
        font-size: 0.28rem;

        span {
          font-size: 0.24rem;
          color: #666;
        }
      }

      .item-gift {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.28rem;

        img {
          width: 1rem;
          height: 1rem;
          margin: 0 0.1rem;
        }
      }
    }

    .record-list__rank {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .4rem .6rem;
      border-bottom: .3rem solid #f7f7f7;
      position: relative;

      .rank-item {
        width: 28%;
        text-align: center;

        &:nth-of-type(1) {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }

        .rank-item__head {
          width: 1.4rem;
          height: 1.4rem;
          margin: 0 auto;
          font-size: 0;
          position: relative;

          &:nth-of-type(2) {
            margin-top: .4rem;
          }

          &.rank-item-0 {
            .bg {
              position: absolute;
              width: 172%;
              height: 172%;
              top: -36%;
              left: -38%;
              background: url(~@/assets/1.png) no-repeat center / cover;
            }
          }

          &.rank-item-1 {
            margin-top: .4rem;

            .bg {
              position: absolute;
              width: 110%;
              height: 110%;
              top: -16%;
              left: -11%;
              background: url(~@/assets/2.png) no-repeat center / cover;
            }

            img {
              width: 85%;
            }
          }

          &.rank-item-2 {
            margin-top: .4rem;
            
            .bg {
              position: absolute;
              width: 110%;
              height: 110%;
              top: -16%;
              left: -11%;
              background: url(~@/assets/3.png) no-repeat center / cover;
            }

            img {
              width: 85%;
            }
          }
        }

        i {
          color: red;
          font-style: normal;
        }

        .rank-item__name {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: .28rem;
          margin-top: .3rem;
        }

        span {
          color: #999;
          margin-top: .1rem;
          display: inline-block;
        }
      }

      img {
        border-radius: 50%;
        width: 95%;
      }
    }
  }

  .gift-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;

    .gift-item {
      position: relative;
      width: 28%;
      text-align: center;
      margin-bottom: 0.3rem;
      margin-right: .5rem;

      &:nth-of-type(3n) {
        margin-right: 0;
      }

      img {
        width: 100%;
        border-radius: 0.4rem;
        border: 1px solid transparent;
      }

      .gift-name {
        font-size: 0.28rem;
        font-weight: normal;
      }

      .gift-cost {
        font-size: 0.24rem;
        color: #666;
      }

      .gift-num {
        position: absolute;
        right: -5%;
        top: -5%;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #ff6060;
        color: #fff;
        font-size: .24rem;
        line-height: .4rem;
        text-align: center;
      }

      &.is-active {
        img {
          border-color: #ff6060;
        }

        .gift-name {
          color: #ff6060;
          font-weight: bold;
        }
      }
    }
  }

  .user-free__send {
    font-size: .24rem;
    color: #666;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &::before {
      content: "";
      width: .1rem;
      height: .1rem;
      border-radius: 50%;
      background: #ff6060;
      margin-right: .2rem;
    }
  }

  .send {
    width: 90%;
    margin: 0.3rem auto 0;
    background: #ff6060;
    color: #fff;
    font-weight: bold;
    font-size: 0.32rem;
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.2rem 0;
  }
}
</style>
