<template>
  <div class="source-link">
    <div class="box">
      <div class="icon"></div>
      <div class="content">
        您即将跳转第三方链接，产生购买后 具体订单和物流信息请在第三方查询。
      </div>
      <div class="close" @click="_close"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'shop-source-link',
  props: {
    value: {},
    content: {}
  },
  data() {
    return {
      timer: null
    };
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      window.location.href = this.content;
    }, 1000);
  },
  methods: {
    _close() {
      this.isShow = false;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style lang="less" scoped>
.source-link {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(101, 101, 101, 0.5);
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 0.2rem;
    background: #fff;
    width: 2.8rem;
    height: 1.4rem;
    border-radius: 0.04rem;
    transform: translate(-50%, -50%);
    .icon {
      margin: -0.32rem auto 0.08rem;
      width: 0.64rem;
      height: 0.64rem;
      border-radius: 100%;
      box-shadow: 0 0.03rem 0.06rem rgba(114, 184, 255, 0.12);
      background: #fff url(./img/icon-warning.png) no-repeat center center;
      background-size: 0.48rem 0.48rem;
    }
    .content {
      line-height: 0.2rem;
      color: #919191;
      font-size: 0.14rem;
    }
    .close {
      position: absolute;
      right: 0;
      top: -0.4rem;
      width: 0.32rem;
      height: 0.32rem;
      background: url(./img/icon-close.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
</style>
