<template>
  <sail-page type="loading-view" title="活动详情">
    <div slot="content" class="activity_detail-box">
      <van-nav-bar
            title="活动详情"
            left-arrow
            @click-left="back"
          />
    	<div class="activity_title">
    		{{selectionActivityDetail.title}}
    	</div>
    	<div class="activity_time">{{selectionActivityDetail.publishTime}}</div>
    	<div class="coupons_box" v-for="(coupon, index) in selectionActivityDetail.contentProps" :key="index">
        <router-link class="link" :to="coupon.couponDetail.couponNum-coupon.couponDetail.receive == 0?'':`/getCoupon/${coupon.propValueInt}`">
            <CouponListCard :data="coupon" class="coupon_card"/>
        </router-link>
    		 
    	</div>
    	<div class="descripetion">
    		 <div v-html="selectionActivityDetail.contentDetail"></div>
    	</div>
         
          
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import weixin from "@/utils/wx.config.js";
//import ActivityStatus from '@/common/widget/activityStatus.vue'
import CouponListCard from "@/common/widget/couponListCard.vue";
import { mapState } from "vuex";
export default {
  components: {
    sailPage,
    //ActivityStatus,
    CouponListCard
  },
  computed: {
    ...mapState({
      selectionActivityDetail:state => state.serviceModule.selectionActivityDetail      
    }),
      
  },
  data: function(){
    return {

    }; 
  },
  asyncData({store,route}) {
    let id = route.params.id;

    return store.dispatch("serviceModule/getSelectionActivityDetail",{
      id
    }).then(res => {
      if(!res) {
        return;
      }
      let info = res.data.data;
      weixin.initShareMessage({
        title: info.title,
        desc: `${info.title}, 发布时间：${info.publishTime}`,
      });
      weixin.initShareTimeline({
        title: info.title,
        desc: `${info.title}, 发布时间：${info.publishTime}`,
      });
      return;
      let couponList = res.data.data.contentProps;
      // 
      if(couponList) {
        couponList.map(item => {
          return store.dispatch("serviceModule/getCouponDetailInfo",{
            id:item.propValueInt
          }).then(res => {
               
          });
        });
      }
    });
  },
  methods: {
      back() {
        this.$router.push("/serviceHome");
      }
  }
};
</script>
<style lang="less">
     .descripetion {
        img {
          width: 75vw;
          margin:10px 0; 
        }
     }
</style>
<style lang="less" scoped>
     @import "~@/common/less/variable.less";
     @nice-time-gray:#B9B9B9;
     @nice-descripetion-gray:#666666;
     .activity_detail-box {
     	width: 375px;
     	min-height: 100vh;
     	background: @nice-bgwhite;
        .activity_title {
        	width: 332px;
        	font-size: 20px;
        	color: @nice-nameColor;
        	line-height: 30px;
        	padding-top: 19.5px;
        	margin: 0 auto;
        	text-align: left;
        }
        .activity_time {
        	width: 332px;
        	height: 15px;
        	font-size: 13px;
        	color:  @nice-time-gray;
        	text-align: left;	
        	line-height: 15px;
        	margin: 7.5px auto;
        }
        .coupons_box {
        	width: 337px;
        	height: 140px;
        	margin: 5px auto;
        	background: url(~@/assets/img/bannerImg/activity_bg1@3x.jpg) no-repeat center;
        	background-size: cover;
          display: flex;
          justify-content: center;
          align-items: center;
          
        }
        .descripetion {
        	width: 340px;
        	margin: 15px auto;
        	text-align: left;
        	text-indent: 2em;
        	font-size: 14px;
        	color: @nice-descripetion-gray; 
        	line-height: 20px;
        }
     }
</style>