<template>
  <div class="basicMaskDiv" @click="closeClick" v-if="show">
    <div class="van-popup-fans van-popup-fans-center" style="z-index: 2012;">
      <template v-if="canAssist == 0">
        <div class="assist-success-dialog">
          <div class="join-activity-btn" @click="closeClick" style="bottom:.65rem;"></div>
          <div class="close-btn-readS" @click="closeClick"></div>
        </div>
      </template>
      <template v-else-if="canAssist == 3">
        <div class="assist-fail-dialog">
          <div class="join-activity-btn" @click="closeClick" style="bottom:.65rem;"></div>
          <div class="close-btn-readS" @click="closeClick"></div>
        </div>
      </template>
      <template v-else-if="canAssist == 1">
        <div class="assist-fail-dialog" style="background-image: url('https://img10.360buyimg.com/imgzone/jfs/t1/110969/3/11985/15324/5f0599abE9724ead3/a0635507dff3f24e.png')">
          <div class="join-activity-btn" @click="closeClick" style="bottom:.65rem;"></div>
          <div class="close-btn-readS" @click="closeClick"></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

export default {
  props: [],
  components: {},
  data() {
    return {
      show: true,
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
    this.initData();
  },
  methods: {
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
  },
};
</script>

<style lang="scss">
.van-popup-fans {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  transition: transform .3s, -webkit-transform .3s;
  background-color: transparent;
}

.van-popup-fans-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
.assist-success-dialog {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/134562/32/3997/13648/5f0597efE5d3532cf/2a1b3f513b1c51e8.png") no-repeat;
  background-size: 100%;
  width: 5.9rem;
  height: 7rem;
  position: relative;
}
.assist-fail-dialog {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/115625/18/11776/15237/5f059918Edf5ee91d/47cd2c1f38c1176c.png") no-repeat;
  background-size: 100%;
  width: 5.9rem;
  height: 7rem;
  position: relative;
}
.join-activity-btn {
  width: 4rem;
  height: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .45rem;
}
.close-btn-readS {
  width: .45rem;
  height: .45rem;
  position: absolute;
  right: .23rem;
  top: .2rem;
}
</style>
