<!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;
    border-radius:10px
}
#bellcall{
    background:#f5f5d6   
}
#tablefy{
    display: inline-block;
  flex-direction:row;
	 justify-content: flex-start;
     align-items:left;
     margin:10px
}
#messageboard{
    background:#d6f5de
}
#contactpart{
    background:#d6f5de ;
    width:100vw;
    height:100px
    
}
.contactinfo {
    margin-left:100px
}
.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>
      
        <div class="row" align="justify">
            <div class="col-lg-3 col-md-6 col-sm-12" id="sidearea">
                <sidebar></sidebar> </div>
            <div class="col-lg-9 col-md-6 col-sm-12">
                <!--
                <div class="row" align="justify">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                -->
                        <content1></content1> </div>
                        <!--
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <content2></content2>
                        
                    </div>-->
                </div>
            </div>
        </div>
        <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/">{{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 active" href="#">{{bydomain}}<span class="sr-only">(current)</span></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">親愛的{{user}}</font>
                    </span>
                </div>
                </div>
            </div>
        </nav>
    </template>
     
    <template id="content1UI">
        <nav aria-label="...">
            <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
            <h5>請點專業知識類別選項</h5>
                    </div>
            </div>
            <div class="row" id="tablefy" v-for="term of termfiltered" :ket="term._id">
                    <div class="col-lg-3 col-md-6 col-sm-12">
                            <form  action="/deep1/knowledge/branch" method="get">
                                <input type="hidden" name="statusreport" value="由依專業領域分類知識頁進入本頁">
                                <input type="hidden" name="from" value="inner">
                                <input type="hidden" name="classtype" value="domain">
                                <input type="hidden" name="specific" :value="term.a25code">                                
                                <input type="submit" :value="term.a30mean" class="btn btn-info">       
                                </form>
                    </div>     
            </div>            
        </nav>
    </template>

    
    <template id="content2UI">
        
        </nav>
    </template>
    

    <template id="sidebarUI">
        <!-- <nav aria-label="...">
            <div class="sidepart" id="callbell">
                {{statusreport}}
                {{promote}}
                <form action="/deep1/request/bellcall" method="post">
                <input type="submit" id="bell" value="服務鈴" class="btn btn-info">
            </form>
            </div>     
            <div class="sidepart" id="messageboard">
                <form action="/deep1/message/add1" method="post">
                <label>歡迎指教：</label>
                <textarea name="a25message" placeholder="請輸入您的指教或提問..."></textarea>
                <label>如何回復您：</label>
                <input type="text" name="a10writer" placeholder="請留連絡電話或email或稱呼...">
                <input type="submit" value="送出" style="float:right" >
                </form>
            </div>
            <div class="sidepart" id="loginarea">
                <table>
                    <tr><td>會員專區</td></tr>
                    <tr id="rowinputid">
                        <td>    
                        <form action="/deep1/guestinfo/login" method="post">
                        <label>會員帳號：</label>
                        </td>
                        <td>
                        <input type="text" name="account" required/>
                        </td>
                    </tr>
                    <tr id="rowinputpw">
                        <td>
                        <label>會員密碼：</label>
                        </td>
                        <td>
                        <input type="password" name="password"/>
                        </td>
                    </tr>
                    <tr id="rowsubmitid">
                        <td>
                        <input type="hidden" name="statusreport" class="form-control" id="msg1" value="由帳號登入後進入本頁">        
                        <input type="submit" value="確認" style="float:right" >
                        </form>
                        </td>
                    </tr>
                    <tr id="rownoid">
                        <td><span>
                        <form action="/deep1/guestinfo/getpassword" method="post">
                        <input type="submit" value="忘記密碼？">
                        </form>
                        <form action="/deep1/guestinfo/register" method="post">
                        <input type="submit" value="註冊新帳號">
                        </form>
                        </span></td>
                    </tr>
                    </table>   
            </div>
        </nav> -->
    </template>

    <template id="contacterUI">
        <!-- <nav aria-label="...">
            <div id="contactpart">
         <div class="contactinfo" id="address"> 本社地址：{{address}}</div>
         <div class="contactinfo" id="tel">服務專線：{{tel}}</div>
         <div class="contactinfo" id="tel">服務電郵：{{email}}</div>
        </div>    
        </nav> -->
    </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:"依課程類型",
        aboutus:"認識我們",
        user:"無名",
        statusreport:'<%- statusreport %>'
      }
    },
    methods:{

    },
    template:"#banderUI"
  });
  Vue.component("sidebar",{
    props:{},
    data(){
      return{
        statusreport:'<%- statusreport %>',
        promote:"我們依您的需求提供多種專業的整合服務！"

      }      
    },
    computed:{
      
    },
    methods:{
      
    },
    template:"#sidebarUI"
  });
  Vue.component("contacter",{
    props:{},
    data(){
      return {
        address:"新北市永和區",
        tel:"02-29293551",
        email:"service@deep.com"
      }   
    },
    methods:{
      
    },
    template:"#contacterUI"
    });
  Vue.component("content1",{
    props:{},
    data(){
      return{
        termdomain:JSON.parse(decodeURIComponent('<%=termdomain%>')),
        termfiltered:[]
    }
    },
    mounted:function(){
        for(termx of this.termdomain){
            if(termx.a25code.search("domain")==-1){
                this.termfiltered.push(termx)
            }
        }
    },
    /*   
    computed:{
      
    },
    */
    methods:{
          
    },
    template:"#content1UI"
  });

  /*  
  Vue.component("content2",{
    props:{},
    data(){
      return{
      }        
    },
    computed:{
      
    },
    methods:{
          
    },
    template:"#content2UI"
  });
    */  
    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>