<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>订单编号：{{applyActivityDetailInfo.payNo}} </p>
              <p>报名人数：{{applyActivityDetailInfo.activityParticipants}}人</p>
              <p>金额：{{applyActivityDetailInfo.activityCost | currency}}元</p>
           </div>
        </statusModal>
        <div class="activity-detail-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}${applyActivityDetailInfo.coverImg}`" alt="">
               </div>
               <div class="weui-media-box__bd activity-content-wrapper">
                   <p class="weui-media-box__desc activity-paragraph">活动名称：{{applyActivityDetailInfo.activityName}}</p>
                   <p class="weui-media-box__desc activity-paragraph">开始时间：{{applyActivityDetailInfo.activityStartTime }}</p>
                   <p class="weui-media-box__desc activity-paragraph">活动地点：{{applyActivityDetailInfo.actiivtyAddres }} </p>
                   <p class="weui-media-box__desc activity-paragraph">费用： {{applyActivityDetailInfo.activityCost | currency }} 元/人</p>
               </div>
           </div>
           <div class="activity-box activity-content-wrapper activity-part weui-media-box">
             <p class="weui-media-box__desc activity-paragraph">姓名：{{applyActivityDetailInfo.applicantName}} </p>
             <p class="weui-media-box__desc activity-paragraph">联系方式：{{applyActivityDetailInfo.applicantPhone}}</p>
             <p class="weui-media-box__desc activity-paragraph">报名人数： {{applyActivityDetailInfo.activityParticipants }}人 </p>
             <p class="weui-media-box__desc activity-paragraph">费用：{{applyActivityDetailInfo.applicationFee | currency }}元/人</p>
           </div>
           <div class="activity-box activity-content-wrapper activity-part weui-media-box">
             <p class="weui-media-box__desc activity-paragraph">订单编号：{{applyActivityDetailInfo.payNo}} </p>
             <p class="weui-media-box__desc activity-paragraph">创建时间：{{applyActivityDetailInfo.createTime}}</p>
             <p class="weui-media-box__desc activity-paragraph">支付时间：{{applyActivityDetailInfo.payTime}} </p>
             <p class="weui-media-box__desc activity-paragraph">支付金额：<span style="color:red;">{{applyActivityDetailInfo.activityCost | currency}}</span> 元</p>
           </div>
           <div v-show="applyActivityDetailInfo.status === 1" class="activity-cancel-btn extra-top" @click="cancelActivity">取消报名</div>
           <div v-if="applyActivityDetailInfo.status === 3 || applyActivityDetailInfo.status === 4" class="van-submit-bar">
              <div class="van-submit-bar__bar">
                  <div class="activity-cancel-btn" @click="deleteActivity">删除报名</div>
              </div>
           </div>
           <van-submit-bar v-show="applyActivityDetailInfo.status === 1"
              :price="applyActivityDetailInfo.activityCost * 100"
              :loading="loading"
              label="合计金额:"
              button-text="支付"
              @submit="onSubmit"
            />
        </div>
      </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Dialog } from "vant";
import statusModal from "@/components/statusModal.vue";

import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  computed: {
    ...mapState({
      applyActivityDetailInfo:state => state.allActivityModule.applyActivityDetailInfo,
      newPayForm:state => state.myBillModule.newPayForm
    })
  },
  components: {
    sailPage,
    statusModal
  },
  data: function(){
    return {
      message: "",
      loading: false,
      hostUrl: URL
    }; 
  },
  asyncData({store, route}) {
    let id = route.params.id;
    let name = route.params.name;
    //let status  = route.params.status
    return store.dispatch("allActivityModule/findApplyDetail", id).then(res => {
      if(res.data.data.status === 2 && name === "jump") {
        store.commit("UPDATE_STATUS_VISIBLE", "activity");
      }
    });
  },
  mounted(){
    this.$store.commit("myBillModule/INTE_NEW_PAY_FORM");
  },
  methods: {
    back() {
      this.$router.push("/activityList");
    },
    jumpCallback() {
      this.$store.commit("UPDATE_STATUS_VISIBLE", "activity");
    },
    onSubmit() {
      this.loading = true;
      this.newPayForm.businessId = this.$route.params.id;
      this.newPayForm.orderAmount = this.applyActivityDetailInfo.activityCost;
      this.newPayForm.orderTitle = "活动报名缴费";      
      this.newPayForm.orderType = "1";      
      this.newPayForm.remark = "";
      // 
      // return
      this.$store.dispatch("myBillModule/payBillNewByWx",
        this.newPayForm
      ).then(res=>{
        this.loading = false;
        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: this.$route.params.id,
      //   activityCost: this.applyActivityDetailInfo.activityCost
      // }).then(res => {
      //   this.loading = false;
      //   if(res.data.code === 10000) {
      //     location.href = res.data.data
      //   }else {
      //     res.Toast(res.data.msg)
      //     return
      //   }
          
      //   // 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}&connect_redirect=1#wechat_redirect`
      //   // return;
      // })
      // this.$store.dispatch('allActivityModule/addApplyOther').then(res => {
      //   this.loading = false;
      //   if(res) {
      //     if(this.applyActivityDetailInfo.activityCost > 0) {
              
      //       return;
      //     }
      //   }
          
      // })
    },
    deleteActivity() {
      Dialog.confirm({
        title: "删除报名",
        message: "确定删除报名?"
      }).then(() => {
        // on confirm
        let id = this.$route.params.id;

        this.$store.dispatch("allActivityModule/deleteApply", id).then(res => {
          //
          if(res) {
            this.$router.push({path: "/activityList"});
          }
        });
      }).catch(() => {
        // on cancel
      });
    },
    cancelActivity() {
      Dialog.confirm({
        title: "取消报名",
        message: "确定取消报名?"
      }).then(() => {
        // on confirm
        let id = this.$route.params.id;
        this.$store.dispatch("allActivityModule/cancelApply", id).then(res => {
          //
          this.applyActivityDetailInfo.status = 3;
        });
      }).catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style lang="less">
  @nice-bold: #222222;
  @nice-red: #FF2929;
  @nice-gray: #747474;
  #app {
    .extra-top {
      margin-top: 18.22px;
    }
  }
   .activity-detail-wrapper {
      .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;
    .activity-detail-wrapper {
      margin-top: 13px;
      .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;
      }
      .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>