<template>
  <div class="detail">
    <div class="detail-body">
      <div class="img-text">
        <img :src="firstImg" alt="" />
        <p class="text">{{ activityDetail.activityName }}</p>
      </div>

      <div class="collect-part">
        <div
          class="normal-tip by y-bg"
          v-if="activityDetail.registrationStatus === '1'"
        >
          报名中
        </div>
        <div class="normal-tip by h-bg" v-else>报名已结束</div>
        <div class="right">
          <span class="num">{{ activityDetail.partakeNumber }}人参与</span>
          <div class="icon-collect" @click="changeCollectorsStatus()">
            <i
              :class="[
                'iconfont icon-wujiaoxingxingxingshoucangdianji',
                active && 'blue',
              ]"
            ></i>
          </div>
        </div>
      </div>

      <div class="tel-part">
        <div class="tel-name">联系电话</div>
        <TelNum :num="activityDetail.contactPhone" />
      </div>

      <div class="info-part">
        <div class="info-item">
          <div class="custom-item-tit">
            <span class="tit">活动举办</span>
          </div>
          <div class="text">{{ activityDetail.activityHold }}</div>
        </div>
        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动详情</span></div>
          <div class="text" v-html="activityDetail.activityContent"></div>
        </div>

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动时间</span></div>
          <div class="text">
            {{ activityDetail.activityStartTime }} —
            {{ activityDetail.activityEndTime }}
          </div>
        </div>

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动地址</span></div>
          <div class="text">
            <span class="add">{{ activityDetail.activityAddress }}</span>
            <!--            <span class="dh" @click="goAddress(activityDetail.activityAddress)">导航</span>-->
          </div>
        </div>

        <!--        <div class="info-item">-->
        <!--          <div class="custom-item-tit"><span class="tit">报名条件</span></div>-->
        <!--          <div class="text">{{ activityDetail.registrationConditions }}</div>-->
        <!--        </div>-->

        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">报名时间</span></div>
          <div class="text">
            {{ activityDetail.registrationStartTime }} —
            {{ activityDetail.registrationEndTime }}
          </div>
        </div>
        <div class="info-item">
          <div class="custom-item-tit"><span class="tit">活动参与</span></div>
          <div class="text">还有 {{ number }} 个名额</div>
        </div>
        <div class="info-item uploadBox">
          <div class="custom-item-tit"><span class="tit">附件查看</span></div>
          <van-uploader
            v-model="fileList2"
            accept=""
            style="min-height: 5vw"
            @click-preview="clickPre"
            :show-upload="false"
            :deletable="false"
          >
          </van-uploader>
        </div>
      </div>
    </div>
    <div
      class="but-bottom"
      @click="getApply"
      v-if="activityDetail.registrationStatus === '1' && number"
    >
      我要报名
    </div>

    <!-- 申请弹框 -->
    <ApplyPopup
      ref="apply"
      :reference-id="activityDetail.id"
      :reference-type="'1'"
    />
  </div>
</template>

<script>
import TelNum from "@/components/tel-number";
import ApplyPopup from "@/components/apply-popup";
import { getActivityById, clickCollect } from "../../service/api_activity.js";
import auth from "../../service/auth";
import wxMap from "@/pages/weixin/wxMap";
import { Toast } from "vant";
export default {
  components: {
    TelNum,
    ApplyPopup,
  },
  mixins: [wxMap],
  data() {
    return {
      active: false,
      id: "",
      activityDetail: "",
      number: 0,
      fileList2: [],
      firstImg: "",
    };
  },

  mounted() {
    this.id = this.$route.query.id;
    this.getActivityById();
  },
  methods: {
    // 文件下载
    clickPre(file) {
      window.location.href = file.url;
    },
    getActivityById() {
      const _this = this;
      getActivityById(this.id, auth.currUser().id).then((res) => {
        if (res.data) {
          if (res.data.activityFile) {
            const files = JSON.parse(res.data.activityFile);
            if (files && files.length) {
              files.forEach((item) => {
                this.fileList2.push({
                  url: item.url,
                  file: new File([], item.name, {}),
                  id: item.id,
                });
              });
            }
          }
          _this.activityDetail = res.data;
          console.log("registrationStatus", res.data.registrationStatus);
          if (
            _this.activityDetail.annexArray &&
            _this.activityDetail.annexArray.length
          ) {
            _this.firstImg = _this.activityDetail.annexArray[0];
          }
          _this.activityDetail.registrationStartTime =
            this.$common.transBaseDateTime(
              _this.activityDetail.registrationStartTime
            );
          _this.activityDetail.registrationEndTime =
            this.$common.transBaseToDateTime(
              _this.activityDetail.registrationEndTime
            );
          _this.activityDetail.activityStartTime =
            this.$common.transBaseDateTime(
              _this.activityDetail.activityStartTime
            );
          _this.activityDetail.activityEndTime =
            this.$common.transBaseToDateTime(
              _this.activityDetail.activityEndTime
            );
          if (_this.activityDetail.collectorsStatus === "2") {
            _this.active = true;
          } else {
            _this.active = false;
          }
          _this.number =
            _this.activityDetail.limitPersonNumber -
            _this.activityDetail.partakeNumber;
        }
      });
    },
    getApply() {
      this.$refs.apply.init();
    },
    goAddress(address) {
      if (address === null || undefined === address || address === "") {
        Toast("地址不能为空");
        return false;
      } else {
        this.navigation(address);
      }
    },
    changeCollectorsStatus() {
      if (this.active) {
        const _this = this;
        clickCollect({
          id: this.id,
          userId: auth.currUser().id,
          collectorsStatus: "1",
        }).then((res) => {
          _this.getActivityById();
        });
      } else {
        const _this = this;
        clickCollect({
          id: this.id,
          userId: auth.currUser().id,
          collectorsStatus: "2",
        }).then((res) => {
          _this.getActivityById();
        });
      }
    },
  },
};
</script>

<style lang="scss" type="text/scss">
.detail {
  box-sizing: border-box;
  background-color: $bg2;
  padding: 0 0 140px;
  overflow-y: auto;
  .detail-body {
    .img-text {
      img {
        height: 420px;
      }
    }
    .collect-part {
      background-color: #fff;
      height: 120px;
      padding: 0 30px;
      margin-bottom: 10px;
      @include flex;
      .normal-tip {
      }
      .right {
        @include flex;
        .num {
          margin-right: 20px;
          font-size: 24px;
          color: $text3;
        }
      }
    }
    .tel-part {
      @include flex;
      background-color: #fff;
      margin-bottom: 10px;
      height: 120px;
      padding: 0 30px;
      .tel-name {
        color: #333;
        font-size: 32px;
        font-weight: 700;
      }
      .custom-tel-component {
        width: 400px;
        .left {
          font-size: 26px;
        }
      }
    }

    .info-part {
      background-color: #fff;
      overflow-y: auto;
      height: calc(100vh - 700px);
      box-sizing: border-box;
      padding: 40px 30px;
      .info-item {
        .custom-item-tit {
          font-size: 32px;
          font-weight: 700;
        }
        .text {
          margin: 10px 20px;
          font-size: 24px;
          color: $text5;
          img {
            width: 86vw !important;
          }
          .add {
            margin-right: 40px;
          }
          .dh {
            width: 100px;
            text-align: center;
            display: inline-block;
            color: $main;
            border-left: 1px solid $color4;
          }
        }
        &:last-child {
          margin-bottom: 0px;
        }
      }
    }
  }
  .van-uploader__input {
    padding: 0 !important;
  }
  .van-uploader__file {
    background: rgba(0, 0, 0, 0) !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
  }
  .van-uploader__preview {
    margin: 1vw 8px 8px 0 !important;
  }
  .van-uploader__input-wrapper {
    position: absolute !important;
  }
  .van-uploader__wrapper {
    flex-direction: column !important;
  }
  .van-uploader__file-name {
    text-align: left !important;
  }
}
</style>
