<template>
  <div class="flex flex-col">
    <div class="top bg-homeBanner bg-cover bg-center" ref="topBox">
      <Banner
        :showPart="attendShow"
        @showAttendForm="showAttendForm"
        :timeStamp="timeStamp"
        :voteType="voteType"
        :status="details.status"
      ></Banner>
    </div>
    <div class="bot w-11.5/12 mt-3 mx-auto" ref="botbox" v-if="!attendShow">
      <app-search class="w-11/12 mx-auto" @search="search"></app-search>
      <div
        class="
          border-2 border-app-blue-3
          h-auto
          mx-auto
          mt-5
          relative
          rounded-xl
        "
        ref="borderBox"
        :class="[details.status < 3 ? 'list-contianer' : 'list-contianer1']"
      >
        <div class="img-holder w-full absolute -top-4">
          <div class="absolute w-full top-2 text-center text-sm">排行榜</div>
          <img src="@/assets/home/rank-title.png" alt="" class="w-48 mx-auto" />
        </div>
        <div
          class="w-11.5/12 mx-auto my-8 pb-2"
          @scroll="scrollStart"
          ref="scrollBox"
          :class="[details.status < 3 ? 'list1' : 'list11']"
        >
          <template v-if="lists.length > 0">
            <div v-for="(i, index) in lists" :key="index" @click="goVote(i.id)">
              <app-card2 class="mb-2" :cardContent="i" :status="details.status" />
            </div>
            <div class="h-1"></div>
          </template>
          <template v-else>
            <div
              class="w-full h-full flex flex-col items-center justify-center"
            >
              <img
                class="w-28 h-28"
                src="@/assets/home/empty.png"
                alt="empty"
              />
              <p class="text-sm text-center mt-3">暂无报名!</p>
            </div>
          </template>
        </div>
      </div>
    </div>
    <attend-form
      :attendShow="attendShow"
      @submitForm="submitForm"
      :voteId="details.ID"
      class="bot attend-form-contianer mt-5 overflow-y-scroll"
    />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { TimelineLite, Power2, CSSPlugin, gsap } from "gsap";
import Banner from "@/components/home/Banner.vue";
import { service } from "@/service/index";
import { Toast } from "vant";
gsap.registerPlugin(CSSPlugin);
export default Vue.extend({
  name: "Home",
  data() {
    return {
      // 动画相关参数
      anima: null as any,
      scrollArr: [] as any[],
      
      attendShow: false,
      showSearch: false,
      details: {} as any,
      lists: [],
      timeStamp: "",
      voteType: 1,
      timer: 0,
      cancelAjax: null as any,
    };
  },
  mounted() {
    this.getList();
    this.initAnima();
    this.createInterval(7000);
  },
  methods: {
    createInterval(waiter: number) {
      if (this.timer) clearInterval;
      this.timer = setInterval(() => {
        if (+this.timeStamp <= Date.now()) {
          this.getList();
        }
      }, waiter);
    },
    initAnima() {
      if (this.anima) this.anima = null;
      const { topBox, botBox, borderBox, scrollBox } = this.$refs;
      this.anima = new TimelineLite();
      this.anima.to(botBox, 0.1, {
        css: { height: "calc(100vh - 190px)" },
        ease: Power2.easeInOut,
      });
      this.anima.to(borderBox, 0.1, {
        css: { height: "calc(100vh - 140px)" },
        ease: Power2.easeInOut,
      });
      this.anima.to(scrollBox, 0.1, {
        css: { height: "calc(100vh - 180px)" },
        ease: Power2.easeInOut,
      });
      this.anima.to(
        topBox,
        0.6,
        {
          css: { height: "0px", visibility: "hidden" },
          ease: Power2.easeInOut,
          delay: 0.1,
        },
        ">-0.1"
      );
      this.anima.pause();
    },
    scrollStart(e: any) {
      let poisition = e.target.scrollTop;
      this.scrollArr.push(poisition);
      let l = this.scrollArr.slice(-2);
      if (e.target.scrollTop > 90 && l[0] < l[1]) {
        if (e.target.scrollHeight - 90 < window.innerHeight - 140) return;
        this.anima.play();
        this.showSearch = true;
      } else if (e.target.scrollTop <= 90 && l[0] > l[1] && l[1]) {
        this.anima.reverse();
        this.showSearch = false;
      }
    },
    search(val: any) {
      // 本地过滤数据
      this.lists = [];
      this.lists = this.details.voteOptions.filter(
        (item: { name: any; id: any }) =>
          item.name.indexOf(val) > -1 || item.id === val
      );
    },
    goVote(id: string) {
      this.$router.push({
        path: "/Home/CommunityVote",
        query: { optionId: id, voteID: this.details.ID },
      });
    },
    submitForm(v: boolean) {
      this.attendShow = false;
      if (v) {
        this.getList();
      }
      this.$nextTick(() => {
        this.initAnima();
      });
    },
    showAttendForm(isShow: boolean) {
      if (!this.details) {
        Toast("当前时间暂无活动");
        return;
      }
      ((this.$refs.topBox as any).style as any).height = "auto";
      this.attendShow = isShow;
    },
    getList(oid?: string, vid?: string) {
      service
        .voteDetails({
          execer: "user.p.szhtest.rankvote",
          funcName: "GetRankVoteInfo",
          payload: {
            optionId: oid,
            voteID: vid,
          },
        })
        .then((res) => {
          if (res.error != null) {
            if (this.timer) clearInterval(this.timer);
            return;
          }
          this.details = res.result;
          const { status } = this.details;
          this.details.voteOptions.forEach((item: any) => {
            item.description = item.desc;
          });
          this.lists = this.details.voteOptions || [];
          if (status && status === 3) {
            if (this.timer) clearInterval(this.timer);
          }
          const start = this.details?.startHeight;
          const end = this.details?.endHeight;
          this.getTimeStamp(start, end)
        })
        .catch(() => {
          if (this.timer) clearInterval(this.timer);
        });
    },
    getTimeStamp(start: string, end: string) {
      service.getHeight().then((res) => {
        const v = res.result.mainHeight;
        const blockTime = res.result.mainBlockTime
        if (+start > v) {
          this.voteType = 1;
          this.timeStamp =
            blockTime * 1000 + (+start - v) * 5000 + "";
        } else if (+end > v) {
          this.voteType = 2;
          this.timeStamp =
            blockTime * 1000 + (+end - v) * 5000 + "";
        } else {
          this.voteType = 3;
          this.timeStamp =
            blockTime * 1000 + (+end - v) * 5000 + "";
        }
      });
    }
  },
  components: {
    Banner,
    "app-search": () => import("@/components/common/Search.vue"),
    "app-card2": () => import("@/components/Card_two.vue"),
    "attend-form": () => import("@/components/home/AttendForm.vue"),
  },
});
</script>

<style scoped>
.list-contianer {
  height: calc(100vh - 400px);
}
.list-contianer1 {
  height: calc(100vh - 340px);
}
.list-none {
  height: calc(100vh - 400px) !important;
}
.attend-form {
  height: calc(100vh - 160px);
}

.list1 {
  height: calc(100vh - 445px);
  overflow-y: scroll;
}
.list11 {
  height: calc(100vh - 375px);
  overflow-y: scroll;
}
.list1-none {
  height: calc(100vh - 400px) !important;
}
</style>