<template>

     <div class="activeList">

         <div class="list-box" v-for="(item,index) in activeDataList">

             <div class="list-title">

                 <p>{{item.title}}</p>

                 <span>已参加人数 <i class="addpeo">{{item.nowNumber}}</i> / <i>{{item.maxNumber}}</i>人</span>

                 <button :class="item.isSignStart ? 'startBtn' : 'nostartBtn'" v-if="!item.signFinish" @click="goDetail(item.bindid,item.isActiveStart)">我要参加</button>

                 <button class="nostartBtn" v-if="item.isSigned" @click="goDetail(item.bindid,item.isActiveStart)">我已报名</button>

                 <button class="finishBtn" v-if="item.signFinish && !item.isFull">截至报名</button>

                 <button class="finishBtn" v-if="item.isSigned && item.signFinish && !item.isFull">我已报名</button>

                 <button class="finishBtn" v-if="item.isFull">已满额</button>

             </div>

             <div class="list-imgarea" @click="goDetail(item.bindid,item.isActiveStart)">

                 <div class="active-status nostart" v-if="!item.isActiveStart || !item.isSignStart">未开始</div>

                 <div class="active-status signed" v-if="item.isActiveStart || item.isSignStart">已开始</div>

                 <div class="active-status finishBtn" v-if="item.signFinish">已结束</div>

                 <div v-if="!item.signFinish && !item.isSigned" class="active-time">

                     <span v-if="!item.isSignStart">距开始还剩</span>

                     <span v-if="item.isSignStart">距截至还剩</span>

                     <i>{{item.dd}}</i> 天 <i>{{item.hh}}</i> : <i>{{item.mm}}</i> : <i>{{item.ss}}</i>

                 </div>

                 <img :src="item.imgUrl"/>

             </div>

         </div>

     </div>

 </template>

 <script>

 import configUrl from '@/config'

 import { MessageBox } from 'mint-ui'

 export default{

     name:"ActiveList",

     data(){

         return{

             activeDataList:[],

             isInitShowTime:true

         }

     },

     mounted(){

         this.getDataList();

     },

     methods:{

         getDataList(){

             var _this = this;

             var sid = this.$route.query.sid;

             var url = "activelist.json";

             this.$ajax(url).then(function(res){

                 var myNewData = []

                 res.data.data.map(((item,index) =>{

                     myNewData.push(item)

                     _this.$set(item,"ss",_this.getTimeList())

                 }))

                 _this.activeDataList = myNewData;

             })

             .catch(function(err){

                 MessageBox('提示', '网络错误');

             })

         },

         goDetail(bindid,statu){

             this.$router.push({

                 path:'/ActiveDetail',

                 query:{  //路由传参时push和query搭配使用 ，作用时传递参数

                   sid:this.$route.query.sid,

                   bindid:bindid

                 }

             })

         },

         getTimeList(){

             var _this = this;

             setInterval(function(){

                 for (var key in _this.activeDataList) {

                     if(!_this.activeDataList[key]["isSignStart"]){

                         var end = new Date(_this.activeDataList[key]["startTime"].replace(/-/g,'/')).getTime();

                     }

                     else{

                         var end = new Date(_this.activeDataList[key]["endTime"].replace(/-/g,'/')).getTime();

                     }

                     var start = new Date().getTime();

                     var rightTime = end - start;

                     if (rightTime > 0) {

                         var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);

                         var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);

                         var mm = Math.floor((rightTime / 1000 / 60) % 60);

                         var ss = Math.floor((rightTime / 1000) % 60);

                         dd = dd > 9 ? dd : '0' + dd

                         hh = hh > 9 ? hh : '0' + hh

                         mm = mm > 9 ? mm : '0' + mm

                         ss = ss > 9 ? ss : '0' + ss

                         _this.activeDataList[key]["dd"] = dd;

                         _this.activeDataList[key]["hh"] = hh;

                         _this.activeDataList[key]["mm"] = mm;

                         _this.activeDataList[key]["ss"] = ss;

                     }

                     else{

                         _this.activeDataList[key]["dd"] = 0;

                         _this.activeDataList[key]["hh"] = 0;

                         _this.activeDataList[key]["mm"] = 0;

                         _this.activeDataList[key]["ss"] = 0;                                         

                         if(_this.activeDataList[key]["isSignStart"] == false){

                             _this.activeDataList[key]["isSignStart"] = true;

                         }

                         else{

                             _this.activeDataList[key]["signFinish"] = true;

                         }    

                     }

                 }

             },1000);

         }

     }

 }

 </script>