<template>
  <div class="announcement">
    <div class="tap-part">
      <van-tabs
        v-model="active"
        title-active-color="#6600FF"
        color="#6600FF"
        @click="onTabsClick"
        line-width="175px"
      >
        <van-tab title="最新活动" name="0">
          <div class="tips-list">
            <div
              :class="['tip-item', item.active && 'active']"
              v-for="item in tipList"
              @click="selectChange(item.value)"
            >
              {{ item.label }}
            </div>
          </div>

          <div class="card-news-list">
            <div
              class="detail-card shadow-radius news-card"
              v-for="item in activityList"
              @click="getDetail(item)"
            >
              <div class="image" v-if="item.annexArray">
                <img style="height: 8rem" :src="item.annexArray[0]" alt="" />
              </div>
              <div class="info-part">
                <p class="tit">{{ item.activityName }}</p>
                <div class="bottom">
                  <div class="left">
                    <span
                      class="normal-tip by y-bg"
                      v-if="item.registrationStatus === '1'"
                      >报名中</span
                    >
                    <span class="normal-tip by h-bg" v-else>报名已结束</span>
                    <span
                      class="normal-tip yd d-bg"
                      @click.stop="noThing"
                      v-if="item.registrationStatus === '1'"
                      >活动风采</span
                    >
                    <span
                      class="normal-tip yd z-bg"
                      @click.stop="getStyle(item)"
                      v-if="
                        item.registrationStatus === '2' &&
                        item.styleStatus === '1'
                      "
                      >活动风采</span
                    >
                  </div>

                  <div class="right">
                    <div class="num">{{ item.partakeNumber }}人参与</div>
                    <div
                      class="icon-collect"
                      @click.stop="changeCollectorsStatus(item)"
                    >
                      <i
                        class="iconfont icon-wujiaoxingxingxingshoucangdianji blue"
                        v-if="item.collectorsStatus === '2'"
                      ></i>
                      <i
                        class="iconfont icon-wujiaoxingxingxingshoucangdianji"
                        v-else
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="报名记录" name="1">
          <div class="card-news-list">
            <div
              class="record-card shadow-radius"
              v-for="item1 in regisSignList"
            >
              <div class="left" @click="showImg([item1.codeUrl])">
                <img :src="item1.codeUrl" alt="" />
                <p class="text">请出示二维码签到</p>
              </div>
              <div class="right">
                <div class="title">{{ item1.activityName }}</div>

                <div class="time">时间：{{ item1.activityStartTime }}开始</div>

                <div class="add">
                  <p>地址：</p>
                  <p>{{ item1.activityAddress }}</p>
                </div>

                <div class="bottom">
                  <p
                    class="normal-tip by y-bg"
                    v-if="item1.registrationStatus === '1'"
                  >
                    报名中
                  </p>
                  <p class="normal-tip by h-bg" v-else>报名已结束</p>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from "vant";
import Base from "@/pages/base/base";
import {
  clickCollect,
  list,
  listRegisSignInfo,
} from "../../service/api_activity.js";
import auth from "../../service/auth";
export default {
  name: "ParkActivities",
  mixins: [Base],
  data() {
    return {
      dc_key: ["activityType"],
      active: 0,
      userId: "",
      tipList: [],
      search: {
        activityType: "",
        userId: "",
        publishStatus: "2",
      },
      activityList: [],
      regisSignList: [],
    };
  },
  mounted() {
    if (this.$route.query.active) {
      this.active = this.$route.query.active;
    }
    this.userId = auth.uid();
    this.initDict(this.dc_key).then((res) => {
      this.tipList = this.dc_data.activityType;
      this.getData();
      this.getRegisSignInfo();
    });
    if (window.history && window.history.pushState) {
      // 向历史记录中插入了当前页
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    showImg(imgs) {
      ImagePreview(imgs);
    },
    onTabsClick(val) {
      if (val == 0) {
        this.getData();
      } else {
        this.getRegisSignInfo();
      }
    },

    goBack() {
      this.$router.push({ path: "/home/home" });
    },
    getData() {
      const _this = this;
      this.search.userId = this.userId;
      _this.activityList = [];
      list(this.search)
        .then((res) => {
          res.forEach((i) => {
            _this.activityList.push(i);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getRegisSignInfo() {
      const _this = this;
      listRegisSignInfo({ userId: this.userId, referenceType: "1" })
        .then((res) => {
          _this.regisSignList = res;
          _this.regisSignList.forEach((item) => {
            if (item.annexArray && item.annexArray.length) {
              const obj = item.annexArray[0];
              item.codeUrl =
                this.$constant.BASE_URI +
                "/wx/fileController/download/" +
                obj.substring(obj.lastIndexOf("/"), obj.length);
            }
            item.activityStartTime = this.$common.transBaseDateTime(
              item.activityStartTime
            );
          });
          console.log(_this.regisSignList);
        })
        .catch(() => {});
    },
    selectChange(value) {
      let tel = true;
      this.tipList.forEach((i) => {
        if (i.value === value) {
          if (i.active) {
            tel = false;
          } else {
            i.active = true;
          }
        } else {
          i.active = false;
        }
      });
      if (tel) {
        this.search.activityType = value;
        this.getData();
      }
    },
    getDetail(val) {
      this.$router.push({
        path: "/parkActivities/detail",
        query: {
          // 这里面是写需要传送的值
          id: val.id,
        },
      });
    },
    getStyle(val) {
      this.$router.push({
        path: "/parkActivities/style",
        query: {
          // 这里面是写需要传送的值
          id: val.id,
        },
      });
    },
    noThing() {
      // Toast('活动处于报名中')
      console.log("无效点击");
    },
    changeCollectorsStatus(val) {
      if (val.collectorsStatus === "2") {
        const _this = this;
        clickCollect({
          id: val.id,
          userId: auth.currUser().id,
          collectorsStatus: "1",
        }).then((res) => {
          _this.getData();
          _this.getRegisSignInfo();
        });
      } else {
        const _this = this;
        clickCollect({
          id: val.id,
          userId: auth.currUser().id,
          collectorsStatus: "2",
        }).then((res) => {
          _this.getData();
          _this.getRegisSignInfo();
        });
      }
    },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.announcement {
  box-sizing: border-box;
  .tap-part {
    margin-top: 10px;
    height: calc(100vh - 10px);

    .van-tabs {
      height: 100%;
    }

    .info-list {
      height: calc(100vh - 92px);
      background-color: #fff;
      padding: 0 20px;
      overflow-y: auto;
    }
  }
}

//头部标签
.tips-list {
  margin-top: 20px;
  @include flex;
  flex-wrap: wrap;
  .tip-item {
    width: 120px;
    margin: 0 15px 20px;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    color: #fff;

    border-radius: 4px;
    background-color: rgba(215, 215, 215, 1);
  }
  .active {
    background-color: $main;
  }
}

.card-news-list {
  padding: 20px 20px;
  .news-card {
    margin-bottom: 10px;
  }
  .record-card {
    margin-bottom: 10px;
    height: 346px;
    background-color: #fff;
    padding: 20px 30px;
    box-sizing: border-box;
    @include flex;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      img {
        width: 244px;
      }
      .text {
        margin-bottom: 10px;
        text-align: center;
        font-size: 16px;
        color: $color4;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      font-size: 24px;
      height: 100%;
      color: $color4;
      padding-left: 100px;
      .title {
        font-weight: 700;
        margin-top: 20px;
      }
      .time {
      }

      .add {
        p {
          word-break: break-word;
        }
      }
      .bottom {
        display: flex;
        justify-content: flex-end;
        p {
          width: 80px;
          text-align: center;
        }
      }
    }
  }
}
</style>
