<ion-view view-title="梦想"> 
    <ion-nav-buttons side="right">
        <button class="button button-clear icon ion-email-unread"></button>
        <!-- <button class="button button-clear icon ion-ios-compose-outline" style="padding-left:10px"></button> -->
    </ion-nav-buttons>
    <ion-content style="background-color:#F3F3F3" ng-click="cancelSupport()">
     
        <div class="tabs-striped tabs-top">
            <div class="tabs" style="top:0">
                <a ng-class="type==1?'tab-item active':'tab-item'" ng-click="changeType(1)">
                    主页
                </a>
                <a ng-class="type==2?'tab-item active':'tab-item'" ng-click="changeType(2)">
                    互动
                </a>
                <a ng-class="type==3?'tab-item active':'tab-item'" ng-click="changeType(3)">
                    排行榜
                </a>
            </div>
        </div>
        <div class="icontent" ng-if="type==1">
            <ion-slides slider="data.slider">
                <ion-slide-page ng-if="dream.video">
                    <div class="box banner">
                        <video ng-src="{{dream.video}}" height="300px" width="300px"  class="centerme" controls="controls" autoplay></video>
                    </div>
                </ion-slide-page>
                <ion-slide-page ng-repeat="img in dream.imgs" >
                    <div class="box banner"><img ng-src="{{img.pic}}" /></div>
                </ion-slide-page>
            </ion-slides>
            <div class="list detail-list">
                <div class="item">
                    <h2>{{dream.name}}</h2>
                    <p ng-style="aboutStyle">
                        {{dream.about}}
                    </p>
                    <div style="text-align: center">
                        <i class="icon ion-chevron-down" ng-style="ionDownStyle" style="color: #FE4B82" ng-click="showText()"></i>
                    </div>
                </div>
                <div class="item row detail-item2">
                    <div class="col" style="text-align:left">
                        <h2>{{timer}}</h2>
                        <p><i class="icon ion-clock"></i> 剩余时间</p>
                    </div>
                    <div class="col" style="text-align:right">
                        <h2>{{dream.score}}</h2>
                        <p><i class="icon ion-social-usd-outline"></i> 当前获得梦想分数</p>
                    </div>
                </div>
                <div class="item" style="padding:0">
                    <div class="reply-bar">
                        <div style="width: {{100*dream.get_coin/dream.coin}}%;">
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col" style="text-align:left">
                            <h2>{{dream.get_coin}}</h2>
                            <p>目前以获梦想币</p>
                        </div>
                        <div class="col" style="text-align:right">
                            <h2>{{dream.coin}}</h2>
                            <p>我要求的梦想币</p>
                        </div>                    
                    </div>
                </div>
                <div class="item row detail-head "  >
                    <div class="col"><img ng-src="{{sort.second}}"  ng-class="sort.slide2" /></div>
                    <div class="col"><img ng-src="{{sort.first}}" ng-class="sort.slide1" /></div>
                    <div class="col"><img ng-src="{{sort.third}}"  ng-class="sort.slide3"/></div>
                </div>
                <div class="item">
                    <button class="button button-assertive" style="width:25%;white-space:normal;line-height:20px">支持乘数×{{multi.result}}</button>
                    <button class="button button-calm" style="width:50%" ng-click="support($event)">支持</button>
                    <button class="button button-outline button-calm" style="width:25%" ng-click="collectionDream(1)" ng-if="dream.is_collection==0">＋收藏</button>
                    <button class="button button-outline" style="width:25%" ng-if="dream.is_collection==1" ng-click="collectionDream(0)">取消收藏</button>
                </div>
            </div>
       
        </div>
        <div ng-if="type==2" class="hdcontent">
            <div style="border-bottom:5px solid #FAF2F5;">
                <div class="list">
                    <div class="item itemjs" style="padding: 10px">
                    <!-- 梦想发布者可以发布梦想互动 -->
                        <a class="button button-outline button-block button-calm button-icon" ng-click="openModal()">
                        <i class="icon ion-plus"></i>
                        发布梦想互动</a>
                    </div>
                    <div class="item" ng-click="comment()" ng-repeat="interaction in dream.interactions"> 
                        <img class="head" src="{{dream.user.avatar}}" />
                        <span class="utitle">{{dream.user.nickname}}</span>
                        <span class="utitle kz">{{interaction.created_at}}</span>
                        <p class="subtile" style="white-space:normal">{{interaction.title}}</p>
                        <div class="picts">
                            <img class="slt" src="{{interaction.pic1}}" ng-if="interaction.pic1"/>
                            <img class="slt" src="{{interaction.pic2}}" ng-if="interaction.pic2"/>
                            <img class="slt" src="{{interaction.pic3}}" ng-if="interaction.pic3"/>
                            <img class="slt" src="{{interaction.pic4}}" ng-if="interaction.pic4"/>
                            <img class="slt" src="{{interaction.pic5}}" ng-if="interaction.pic5"/>
                            <img class="slt" src="{{interaction.pic6}}" ng-if="interaction.pic6"/>
                            <img class="slt" src="{{interaction.pic7}}" ng-if="interaction.pic7"/>
                            <img class="slt" src="{{interaction.pic8}}" ng-if="interaction.pic8"/>
                        </div>
                    </div>
                    <div class="item">
                        <div class="list" ng-click="showForm=true; focusInput=true">
                            <div class="item subitem" ng-click="replay($event,'百川1')">
                                <img ng-src="img/demo/head4.jpg" />
                                <span>百川1</span>
                                <span class="kz">2016-08-08 11:11</span>
                                <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                            </div>
                            <div class="item subitem" ng-click="replay($event,'百川2')">
                                <img ng-src="img/demo/head4.jpg" />
                                <span>百川2</span>
                                <span class="kz">2016-08-08 11:11</span>
                                <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                            </div>
                             <div class="item item-input">
                                 <input name="comment" type="text" focus-me="input.focus"   placeholder="{{input.placeholder}}" ng-model="vm.comment"  style="padding: 0 20px;">
                             </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
        
        <div ng-if="type==3" class="phbcontent">
            <div class="list">
                <div class="item" ng-repeat="user in dream.topuser">
                    <img style="width:30px" src="../../img/king.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="{{user.avatar}}" />
                        <span style="position:relative;top:-20px">{{user.nickname}}</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">{{user.score}}</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div> 
            </div>
            
        </div>

     <script id="interaction-modal.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-calm bar bar-header has-tabs-top">
          <h1 class="title">发布梦想互动</h1>
        <button class="button button-clear" ng-click="closeModal()">关闭</button>
        </ion-header-bar>
        <ion-content>
          <div class="addcontent list">
            <div class="item">我的梦想互动信息</div>
            <div class="item itemjs">
                <textarea rows="4" cols="50" placeholder="添加梦想互动信息" ng-model="vm.title" style="border: 1px solid #FF4B82;padding: 10px;width: 98%;"></textarea>
            </div>
            <div class="item">上传图片，让别人更好的了解你的梦想</div>
            <div class="item itemjs">
                <a ng-repeat="item in iimgs" ng-click="showImages(iimgServer+item)" class="img-file-up">
                    <b style="background-image:url({{iimgServer+item}});"><em ng-click="deletefile(item)" class="ion-ios-close-outline"></em></b>
                </a>
                <a class="btn-file-up" ng-click="addpict()"><i class="ion-image"></i>添加图片</a>
            </div>

        </div>
        <div class="padding">
            <button type="submit"  class="button button-full button-calm" ng-click="add()">
                发布梦想互动
            </button>
        </div>
        </ion-content>
      </div>
    </script>
    <script id="recharge-modal.html" type="text/ng-template">
      <div class="modal">
        <ion-header-bar class="bar-calm bar bar-header has-tabs-top">
          <h1 class="title">充值</h1>
        <button class="button button-clear" ng-click="closeRechargeModal()">关闭</button>
        </ion-header-bar>
        <ion-content>
              <div class="list">
                    <div class="item" style="padding:20px">
                        <span><i class="icon ion-ios-star-outline calm re-border"></i>剩余梦想币</span>
                        <div class="re-num">50000</div>
                    </div>
                    <div class="item item-input">
                        <span class="input-label">金额</span>
                        <input type="number" placeholder="请输入充值金额" ng-model="vm.money" >
                    </div>
                    <div class="item item-divider">
                       请选择以下支付方式
                    </div>
                    <ion-list class="re-radio">
                        <ion-radio ng-model="choice" ng-value="'A'">
                            <img ng-src="img/alipay.png" />
                            <span>支付宝支付</span> 
                        </ion-radio>
                        <ion-radio ng-model="choice" ng-value="'B'">
                        <img ng-src="img/weixinpay.png" /><span>微信支付</span>
                          </ion-radio>
                    </ion-list>
                </div>
                <div class="padding">
                    <button  class="button button-full button-calm" ng-click="recharge(vm.money)">
                        支付
                    </button>
                </div>
        </ion-content>
      </div>
    </script>
    </ion-content>
    <div class="detail-like" ng-if="tosupport">
        <div>
            <div class="row">
                <div class="col box {{index==1?'selected':''}}" ng-click="changeIndex(1)" ng-model="coin">
                    <h2 class="calm">5个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==2?'selected':''}}" ng-click="changeIndex(2)" ng-model="coin">
                    <h2 class="calm">10个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==3?'selected':''}}" ng-click="changeIndex(3)" ng-model="coin">
                    <h2 class="calm">15个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
            </div>
            <div class="row">
                <div class="col box {{index==4?'selected':''}}" ng-click="changeIndex(4)" ng-model="coin">
                    <h2 class="calm">20个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==5?'selected':''}}" ng-click="changeIndex(5)" ng-model="coin">
                    <h2 class="calm">25个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==6?'selected':''}}" ng-click="changeIndex(6)" ng-model="coin">
                    <h2 class="calm">30个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i> 虚拟币</p>
                </div>
            </div>
            
        </div>
        <div class="send">
            <span>余额：<i class="calm">{{dream.user.coin}}</i> 梦想币</span> 
            <span class="calm" ng-click="openRechargeModal()"><i class="icon ion-card"></i>充值</span>
            <span style="height:100%;float: right;">
            <a style="border-radius:0;width:80px;font-size:1.2em;" class="button button-calm"  ng-click="supportDream()">发送</a>
            </span>
        </div>
    </div>
</ion-view>
