<template>
  <div class="context">
    <img class="BannerImage" :src="Banner">
    <div class="search">
      <input placeholder="输入编号或姓名">
      <img class="IconSearch" :src="IconSearch">
      <!-- <i class="iconfont icon-sousuo3 IconSearch"></i> -->
    </div>
    <img class="informationimg" :src="ActivityInformation">
    <span class="box"></span>
    <div class="VoteListBox">
      <div class="VoteList">
        <van-tabs type="card">
          <van-tab title="最新上传">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div class="LatestUpload">
                <div class="LatestUploadList">
                  <div class="ActivePersonnelBox">
                    <img :src="AudioPlay">
                  </div>
                  <span class="ballot">NO.20000</span>
                  <span class="ActivePersonnelName">王璐璐</span>
                  <button class="VoteBtn" @click="gotovotingdetails">投TA一票</button>
                  <div class="VoteNumber">
                    <span>已获投票数：</span>
                    <p>1314票</p>
                  </div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="TOP50">
            <div class="LatestUpload">
              <div class="LatestUploadList">
                <div class="ActivePersonnelBox">
                  <img :src="AudioPlay">
                </div>
                <span class="ballot">NO.20000</span>
                <span class="ActivePersonnelName">王璐</span>
                <button class="VoteBtn" @click="gotovotingdetails">投TA一票</button>
                <div class="VoteNumber">
                  <span>已获投票数：</span>
                  <p>1314票</p>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <button class="signupBtn" @click="signup">我要报名</button>
    <!-- <toast-box v-if="showtoast" @close='showtoast=false'></toast-box>
    <common-toast v-if="showcommontiast" @close='showcommontiast=false'></common-toast>-->
  </div>
</template>

<script>
import Banner from "../../images/banner.jpg";
import ActivityInformation from "../../images/activityinformation.png";
import AudioPlay from "../../images/audio_play.png";
import IconSearch from "../../common/icon/sousuo.png";
// import ToastBox from '../../components/toast.vue'
// import CommonToast from '../../components/commontoast.vue'
import { createNamespacedHelpers } from "vuex";
const {
  mapState: mapactivityState,
  mapActions: mapactivityActions
} = createNamespacedHelpers("activitylist");
export default {
  name: "lotterylist",
  data() {
    return {
      Banner,
      ActivityInformation,
      AudioPlay,
      IconSearch,
      tab:'',
      page:1,
      q:'',
      // showtoast:false,
      // showcommontiast:false,
      //   list:[],
      loading: false,
      finished: false
    };
  },
  components: {
    // "vue-headful": () => import("vue-headful"),
    // 'ToastBox':ToastBox,
    // 'CommonToast':CommonToast,
  },
  computed: {
    ...mapactivityState({
      detail: s => s.detail
    })
  },
  created() {
    this.getActivityList().then(() => {
      
    })
  },
  methods: {
    ...mapactivityActions(["getActivityList"]),
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 2000);
    },
    signup() {
      this.$router.push({
        name: "signup"
      });
    },
    gotovotingdetails() {
      // this.showtoast =true;
      this.$router.push({
        name: "votingdetails"
      });
    }
  }
};
</script>

<style>
.van-tabs--card {
  width: 100%;
}
.van-tabs__nav--card {
  height: 100%;
  border: none;
  margin: 0;
}
.van-tabs__wrap {
  width: 100%;
  z-index: 1;
}
.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: rgba(166, 184, 201, 1);
  border-radius: 0.06rem;
}
.van-tabs--card .van-tabs__wrap {
  height: 0.4rem;
}
.van-tabs__nav--card .van-tab {
  border-right: none;
  background-color: rgba(217, 226, 233, 1);
  border-radius: 0.06rem;
  width: 100%;
  margin: 0 0.075rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-ellipsis {
  font-size: 0.16rem;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 0.22rem;
  text-align: center;
}
</style>


<style lang="scss" scoped>
.context {
  width: 100%;
  background-color: rgba(209, 220, 228, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .BannerImage {
    width: 100%;
    height: 2rem;
    margin-bottom: 0.2rem;
  }

  .search {
    width: 93%;
    height: 0.44rem;
    background-color: rgba(201, 214, 224, 1);
    border-radius: 6px;
    border: 0.01rem solid rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.19rem;

    input {
      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
      background-color: rgba(255, 255, 255, 0);
      color: rgba(255, 255, 255, 1);
      font-size: 0.16rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      line-height: 0.22rem;
      width: 5rem;
      text-indent: 0.1rem;
    }
    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 1);
      font-size: 0.16rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      line-height: 0.22rem;
    }

    .IconSearch {
      width: 0.2rem;
      height: 0.2rem;
      margin-right: 0.1rem;
      //   font-size: 0.3rem !important;
      //   color: rgba(255, 255, 255, 1) !important;
      //   padding-right: 0.1rem;
    }
  }
  .informationimg {
    width: 97%;
    height: 6.24rem;
    margin: 0 0.1rem 0.35rem 0;
  }

  .box {
    width: 89%;
    height: 0.12rem;
    background-color: rgba(255, 255, 255, 0.29);
    border-radius: 0.06rem 0.06rem 0 0;
  }
  .VoteListBox {
    width: 93.6%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0.06rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.19rem;

    .VoteList {
      margin: 0.26rem 0;
      width: 90%;

      .LatestUpload {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 0.28rem;

        .LatestUploadList {
          width: 48%;
          height: 3.1rem;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 4px 8px 0px rgba(166, 184, 201, 0.18);
          border-radius: 0.08rem;
          margin-bottom: 0.25rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;

          .ActivePersonnelBox {
            width: 90%;
            height: 1.83rem;
            border-radius: 0.15rem;
            margin-bottom: 0.11rem;
            border: 0.04rem solid rgba(166, 184, 201, 1);

            img {
              width: 100%;
              height: 100%;
              border-radius: 0.1rem;
            }
          }
          .ballot {
            position: absolute;
            top: 0;
            background: rgba(166, 184, 201, 1);
            border-radius: 0 0 0.08rem 0.08rem;
            padding: 0.02rem 0.12rem;
            font-size: 0.14rem;
            font-family: PingFangSC-Medium;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.2rem;
          }

          .ActivePersonnelName {
            font-size: 0.16rem;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 0.22rem;
            padding-bottom: 0.11rem;
          }

          .VoteBtn {
            width: 56%;
            height: 0.23rem;
            border-radius: 0.25rem;
            background-color: rgba(166, 184, 201, 1);
            border: none;
            font-size: 0.14rem;
            font-family: PingFangSC-Medium;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.2rem;
            margin-bottom: 0.14rem;
          }

          .VoteNumber {
            display: flex;
            flex-direction: row;

            span {
              font-size: 0.12rem;
              font-family: PingFangSC-Medium;
              font-weight: bold;
              color: rgba(0, 0, 0, 1);
              line-height: 0.17rem;
            }
            p {
              font-size: 0.12rem;
              font-family: PingFangSC-Medium;
              font-weight: bold;
              color: #f0737e;
              line-height: 0.17rem;
            }
          }
        }
      }
    }
  }
  .signupBtn {
    width: 91%;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(166, 184, 201, 1);
    border: none;
    font-size: 0.2rem;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 0.28rem;
    margin-bottom: 0.19rem;
  }
}
</style>


