<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
body {  
background-color: rgb(248, 243, 243);
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction:column;
	 justify-content: flex-start;
     align-items:center;
  	margin: 0;
}

#sidearea{  
background-color: rgb(213, 218, 210);
  height:760px;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction:column;
	 justify-content: flex-start;
     align-items:center;
  	margin: 0;
}
.sidepart{
    width: 350px;
    height:240px;
    margin-top:10px;
    margin-left:30px;
    border-radius:10px
}
#bellcall{
    background:#f5f5d6   
}
#messageboard{
    background:#d6f5de
}
#loginarea{
    background:#f8f8a6
}
#contactpart{
    background:#d6f5de ;
    width:100vw;
    height:100px;
    
}
.contactinfo {
    margin-left:100px
}
#bulletin {
    background:#def3f8;
    height:600px;
    }
#sharezone {
    background:#f8e8c5;
    height:600px;
    }
.navbar{background:#d6eff5;}
.nav-link, .navbar-brand{color: #f4f4f4;cursor:pointer;}
.nav-link{margin-right:1em !important;}
.nav-link:hover{background: #f4f4f4;color:#f97300;}
.navbar-collapse{justify-content:flex-end;}
.navbar-toggler{background:#fff !important;}

</style>

  <title>選擇之某種類別知識</title>
  </head>
  <body>
    <div id="show_div">
        <bander></bander>        
          <outputer></outputer>
        <div class="row" align="justify">
           <!-- <contacter></contacter> -->
        </div>  
    </div>
 
    <template id="banderUI">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="row">
                <div class="col-lg col-sm-6">
                    <a class="navbar-brand" href="/">{{brand}}</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                <div class="col-lg col-sm-6">
                    <li class="nav-item">
                    <a class="nav-link" href="/deep1/innerweb">{{home}}</a>
                    </li>
                </div>
                <div class="col-lg col-sm-6">
                    <li class="nav-item">
                    <a class="nav-link" href="/deep1/innerweb/KI/KIbycate">{{bycate}}</a>
                    </li>
                </div>
                <div class="col-lg col-sm-6">
                    <li class="nav-item">
                    <a class="nav-link" href="/deep1/innerweb/KI/KIbydomain">{{bydomain}}</a>
                    </li>
                </div>
                <div class="col-lg col-sm-6">
                    <li class="nav-item">
                    <a class="nav-link" href="/deep1/innerweb/KI/KIbycourse">{{bycourse}}</a>
                    </li>
                </div>
                </ul>
                <div class="col-lg col-sm-6">
                    <span class="navbar-text">
                        <font size="1">{{statusreport}}</font>
                    </span>
                </div>
                <div class="col"></div>
                <div class="col-lg col-sm-6">
                    <span class="navbar-text">
                        <font size="1">親愛的{{visitor}}</font>
                    </span>
                </div>
                </div>
            </div>
        </nav>
    </template>
     
    <template id="content1UI">
        <nav aria-label="...">
             
        </nav>
    </template>

    <template id="outputerUI">
        <nav aria-label="...">
          <table>
          <tr class="pagination">
            <td class="page-item" v-show="firstPage" @click="goFirstPage()">回第1頁</td>
            <td class="page-item" v-show="previousRound" @click="goPreviousRound()">上{{perRound}}頁</td>
            <div class="page index"  >
            <td class="page-item" :active="activeIndex[0]" v-show="showIndex[0]" @click="getShowData(0)">{{pageIndex[0]}}</td>
            <td class="page-item" :active="activeIndex[1]" v-show="showIndex[1]" @click="getShowData(1)">{{pageIndex[1]}}</td>
            <td class="page-item" :active="activeIndex[2]" v-show="showIndex[2]" @click="getShowData(2)">{{pageIndex[2]}}</td>
            <td class="page-item" :active="activeIndex[3]" v-show="showIndex[3]" @click="getShowData(3)">{{pageIndex[3]}}</td>
            <td class="page-item" :active="activeIndex[4]" v-show="showIndex[4]" @click="getShowData(4)">{{pageIndex[4]}}</td>
            <td class="page-item" :active="activeIndex[5]" v-show="showIndex[5]" @click="getShowData(5)">{{pageIndex[5]}}</td>
            <td class="page-item" :active="activeIndex[6]" v-show="showIndex[6]" @click="getShowData(6)">{{pageIndex[6]}}</td>
            <td class="page-item" :active="activeIndex[7]" v-show="showIndex[7]" @click="getShowData(7)">{{pageIndex[7]}}</td>
            <td class="page-item" :active="activeIndex[8]" v-show="showIndex[8]" @click="getShowData(8)">{{pageIndex[8]}}</td>
            <td class="page-item" :active="activeIndex[9]" v-show="showIndex[9]" @click="getShowData(9)">{{pageIndex[9]}}</td>
        </div>
            <td class="page-item" v-show="nextRound" @click="goNextRound()">下{{perRound}}頁</td>
            <td class="page-item" v-show="endPage" @click="goEndPage()">到最末頁</td>
          </tr>
          </table>
        <table border="1" class="table table-striped">
            <thead>
                <tr>
                    <th>{{items.item0}}</th>
                    <th>{{items.item2}}</th>
                    <th>{{items.item7}}</th>
                    <th>{{items.item9}}</th> 
                  <!-- <th>特別註記</th> -->
                </tr>
                </thead>
                <tbody id="knowledgelist">
                  <!-- <tr v-for="knowledge of knowledgeshow" :key="knowledge._id"> -->
                    <tr v-for="knowledge of knowledgeShow" :key="knowledge._id">
                    <td>{{knowledge.a05domain}}</td>
                    <td>{{knowledge.a15describe}}</td>
                    <td>{{knowledge.date}}</td>
                    <td>{{knowledge.a50is4download}}</td>
                <!-- statusreport="由已擷取資料組清單頁進入本頁"> -->
                
                  <td>
                    <input type="submit" value="檢視" @click="lookone(knowledge._id)">                   
                  </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tr class="pagination">
              <td class="page-item" v-show="firstPage" @click="goFirstPage()">回第1頁</td>
              <td class="page-item" v-show="previousRound" @click="goPreviousRound()">上{{perRound}}頁</td>
              <div class="page index"  >
              <td class="page-item" :active="activeIndex[0]" v-show="showIndex[0]" @click="getShowData(0)">{{pageIndex[0]}}</td>
              <td class="page-item" :active="activeIndex[1]" v-show="showIndex[1]" @click="getShowData(1)">{{pageIndex[1]}}</td>
              <td class="page-item" :active="activeIndex[2]" v-show="showIndex[2]" @click="getShowData(2)">{{pageIndex[2]}}</td>
              <td class="page-item" :active="activeIndex[3]" v-show="showIndex[3]" @click="getShowData(3)">{{pageIndex[3]}}</td>
              <td class="page-item" :active="activeIndex[4]" v-show="showIndex[4]" @click="getShowData(4)">{{pageIndex[4]}}</td>
              <td class="page-item" :active="activeIndex[5]" v-show="showIndex[5]" @click="getShowData(5)">{{pageIndex[5]}}</td>
              <td class="page-item" :active="activeIndex[6]" v-show="showIndex[6]" @click="getShowData(6)">{{pageIndex[6]}}</td>
              <td class="page-item" :active="activeIndex[7]" v-show="showIndex[7]" @click="getShowData(7)">{{pageIndex[7]}}</td>
              <td class="page-item" :active="activeIndex[8]" v-show="showIndex[8]" @click="getShowData(8)">{{pageIndex[8]}}</td>
              <td class="page-item" :active="activeIndex[9]" v-show="showIndex[9]" @click="getShowData(9)">{{pageIndex[9]}}</td>
          </div>
              <td class="page-item" v-show="nextRound" @click="goNextRound()">下{{perRound}}頁</td>
              <td class="page-item" v-show="endPage" @click="goEndPage()">到最末頁</td>
            </tr>
            </table>
      </nav>
      </template>
  
      <template id="outputerUI">
  
      </template>
  
  <!-- Vue CDN-->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
  <script>
  Vue.component("bander",{
      props:{},
      data(){
        return {
            brand:"Deep",
        home:"回本社首頁",
        brief:"服務簡介",
        deliver:"服務交付流程",
        share:"免費服務項目",
        bycate:"依管理分類",
        bydomain:"依知識領域",
        bycourse:"依課程類型",
        visitor:"貴客",            
        statusreport:'<%- statusreport %>'
        //statusreport:"顯示測試"
        }
      },
      methods:{
  
      },
      template:"#banderUI"
    });
    Vue.component("inputer",{
      props:{},
      data(){
        return {
        }   
      },
      methods:{
  
      },
      template:"#inputerUI"
    });
    Vue.component("outputer",{
      props:{},
      data(){
        return{
          perPage:10,
          perRound:3,
          maxRow:1,
          maxPage:1,
          maxRound:1,
          modRow:1,
          modPage:1,
          currentIndex:0,
          currentPage:1,
          currentRound:1,
          indexLength:1,
          previousRound:false,
          firstPage:false,
          nextRound:false,
          endPage:false,
          fullPage:false,
          pageIndex:[],
          showIndex:[],
          activeIndex:[],
          knowledgeShow:[],
          statusreport:'<%- statusreport %>',
          classtype:'<%- classtype %>',
          specific:'<%- specific%>',
          knowledgelist:JSON.parse(decodeURIComponent('<%=knowledgelist%>')),
          items:{
            item0:"知識領域",
            item1:"分類代碼",
            item2:"材料標題",
            item3:"檔案主檔名",
            item4:"檔案附檔名",
            item5:"類別",
            item6:"上傳者ID",
            item7:"上傳日期",
            item8:"揭露等級",
            item9:"供下載?",
            item99:"特別註記"     
      }
        }      
      },
      mounted:function(){
        this.maxRow=this.knowledgelist.length;
        this.modRow=this.maxRow%this.perPage;
        this.maxPage=this.modRow==0?this.maxRow/this.perPage:Math.floor(this.maxRow/this.perPage)+1;
        this.modPage=this.maxPage%this.perRound;
        this.maxRound=this.modPage==0?this.maxPage/this.perRound:Math.floor(this.maxPage/this.perRound)+1;
        this.goFirstPage()
          
      },
      methods:{
        lookone:function(id){
          let querytext="?statusreport=由knowledge某管理類別資料清單進入本頁&classtype="+this.classtype+"&specific="+this.specific+"&from="+this.from;
            console.log("classtype="+this.classtype+"   specific="+this.specific+"   from="+this.from);          
          let url2='/deep1/knowledge/lookpage/'+id+querytext;
          window.location=url2;
        },
        getShowData:function(index){
          this.currentIndex=index;
          this.activeIndex.splice(0);
          this.pageIndex.splice(0);
          this.showIndex.splice(0);
          for(let i=0;i<this.indexLength;i++){
              this.pageIndex.push(((this.currentRound-1)*this.perRound)+i+1);
              this.showIndex.push(true);
              this.activeIndex.push(false)
          }
          this.activeIndex[index]=true;
          for(let i=this.indexlength;i<this.perRound;i++){
              this.showIndex.push(false)
          };
          this.currentPage=this.pageIndex[index]
          console.log("currentPage is:"+this.currentPage)
          this.fullPage=(this.maxRow>=(this.currentPage*this.perPage))?true:false;
          this.knowledgeShow.splice(0);
          let startRow=(this.currentPage-1)*this.perPage;
            console.log("startRow is:"+startRow)          
          let rowNo=this.fullPage?this.perPage:this.modRow;
          console.log("rowNo is:"+rowNo);
          //this.knowledgeShow=[];
          this.knowledgeShow=this.knowledgelist.slice(startRow,startRow+rowNo)
          //this.knowledgeShow=this.knowledgelist.slice(8,3)
          console.log("11st knowledgelist:"+this.knowledgelist[10])          
          console.log("1st knowledgeShow:"+this.knowledgeShow[0])
          
        },
        goFirstPage:function(){
          this.currentRound=1;
          this.indexLength=(this.maxPage>this.perRound)?this.perRound:this.modPage;
          this.previousRound=false;
          this.firstPage=false;
          this.nextRound=(this.maxPage<(this.perRound+1))?false:true;
          this.endPage=(this.maxPage<(this.perRound+1))?false:true;
          this.currentIndex=0;
          this.getShowData(this.currentIndex)        
        },
        goEndPage:function(){
          this.currentRound=this.maxRound;
          this.indexLength=(this.modPage==0)?this.perRound:this.modPage;
          this.previousRound=true;
          this.firstPage=true;
          this.nextRound=false;
          this.endPage=false;
          this.currentIndex=this.indexLength-1;
          this.getShowData(this.currentIndex) 
        },
        goPreviousRound:function(){
          if(this.currentRound>1){
          this.currentRound--;
          this.currentIndex=0;
          this.indexLength=this.perRound;
          this.previousRound=this.currentRound>1?true:false;
          this.firstPage=this.currentRound>1?true:false;
          this.nextRound=true;
          this.endPage=true;
          this.getShowData(this.currentIndex)
          }else{
              console.log("There is no previous round!!")
              this.goFirstpage()
          }
        },
        goNextRound:function(){
          if(this.currentRound<this.maxRound){
          this.currentRound++;
          this.currentIndex=0;
          this.indexLength=(this.maxPage>this.currentRound*this.perRound)?this.perRound:this.modPage;
          this.previousRound=true;
          this.firstPage=true;
          this.nextRound=(this.maxPage>this.currentRound*this.perRound)?true:false;
          this.endPage=(this.maxPage>this.currentRound*this.perRound)?true:false;
          this.getShowData(this.currentIndex)
          }else{
            console.log("There is no next round!!")
            this.goEndPage()
          }
        }
      },
    template:"#outputerUI"
  });
    new Vue({
        el:'#show_div',
        data:{
          testdata:'有執行到此。。。。'
        },
        /* computed:{

        },
        watch:{

        },
        filters:{

        },
        mixins:[

        ],
        template:" ",
        
        components:{
          "bander":bander,
          "outputer":outputer,
          "inputer":inputer
        },*/
        beforeCreate:function(){
          console.log("before create...")
        },created:function(){
          console.log("created...")
        },
        beforeMount:function(){
          console.log("before mount...")
        },
        mounted:function(){
          console.log("mounted...")
        },
        beforeUpdate:function(){
          console.log("before update...")
        },
        updated:function(){
          console.log("updated...")
        },
        beforeDestroy:function(){

        } 
    })
</script>


  </body>
</html>