<template>
  <sail-page type="activityApply" title="活动报名">
    <div slot="content">
      <van-nav-bar
          title="活动报名"
          left-arrow
          @click-left="back"
        />
        <statusModal type="activity" title="活动报名" isButton isHead desc="报名成功" @jumpCallback="jumpCallback" btxt="查看报名">
           <div slot="up-content">
              <p>恭喜您， 申请成功</p>
              <p>请活动当天准时前往活动地点</p>
           </div>
           <div slot="down-content">
              <p>订单编号：{{activityForm.payNo}} </p>
              <p>报名人数：{{activityForm.activityParticipants}}人</p>
              <p>金额：{{activityForm.activityCost | currency}}元</p>
           </div>
        </statusModal>
        <div class="activity-join-wrapper">
           <div class="weui-media-box weui-media-box_appmsg activity-box">
               <div class="weui-media-box__hd activity-logo">
                   <img class="weui-media-box__thumb" :src="`${hostURL}${communityActivityDetailInfo.coverImg}`" alt="">
               </div>
               <div class="weui-media-box__bd activity-content-wrapper">
                   <p class="weui-media-box__desc activity-paragraph">活动名称：{{communityActivityDetailInfo.title}} </p>
                   <p class="weui-media-box__desc activity-paragraph">开始时间： {{communityActivityDetailInfo.activityStartTime}} - {{communityActivityDetailInfo.activityEndTime}}</p>
                   <p class="weui-media-box__desc activity-paragraph">活动地点：{{communityActivityDetailInfo.address }} </p>
                   <p class="weui-media-box__desc activity-paragraph">费用：{{communityActivityDetailInfo.cost | currency }}元/人</p>
               </div>
           </div>
           <div class="weui-cells activity-part">
               <div class="weui-cell">
                   <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                   <div class="weui-cell__bd">
                       <input v-model="activityForm.applicantName" class="weui-input" type="text" placeholder="请输入姓名">
                   </div>
               </div>
               <div class="weui-cell">
                   <div class="weui-cell__hd"><label class="weui-label">联系方式</label></div>
                   <div class="weui-cell__bd">
                       <input v-model="activityForm.applicantPhone" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入联系方式">
                   </div>
               </div>
               <div class="weui-cell">
                   <div class="weui-cell__hd"><label class="weui-label">报名人数</label></div>
                   <div class="weui-cell__bd">
                      <van-stepper v-model="activityForm.activityParticipants" class="activity-stepper"/>
                   </div>
               </div>
           </div>
           <div class="activity-pay">
              <p class="activity-pay_txt">付款方式</p>
              <cube-radio-group v-model="activityForm.payWayValue" :options="payOptions" :hollow-style="true" />
           </div>
           <!-- <div v-show="communityActivityDetailInfo.status === 1" class="activity-box activity-content-wrapper activity-part weui-media-box">
             <p class="weui-media-box__desc activity-paragraph">订单编号：29389173918273 </p>
             <p class="weui-media-box__desc activity-paragraph">创建时间：2018/05/12 12:59:43</p>
           </div>
           <div v-show="communityActivityDetailInfo.status === 1" class="activity-cancel-btn" @click="cancelActivity">取消报名</div> -->
           <van-submit-bar v-show="true"
              :price="sumPrice"
              :loading="loading"
              label="合计金额:"
              button-text="提交"
              @submit="onSubmit"
            />
        </div>
      </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import statusModal from "@/components/statusModal.vue";
import Locstore from "@/utils/store";

import { mapState } from "vuex"; 
import { Dialog } from "vant";
import { Toast } from "vant";
  
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    statusModal
  },
  computed: {
    ...mapState({
      communityActivityDetailInfo:state => state.allActivityModule.communityActivityDetailInfo,
      activityForm: state => state.allActivityModule.activityForm,
      newPayForm:state => state.myBillModule.newPayForm
    }),
    sumPrice() {
      return this.communityActivityDetailInfo.cost * this.activityForm.activityParticipants * 100;
    }
  },
  mounted(){
    this.$store.commit("myBillModule/INTE_NEW_PAY_FORM");
  },
  asyncData({store, route}) {     
    let id = Locstore("communityActivityDetailInfo").id;
    return store.dispatch("allActivityModule/getCommunityActivityDetailInfo",{
      id:id,
      platform:1
    }).then(res =>{
      store.commit("allActivityModule/CLEAN_NAME"); 
      store.commit("allActivityModule/CLEAN_PHONE");
      store.commit("allActivityModule/CLEAN_APPLY_NUM");        
      
    });
  },
  data: function(){
    return {
      message: "",
      value: 1,
      hostURL: URL,
      loading: false,
      applyId:0,
      payMethod: "wePay",
      payOptions: [
        {
          label: "微信",
          value: "wePay"
        }
      ]
    }; 
  },
  methods: {
    back() {
      let id = Locstore("communityActivityDetailInfo").id;
      this.$router.push(`/communityActivityDetail/${id}`);
    },
    jumpCallback() {
      //
      this.$router.push({path: `/activityDetail/${this.applyId}/normal`});
    },
    onSubmit() {
      const reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;     
      if(!reg.test(this.activityForm.applicantPhone)){
        Toast.fail({
          duration: 1000,
          message: "联系方式格式错误，请重新填写！"
        });
        return false;
      }
      if(!this.activityForm.applicantName) {
        Toast.fail({
          duration: 1000,
          message: "请填写姓名！"
        });
        return false; 
      }
         
      this.loading = true;       
      // return
      this.$store.dispatch("allActivityModule/addApply", this.sumPrice).then(res => {
        this.loading = false;
        if(res) {
          //
          this.applyId = res.data.data.id;
          this.activityForm.payNo = res.data.data.payNo;
          this.newPayForm.businessId = res.data.data.id;
          this.newPayForm.orderAmount = this.communityActivityDetailInfo.cost * this.activityForm.activityParticipants;
          this.newPayForm.orderTitle = "活动报名缴费";      
          this.newPayForm.orderType = "1";      
          this.newPayForm.remark = "";
          //
          if(this.sumPrice > 0) {
            Toast.loading({
              duration: 0,       // continuous display toast
              forbidClick: true, // forbid click background
              loadingType: "spinner",
              message: "正在跳转支付"
            });
            this.$store.dispatch("myBillModule/payBillNewByWx",
              this.newPayForm
            ).then(res=>{
              this.loading = false;
              setTimeout( ()=> {
                Toast.clear();
              }, 1000);
              if(res.data.code === 10000){
                location.href = res.data.data.ccbPay;
              }else{
                Toast.fail(res.data.msg);
                return;
              }
            });
            // this.$store.dispatch('allActivityModule/payAppyCostOnCAPP', {
            //   payWay: 0, // 0是微信 1支付宝
            //   appyId: res.data.data.id,
            //   activityCost: this.sumPrice/100
            // }).then(res => {
            //   setTimeout( ()=> {
            //     Toast.clear();
            //   }, 1000)
            //   if(res.data.code === 10000) {
            //     location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc03a72497d53424&redirect_uri=http%3a%2f%2fc.sailapartment.com%2fwx%2fwxuser.html&response_type=code&scope=snsapi_base&state=${res.data.data.wxPay}&connect_redirect=1#wechat_redirect`
            //   }
            // })
            return;
          }
          this.$store.commit("UPDATE_STATUS_VISIBLE", "activity");
        }
          
      });
    },
    cancelActivity() {
      Dialog.confirm({
        title: "取消报名",
        message: "确定取消报名?"
      }).then(() => {
        // on confirm
        this.$store.dispatch("allActivityModule/cancelApply").then(res => {
             
        });
      }).catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style lang="less">
  @nice-bold: #222222;
  @nice-red: #FF2929;
  @nice-gray: #747474;
   .activity-join-wrapper {
      padding-bottom: 30vh;
      .cube-radio-wrap {
        padding: 11px 11px;
      }
      .cube-radio {
        padding: 0;
      }
      .cube-radio-ui {
        margin-right: 1.02em;
      }
      .cube-radio-label {
        color: @nice-bold;
      }
      .van-button--danger {
          background: linear-gradient(to right, #5FCEA1, #2BAA76);
          border: 0;
      }
      .van-submit-bar__price span {
        font-weight: bold;
      }
      .van-submit-bar__price {
        color: @nice-gray;
        text-align: left;
        font-size: 15px;
        margin-left: 18%;
      }
      .van-submit-bar .van-button {
        width: 140px;
      }
      .van-submit-bar__price-integer, .van-submit-bar__price-decimal {
        color: @nice-red;
        font-weight: bold;
      }
      .van-submit-bar__price-integer {
        padding-left: 15px;
      }
   }
</style>
<style lang="less" scoped>
    @nice-desc-gray: #ADADAD;
    @nice-txt-gray: #747474;
    @nice-bold: #222222;
    .activity-join-wrapper {
      margin-top: 13px;
      .activity-pay {
        padding-bottom: 30.63px;
      }
      .activity-pay_txt {
        color: @nice-bold;
        margin-top: 14.5px;
        margin-bottom: 11.5px;
        margin-left: 18px;
        text-align: left;
      }
      .activity-stepper {
        text-align: right;
        margin-right: 35px;
      }
      .activity-cancel-btn {
        width: 104px;
        height: 29px;
        border-radius: 18px;
        border: 1px solid @nice-desc-gray;
        color: @nice-desc-gray;
        line-height: 29px;
        text-align: center;
        margin: 0 auto;
        margin-top: 18.22px;
      }
      .activity-content-wrapper {
        text-align: left;
        .activity-paragraph {
          font-size: 13px;
          line-height: 20px;
          color: @nice-txt-gray;
          font-weight: 500;
        }
      }
      .activity-logo {
        width: 93px;
        height: 85px;
        background: @nice-desc-gray;
      }
      .activity-box {
        background: white;

      }
      .activity-part {
        margin-top: 13px;
      }
    }
</style>