<template>
  <sail-page type="loading-view" title="活动详情">
    <div slot="content" class="community_activities_box">
        <van-nav-bar
          title="活动详情"
          left-arrow
          @click-left="back"
        />
        <svg @click="share" class="icon share__icon" aria-hidden="true">
             <use xlink:href="#icon-fenxiang"/>
        </svg>
        <div class="community_activities_img">
        	<img :src="`${hostURL}${communityActivityDetailInfo.coverImg}`">
        </div>
        <div class="community_activities_content">
        	<p class="community_activities_name">{{communityActivityDetailInfo.title}}</p>
        	<p class="community_activities_intruduce" v-html="communityActivityDetailInfo.activityDetail">
        	</p>
        	<p class="community_activities_list">
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			<span class="parallel">可参与项目：</span>
                    <span class="parallel spec-parallel">
                        {{communityActivityDetailInfo.isAllRegion == 1?'全部项目':communityActivityDetailInfo.regionNames}}
                        <!-- <b v-for="(project,index) in communityActivityDetailInfo.propRequests" :key="index">
                            {{project.propValueName}}
                        </b> -->
                    </span>
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			活动时间 ： {{communityActivityDetailInfo.activityStartTime }} - {{communityActivityDetailInfo.activityEndTime}}
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			活动地点 ： {{communityActivityDetailInfo.address }}
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			参与人数 ： {{communityActivityDetailInfo.limits || '不限' }}
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			活动费用 ： {{communityActivityDetailInfo.cost | currency }}元/人
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			联系人 ： {{communityActivityDetailInfo.activityPrincipal }}
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			联系电话 ： {{communityActivityDetailInfo.principalPhone }}
        		</span>
        		<span class="activities_list_title">
        			<b class="green_point"></b>
        			报名截止 ： {{communityActivityDetailInfo.deadlineTime }}
        		</span>

        	</p>
        </div>
        <router-link class="link" :to="`/activityJoin`">
        	<van-button class="sign_up_button gradient-green">立即报名</van-button>
        </router-link>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import weixin from "@/utils/wx.config.js";
import { mapState } from "vuex"; 
import { Toast } from "vant"; 
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      communityActivityDetailInfo:state => state.allActivityModule.communityActivityDetailInfo
    })
  },
  data: function(){
    return {
      hostURL: URL
    }; 
  },
  asyncData({store, route}) {
    let id = route.params.id;
    return store.dispatch("allActivityModule/getCommunityActivityDetailInfo",{
      id:id,
      platform:1
    }).then(res => {
      weixin.initShareMessage({
        title: res.data.data.title,
        desc: `${res.data.data.title}, 活动地点：${res.data.data.address}，邀请好友参加活动吧!`,
      });
      weixin.initShareTimeline({
        title: res.data.data.title,
        desc: `${res.data.data.title}, 活动地点：${res.data.data.address}，邀请好友参加活动吧!`,
      });
    });
  },
  methods: {
    back() {
      //let id = Locstore("communityActivityDetailInfo").id;
      this.$router.push("/communityActivityHome");
    },
    share() {
      Toast("请点击右上角进行分享");
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-name-black:#313131;
    @nice-intro-black:#585858;
    .community_activities_box {
    	width: 375px;
    	min-height: 100vh;
    	background: @nice-bgwhite;
        .parallel {
          display: inline-block;
          vertical-align: top;
        }
        .spec-parallel {
          display: inline-block;
          width: 230px;
          word-break: break-word;
        }
    	.share__icon {
    		width: 23.64px;
    		height: 26.64px;
    		position: absolute;
    		top: 8px;
    		right: 10px;
    		z-index: 999;
    	}
    	.community_activities_img {
    		width: 374.78px;
    		height: 179.61px;
    		img {
    		  width: 374.78px;
    		  height: 179.61px;
    		}

    	}
    	.community_activities_content {
    		width: 338px;
    		margin: 10px 17.5px;
    		overflow: hidden;
    		.community_activities_name {
    			width: 338px;
    			height: 26px;
    			font-size: 19px;
    			text-align: center;
    			line-height: 36px;
    			color: @nice-name-black;

    		}
    		.community_activities_intruduce {
    			width: 338px;
    			text-align: left;
    			text-indent: 2em;
    			font-size: 13px;
    			line-height: 20px;
    			color:@nice-intro-black;
    			margin-top: 20px;    		
    		}
    		.community_activities_list {
    			width: 318px;
    			margin: 20px 20px 0 20px;
    			.activities_list_title {
    				width: 318px;
    				position: relative;
    				text-align: left;
    				padding-left: 15px;
    				line-height: 25px;
    				color: @nice-intro-black;
    				display: block;   				
    				font-size: 12px;
                    display: flex;

    				.green_point {
    					width: 7px;
    					height: 7px;
    					background: @nice-green;
    					position: absolute;
    					left: 0;
    					top: 8px;
    					border-radius: 50%;
    				}
    			}

    		}
    	}
    	.sign_up_button {
    		width: 347px;
    		height: 38px;
    		margin: 20px 14px 20px 14px;
    		text-align: center;
    		line-height: 38px;
    		font-size: 17px;
    		color: @nice-bgwhite;
    	}
    	
    }
    
</style>