<template>
  <div class="bargainmainDivC">
    <div class="bargainmainDiv" v-if="show">
      <div class="tou" style=""><img :src="userImg" alt="" style="width:100%;height:100%;borderRadius:50%"/></div>
      <div class="nickName">{{ nickName }}</div>
      <div class="level">当前会员等级：{{ currentStarLevel }}级</div>
      <div class="picture">会员等级{{ requireMinLevel }}才能参与活动哦</div>
      <div class="picture1">感谢你的参与</div>
      <div v-if="isWebClick" class="button"></div>
      <div v-else class="button" v-lz-click="'4'" @click="goToShop(shopId)"></div>
    </div>
    <div class="bargain"></div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import apis1 from '../../../util/apis1.js';
import { goToShopPage } from '../../../util/tools';
import Vue from 'vue';
let { bargain, guest, toJoin,storeGoodsPoint } = apis1;
export default {
  components: {
    // goToShopPage,
  },
  props: ['datas', 'styleData', 'keyData', 'isTemplate', "modifyContent", "isWebClick"],
  data() {
    return {
      isMeetCondition:true,//是否满足参与活动条件
      show: true,
      a: [{ a: 1 }, { a: 2 }, { a: 3 }],
      dataAll: {},
      userImg: '',
      currentStarLevel: '',
      requireMinLevel: '',
      shopId: '',
      nickName: ''
    };
  },
  mounted() {
    if(!this.isWebClick && !this.isTemplate) {
      toJoin(data => {
        this.userImg = data.data.userImg;
        this.currentStarLevel = data.data.currentStarLevel;
        this.requireMinLevel = data.data.requireLevel;
        this.shopId = data.data.shopId;
        this.nickName = data.data.nickName;
      });
    }
  },

  methods: {
    initData(data) {
      console.log(data);
      let activityType = sessionStorage.getItem('activityType');
      this.dataAll = data;
    },
    goToShop(shopid) {
      console.log('11111', shopid);
      storeGoodsPoint(4)
      goToShopPage(shopid);
    }
  }
};
</script>

<style lang="scss">
  .bargainmainDivC{
    .bargain {
      position: absolute;
      width: 100%;
      height: 1rem;
      margin-top: 4rem;
      background: #d81e35;
    }
    .bargainmainDiv{
      position: absolute;
      width: 100%;
      height: 8.18rem;
      backgroundImage: url(//img10.360buyimg.com/imgzone/jfs/t1/164554/29/3168/33003/600644caE6901a40f/04891930982f81eb.png);
      backgroundSize: 100%;
      marginTop: -3.5rem;
      z-index: 9999;
    }
    .tou {
      width: 2.32rem;
      height: 2.32rem;
      position: absolute;
      borderRadius: 50%;
      left: calc(50% - 2.32rem / 2);
      top: 0.7rem;
    }
    .nickName {
      color: white;
      fontSize: 0.3rem;
      textAlign: center;
      marginTop: 3rem;
      fontWeight: bold;
    }
    .level {
      color: white;
      fontSize: 0.36rem;
      textAlign: center;
    }
    .picture {
      width: 100%;
      marginTop: 0.2rem;
      fontSize: 0.24rem;
      color: white;
      textAlign: center;
    }
    .picture1{
      width: 100%;
      fontSize: 0.24rem;
      color: white;
      textAlign: center;
    }
    .button {
      width: 6.12rem;
      height: 0.84rem;
      backgroundImage: url(//img10.360buyimg.com/imgzone/jfs/t1/170073/1/3340/4573/600651dbE6fcfd94d/9763ef2fa3eb9e2f.png);
      backgroundSize: 100%;
      position: absolute;
      left: calc(50% - 6.12rem / 2);
      marginTop: 1.8rem;
    }
  }

</style>
