<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页-特训营-爽客邦</title>
    <meta name="keywords" content="首页-特训营-爽客邦">
    <meta name="description" content="首页-特训营-爽客邦">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="首页-特训营-爽客邦">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
  </head>
  <body class="train">
    <div id="app">
      <van-sticky>
        <van-nav-bar class="camp_unactive_title f16" :title="teaminfo.TeamName" v-if="toptitleisshow" right-text="营训规则" @click-right="rules" left-arrow @click-left="comeback">
          <template #left> 
            <van-icon name="arrow-left" color="#fff" size="20"></van-icon>
          </template>
        </van-nav-bar>
      </van-sticky>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-cloak> 
        <div class="camp_unactive_titlebox rel">
          <div class="panel bgcfff abs">
            <div class="title df"> 
              <div>  
                <div class="camp f18 c333 b">{{teaminfo.TeamName}}</div>
                <div class="slogan f12 c999">{{teaminfo.WatchWord}}</div>
              </div>
              <div class="tr">
                <button class="sign" v-if="teaminfo.Status === 3"><img src="./static/images/index-camp-unactive.png" alt=""><span class="f12">审核中</span></button>
                <div class="begin f12" style="opacity: 0;">离开始还剩：{{teaminfo.OverDays}}天</div>
              </div>
            </div>
            <div class="info">
              <div class="df dfsb ovh">
                <div class="f12 c666 flex2 mr12">
                  <div>队长：{{teaminfo.captain}} {{teaminfo.makerCode}}</div>
                  <div style="white-space:nowrap;">时间：{{teaminfo.EffectStartDate}}~{{teaminfo.EffectEndDate}}</div>
                </div>
                <div class="f12 c666">
                  <div>人数：{{teaminfo.MinUserNum}}~{{teaminfo.MaxUserNum}}人</div>
                  <div style="white-space:nowrap;">地点：{{teaminfo.Areas}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="camp_unactive_member pl16 pr16" style="margin-top:3.04rem">
          <div class="title f16 b">团队成员<span class="f12 n">（{{fullmemberList.length}}人）</span></div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
            <div class="membercard df" v-for="item in fullmemberList" :key="item">
              <div class="userinfo"><img :src="item.HeadPhoto" alt="">
                <div class="boxcenter dib">
                  <div class="top f14 c333 df">{{item.Name}}
                    <div class="captain f12" v-if="item.IsTeamLeader === 1">队长</div><span class="ml12">{{item.Code}}</span>
                  </div>
                  <div class="bottom c999 f12">报名日期 {{item.EnterDate}}</div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script>
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:true,
            //- 滚动加载
            loading: false,
            finished: false,
            //- 刷新
            refreshing: false,
            teaminfo:{
            },
            fullmemberList:[
            ],
            pageinfo:{
              PageSize:10,
              PageNum:1
            },
          }
        },
        created() {
          this.getteaminfo();
          this.getmemberslist();
        },
        methods: {
          comeback(){
            PublicLib.GoBack({Level:1});
          },
          //- 点击规则
          rules(){
            PublicLib.Goto({Url:'trainingCamp-rules'});
          },
          onLoad() {
              if (this.refreshing) {
                this.fullmemberList = [];
                this.refreshing = false;
                this.pageinfo.PageNum = 0;
              }
              this.pageinfo.PageNum++;
              this.getmemberslist();
          },
          onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
          },
          //- 获取团队信息
          async getteaminfo(){
            PublicLib.ShowLoading({Message:''});
            const Id = PublicLib.getCookieInfo('trainingCampteamId');
            const res = await getRequest('/api/v1/teamapply/detail',JSON.stringify({Id}));
            if(res.status !== '1') return tips('获取团队详情失败，请重试！');
            PublicLib.HideLoading();
            this.teaminfo = res.data;
            //- this.teaminfo.EffectStartDate = '2020-02-17';
            //- this.teaminfo.EffectEndDate= '2020-02-17';
          },
          //- 获取队员列表
          async getmemberslist(){
            const TeamId = PublicLib.getCookieInfo('trainingCampteamId');
            const res = await getRequest('/api/v1/teamofferapply/memberlist',JSON.stringify({TeamId,...this.pageinfo}));
            if(res.status !== '1') return tips('获取成员列表失败，请重试！');
            if(res.data.length<this.pageinfo.PageSize) {
              this.finished = true;
            };
            this.fullmemberList.push(...res.data);
            //- this.fullmembernum = res.other.Count
            this.loading = false;
            console.log(res)
          },
        },
      });
    </script>
  </body>
</html>