<template>
  <div id="detailBox">
    <div class="detailCon">
      <img class="detailConImg" v-if="thumb" :src="thumb">
      <div class="detailConTitle"><span>{{title}}</span><img src="../assets/icon_share.png"></div>
      <div class="detailContDes">
        <div>
          <img src="../assets/icon_enrollment.png">
          <span>活动时间：{{beginTime}} ~ {{endTime}}</span>
        </div>
        <div v-if="status==1">活动进行中</div>
        <div v-else-if="status==2">活动已结束</div>
        <div v-else-if="status==3">报名截止还剩：<span v-if="diffDays<=1">不足</span>{{diffDays}}天</div>
      </div>
      <div class="detailContDes">
        <div>
          <img src="../assets/icon_activitytime.png">
          <span>报名人数：{{participants}}/{{peoples}}</span>
        </div>
      </div>
    </div>
    <div id="introduce">
      <img :src="detailImgUrl">
    </div>
    <div id="applyButtonBox">
      <span @click="toApply">立即报名</span>
    </div>
    <div class="tipDialog" v-show="tipDialogShow">
      <div class="tipDialogCon">
        <p>{{tipDialogText1}}</p>
        <p>{{tipDialogText2}}</p>
        <span @click="tipDialogShow=false">{{tipDialogBtn}}</span>
      </div>
    </div>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>
<script>
import request from '../utils/request'
import loading from '../components/loading/loading.vue'
export default {
  data() {
    return{
      loadingShow: false,//加载
      title: '',
      thumb: '',
      beginTime: '',
      endTime: '',
      status: '',
      diffDays: '',
      participants: '',
      peoples: '',
      detailImgUrl: '',
      qualifications: '',

      tipDialogShow: false,//弹窗
      tipDialogBtn: '',
      tipDialogText1: '',
      tipDialogText2: '',
    }
  },
  components: {
    loading
  },
  mounted() {
    this.loadingShow = true
    request({
      url: '/api/MarketingToolApi/Activities/detail',
      method: 'post',
      data: {
        activityId: this.$route.params.id
      }
    }).then(response => {
      this.loadingShow = false
      this.title = response.data.title
      this.thumb = response.data.thumb
      this.beginTime = response.data.beginTime
      this.endTime = response.data.endTime
      this.status = response.data.status
      this.diffDays = response.data.diffDays
      this.participants = response.data.participants
      this.peoples = response.data.peoples
      this.detailImgUrl = response.data.detailImgUrl
      this.qualifications = response.data.qualifications
    })
  },
  methods: {
    toApply(){
      if(this.status == 4){//4：活动报名人数已满
        this.tipDialogText1='太火爆了'
        this.tipDialogText2='报名活动的人数已满'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else if(this.status == 1){//1：活动已经开始；
        this.tipDialogText1='来晚了'
        this.tipDialogText2='报名已结束'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else if(this.status == 2){//2：活动已结束；
        this.tipDialogText1='抱歉'
        this.tipDialogText2='本次活动已结束'
        this.tipDialogBtn='关闭'
        this.tipDialogShow = true
      }else{
        if(this.qualifications==1){//允许报名
          this.$router.push({name: 'applyInfo',params:{id: this.$route.params.id}})
        }else{
          // this.tipDialogText1='完成'+this.title+'后'
          // this.tipDialogText2='才能报名本活动'
          // this.tipDialogBtn='知道了'
          // this.tipDialogShow = true

          this.tipDialogText1=this.title+'进行中'
          this.tipDialogText2='不允许报名'
          this.tipDialogBtn='知道了'
          this.tipDialogShow = true
        }
      }
    }
  }
}
</script>
<style lang="scss">
#detailBox{
  height: 100%;
  padding-bottom: 70px;
}
.detailCon{
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}
.detailConImg{
  display: block;
  width: 100%;
  height: 200px;
}
.detailConTitle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 19px;
  color: #282B2F;
  padding: 10px 0 5px;
  img{
    width: 21px;
    height: 21px;
  }
}
.detailContDes{
  font-size: 12px;
  color: #70767A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  div{
    display: flex;
    align-items: center;
    >img{
      width: 14px;
      height: 14px;
      margin-right: 5px;
    }
  }
}
#introduce{
  background-color: #fff;
  padding: 10px 10px 75px;
  img{
    width: 100%;
  }
}
#applyButtonBox{
  background-color: #fff;
  padding: 11px 0;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  span{
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #F7B500;
    height: 38px;
    width: 250px;
    line-height: 38px;
    border-radius: 19px;
  }
}
</style>