<template>
  <div class="pageContent" v-if="showPage">
    <div class="mainPage">
      <div class="top">
        <img :src="topImg">
        <div class="top-div">
          <b>悦见山全家福拍摄助力砍价活动</b>
          <p>报名截止时间：2018年12月18日</p>
          <p>拍摄时间：2018年12月13日——2018年12月29日</p>
          <p>地点：国家级江北新区•白马路10号银城颐居·悦见山营销中心</p>
          <p>活动电话：025-86505555</p>
        </div>
      </div>
      <div class="main">
        <h2>活动详情</h2>
        <div>悦见山全家福拍摄助力砍价活动</div>
        <p>原价：1888元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;悦见山年终回馈价：888元</p>
        <p>点击下方的“立即报名”参加报名，分享给30位好友，让好友助力帮忙您完成任务，2018年12月13日—2018年12月18日每天前10名完成任务的客户即可参加项目的全家福拍摄及台历定制；</p>
        <div>套餐包含：</div>
        <div>服务团队：2名主力摄影师，1名主力化妆师，1名主力引导师，1名主力设计师</div>
        <div>服装提供：提供亲子全家福服装一套</div>
        <div>拍摄精修：赠送6张精修底片并刻盘</div>
        <div>台历赠送：赠送2019年新年定制专属台历一本（含6张全家福照片）</div>
      </div>
    </div>
    <div class="bottom">
      <div
        :class="{'on':btn.status === 1 || btn.status === 3,'off':btn.status === 0 || btn.status === 2}"
        @click="submit()"
      >{{btn.text}}</div>
    </div>
    <div class="login" v-show="login" @click="login=false">
      <div class="box" @click.stop="1+1">
        <div class="item">
          <label for="name">姓名</label>
          <input type="text" v-model="name" @blur='blur'>
        </div>
        <div class="item">
          <label for="phone">手机号</label>
          <input type="tel" v-model="phone" @blur='blur'>
        </div>
        <div class="item">
          <label for="address">所在社区</label>
          <input type="text" v-model="address" @blur='blur'>
        </div>
        <div class="submit" @click="sign()">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import topImg from '@/assets/topImg.png'
import area from '@/util/area.js'
import { createNamespacedHelpers } from 'vuex'
import wxsdk from '@/util/share'
const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('main')
export default {
  data () {
    return {
      topImg,
      area,
      btn: {
        text: '立即报名',
        status: 1
      },
      login: false,
      showArea: false,
      name: '',
      phone: '',
      address: '',
      adderssDetail: '',
      showPage: false
    }
  },
  methods () {
    this.getGame().then(() => {
      if (this.game.game.Status == 2) {
        this.btn.text = '活动已结束'
        this.btn.status = 2
        this.showPage = true
        return
      }
      if (this.game.record.CustomerId) {
        this.btn.text = '我的助力'
        this.btn.status = 3
      } else {
        let start = new Date(this.game.game.BeginDate).valueOf()
        let end = new Date(this.game.game.EndDate).valueOf()
        let now = new Date().valueOf()
        if (now < start) {
          this.btn.text = '活动未开始'
          this.btn.status = 0
        } else if (start <= now && now <= end) {
          this.btn.text = '立即报名'
          this.btn.status = 1
        } else if (now > end) {
          this.btn.text = '活动已结束'
          this.btn.status = 2
        }
      }
      this.showPage = true
      this.share()
    })
  },
  computed: {
    ...mapIndexState({
      userInfo: item => item.userInfo,
      game: item => item.game,
    })
  },
  methods: {
    ...mapIndexActions(['getGame', 'signUp', 'setRecord']),
    submit () {
      if (this.game.game.Status == 2) {
        this.$toast('活动已结束')
        return
      }
      if (this.userInfo.Phone) {
        this.record()
      } else {
        this.login = true
      }
    },
    sign () {
      if (!this.name) {
        this.$toast('姓名为必填项')
        return
      } else if (!this.phone) {
        this.$toast('手机号为必填项')
        return
      } else if (!this.address) {
        this.$toast('地址为必填项')
        return
      }
      this.login = false
      let data = {
        name: this.name,
        phone: this.phone,
        address: this.address + this.adderssDetail
      }
      this.signUp(data).then(() => {
        this.record()
      })
    },
    share () {
      let link = `${window.location.origin}${window.location.pathname}#/`
      wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
        title: '定格陪伴，悦见山全家福定制台历拍摄火热报名中',
        desc: '我正在参加悦见山助力活动，快来帮我助力吧~',
        link: link,
        thu_image: `http://spaceofcheng.oss-cn-beijing.aliyuncs.com/IMG_58371544441587.JPG?x-oss-process=style/wxicon`
      })
    },
    record () {
      if (this.btn.status === 1) {
        this.setRecord().then(() => {
          this.$router.push({ name: 'supportDetail', params: { other: 'own', recordid: '0' } })
        })
      } else if (this.btn.status === 3) {
        this.$router.push({ name: 'supportDetail', params: { other: 'own', recordid: '0' } })
      }
    },
    blur () {
      var currentPosition, timer;
      var speed = 1;//页面滚动距离
      timer = setInterval(function () {
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
        currentPosition -= speed;
        window.scrollTo(0, currentPosition);//页面向上滚动
        currentPosition += speed; //speed变量
        window.scrollTo(0, currentPosition);//页面向下滚动
        clearInterval(timer);
      }, 1);
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  img {
    width: 100%;
    height: 2.5rem;
  }
  .top-div {
    padding: 0.12rem 0.25rem;
    border-bottom: 0.1rem solid rgba(235, 241, 242, 1);
    b {
      font-size: 0.16rem;
    }
    p {
      font-size: 0.13rem;
      padding-top: 0.04rem;
    }
  }
}
.main {
  padding: 0.2rem 0.25rem 0.6rem;
  h2 {
    font-size: 0.16rem;
    padding-bottom: 0.1rem;
  }
  p {
    padding-bottom: 0.1rem;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.6rem;
  padding: 0.1rem 0.25rem;
  background: #fff;
  div {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 0.4rem;
    border-radius: 0.2rem;
    color: #fff;
  }
  .on {
    background: rgba(252, 98, 67, 1);
  }
  .off {
    background: #ccc;
  }
}
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  .box {
    width: 3.25rem;
    padding: 0.3rem 0.22rem;
    background: #fff;
    border-radius: 0.08rem;
    .item {
      padding-bottom: 0.1rem;
      display: flex;
      height: 0.4rem;
      align-items: center;
      label {
        width: 0.6rem;
        color: rgba(168, 182, 200, 1);
      }
      input,
      div {
        height: 100%;
        flex: 1;
        border-radius: 4px;
        border: 1px solid rgba(168, 182, 200, 0.2);
        line-height: 0.28rem;
        padding-left: 0.05rem;
      }
    }
    textarea {
      width: 100%;
      border-radius: 4px;
      border: 1px solid rgba(168, 182, 200, 0.2);
      margin-bottom: 0.1rem;
      padding: 0.05rem;
      &::-webkit-input-placeholder {
        color: rgba(168, 182, 200, 0.2);
      }
    }
    .submit {
      height: 0.48rem;
      text-align: center;
      line-height: 0.48rem;
      border-radius: 0.24rem;
      border: 1px solid rgba(255, 66, 28, 1);
      color: rgba(255, 66, 28, 1);
      font-size: 0.14rem;
      margin-top: 0.1rem;
    }
  }
}
</style>
