<template>
  <sail-page type="activityList" title="我的活动">
    <div slot="content">
        <van-nav-bar
          title="我的活动"
          left-arrow
          @click-left="back"
        />
        <emptyPageCard :isEmptyType="activityList.length===0?'activity':'normal'"/>
        <div class="activity-list-wrapper">
            <StatusCard :targetUrl="`/activityDetail/${item.id}/normal`" iconType="activity" :code="item.payNo" :statusDesc="statusMap[item.status]" v-for="(item, index) in activityList" :key="index">
              <div slot="content">
                 <p>活动名称：{{item.activityName}}</p>
                 <p>开始时间：{{item.activityStartTime}}</p>
                 <p>活动地点：{{item.actiivtyAddres}}</p>
                 <p>报名人数：{{item.activityParticipants}}人</p>
              </div>
              <span slot="footer">
                费用：<span class="status-fee">{{item.activityCost | currency}} 元</span>
                  <div v-if="statusMap[item.status] === '订单关闭'" class="activity-cancel-btn" @click="deleteActivity($event, item, index)">删除报名</div>
              </span>
            </StatusCard>
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import StatusCard from "@/common/widget/statusCard";
import { mapState } from "vuex";
import { Dialog } from "vant";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
export default {
  components: {
    sailPage,
    StatusCard,
    emptyPageCard
  },
  computed: {
    ...mapState({
      activityList: state => state.allActivityModule.activityList
    })
  },
  asyncData({store, route}) {
    return store.dispatch("allActivityModule/activityApplyList").then(res => {
         
    });
  },
  data: function(){
    return {
      statusMap: {
        1: "待付款",
        2: "已支付",
        3: "订单关闭",
        4: "已结束"
      }
    }; 
  },
  methods: {
    back() {
      this.$router.push("/MyPage");
    },
    deleteActivity(event, item, index) {
      event.preventDefault();
      //return;
      Dialog.confirm({
        title: "删除报名",
        message: "确定删除该报名?"
      }).then(() => {
        // on confirm
        let id = item.id;

        this.$store.dispatch("allActivityModule/deleteApply", id).then(res => {
          //
          if(res) {
            this.activityList.splice(index, 1);
            //this.$router.push({path: '/activityList'})
          }
        });
      }).catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @nice-gray: #585858;
    @nice-desc-gray: #ADADAD;
    @nice-txt-gray: #747474;
    .activity-list-wrapper {
      margin-top: 12px;
    }
    .activity-cancel-btn {
      width: 104px;
      display: inline-block;
      height: 25px;
      border-radius: 18px;
      border: 1px solid @nice-desc-gray;
      color: @nice-desc-gray;
      line-height: 25px;
      text-align: center;
      margin: 0 auto;
      position: absolute;
      right: 10px;
      bottom: 5px;
    }
</style>1