<template>
  <div class="mainPage">
    <div class="top">
      <img :src="topImg" alt>
    </div>
    <div class="middle">
      <p>云台天境 定制您的2019专属台历</p>
      <span>时间: 2018年12月11日-2018年12月18日</span>
      <span>地点: 江宁区云台山河路1号云台天境售楼处</span>
    </div>
    <div class="bottom">
      <p class="title">活动详情</p>
      <div>用户在线上传照片（最少3张）生成2019年台历，可通过填写邮箱，获得电子版台历（1个工作日内）。</div>
      <div>前200名上传成功用户，可在关注【城的空间】公众号接到推送或接到短信通知后来云台天境售楼处领取精美实物台历一份。</div>
      <div>活动电话：025-86426666</div>
      <div>服务案场：银城旭辉云台天境</div>
      <div>地址：江宁区云台山河路1号云台天境售楼处</div>
      <div>*活动最终解释权归南京佳运城房地产开发有限公司所有</div>
    </div>
    <div class="btn">
      <div v-if="state === 1" class="disable">活动未开始</div>
      <div v-if="state === 2" @click="toCheckModel">立即参与</div>
      <div v-if="state === 3" class="disable">已参与</div>
      <div v-if="state === 4" class="disable">活动已结束</div>
    </div>
  </div>
</template>

<script>
import wxsdk from '../../../util/share'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapMakingActions } = createNamespacedHelpers('making')
const { mapActions: actions } = createNamespacedHelpers('userCenter')
import topImg from '@/common/icon/topImgBlack.png'
export default {
  data () {
    return {
      topImg,
      state: 1,
      startTime: "2018/12/11 00:00:00",
      endTime: "2018/12/18 23:59:59"
    }
  },
  created () {
    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
      title: '幸福升舱 云帆起航',
      desc: '有一份2019年的台历待您查收！',
      link: `${window.location.origin}${window.location.pathname}#/calendar`,
      thu_image: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/DE4F9402-9449-48fc-8C0D-61C198E82E481543982444.png'
    })
    this.getUserInfo({ org: this.org }).then(() => {
      this.getCalendarCustomer().then((res) => {
        if (res) {
          this.state = 3
        } else {
          let start = new Date(this.startTime).getTime()
          let end = new Date(this.endTime).getTime()
          let now = new Date().getTime()
          if (start <= now && end >= now) {
            this.state = 2
          } else if (start > now) {
            this.state = 1
          } else {
            this.state = 4
          }
        }
      })
    })
  },
  computed: {
    ...mapState({
      org: x => x.app.orgId,
      userInfo: x => x.userCenter.userInfo
    })
  },
  methods: {
    ...actions(['getUserInfo']),
    ...mapMakingActions(['getCalendarCustomer']),
    toCheckModel () {
      if (!this.userInfo.customer.Phone) {
        this.$dialog.confirm({
          title: '提示',
          message: '您还不是注册会员，注册成功后即可参与此活动'
        }).then(() => {
          // on confirm
          this.$router.push({ name: 'bindMobile' })
        }).catch(() => {
          // on cancel
        });
      } else {
        this.$router.push({ name: 'checkModel' })
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
.top {
  width: 100%;
  img {
    width: 100%;
  }
}
.middle {
  padding: 0.14rem 0.25rem;
  border-bottom: 0.1rem solid rgba(235, 241, 242, 1);
  p {
    font-size: 0.16rem;
    padding-bottom: 0.05rem;
    font-weight: bold;
  }
  span {
    padding-bottom: 0.05rem;
    display: block;
  }
}
.bottom {
  padding: 0.14rem 0.25rem 0.6rem;
  p {
    font-size: 0.16rem;
    padding-bottom: 0.05rem;
    font-weight: bold;
  }
  div {
    padding-bottom: 0.08rem;
  }
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.1rem 0.25rem;
  box-sizing: border-box;
  background: #fff;
  div {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: rgba(252, 98, 67, 1);
    color: #fff;
    text-align: center;
    line-height: 0.4rem;
  }
  .disable {
    background: #ccc;
  }
}
</style>
 