<!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="/javascripts/jquery-3.4.1.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
body {
background-color: rgb(205, 226, 253);
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction:column;
	 justify-content: flex-start;
     align-items:center;
  	margin: 0;
}
#tablefy{
    display: inline-block;
  flex-direction:row;
	 justify-content: flex-start;
     align-items:left;
     margin:10px
}
.navbar{background:#cff8c5;}
.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;}
.page-item {
    margin-right:12px
}
.page-item[active=true]{
    font-weight: bold;
    text-decoration:underline
}
</style>

  <title>各資料表維管入口</title>
  </head>
  <body>
    <div id="show_div">
      <bander></bander>
      <div class="row" align="justify">
        <outputer></outputer>
      </div>
        <!-- <inputer></inputer> -->
    </div>

    <template id="banderUI">
      <nav class="navbar navbar-expand-lg navbar-light">
        <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 class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link  active" href="#">{{data2manage}}<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" :href="KMurl">{{KM}}</a>
          </li>
              <li class="nav-item">
                <a class="nav-link" :href="outerweburl">{{outerweb}}</a>
              </li>
          </ul>
          <span class="navbar-text">
            <font size="2">{{statusreport}}</font>
          </span>
        </div>
      </nav>
    </template>

    <template id="outputerUI">
        <nav aria-label="...">
          <div class="row" id="tablefy" v-for="table of tables" :key="table._id">
            <div class="col-lg-3 col-md-6 col-sm-12">
            <form  :action="table.route" method="get">
              <input type="hidden" name="statusreport" value="由資料維管按鈕進入本頁">
              <input type="submit" :value="table.label" class="btn btn-info">
            </form>
  </div>
  </div>
      </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:"Career",
          //previouspage:"回案件清單頁",
          data2manage:"各資料表維管入口",
          KM:"知識管理",
          outerweb:"至外部網站",
          statusreport:'<%- statusreport %>',
          personID:'<%- personID %>',
          //previousurl:"",
          outerweburl:"",
          KMurl:""
        }
      },
          mounted:function(){
            this.outerweburl="/career/branch/goouterweb/"+this.personID,
            this.KMurl="/career/branch/goKM/"+this.personID
          },
      methods:{

      },
      template:"#banderUI"
    });
    /*
    Vue.component("inputer",{
      props:{},
      data(){
        return {


        }
      },

      methods:{

      },
      template:"#inputerUI"
    });
    */
    Vue.component("outputer",{
      props:{},
      data(){
        return{
          statusreport:'<%- statusreport %>',
          personID:'<%- personID %>',
          tables:[
            {"route":"/career/user",
            "label":"使用者帳戶資料表維管"
            },
            {"route":"/career/userright",
            "label":"使用者權限資料表維管"
            },
            {"route":"/career/person",
            "label":"使用者個資資料表維管"
            },            
            {"route":"/career/post",
            "label":"公告資料表維管"
            },
            {"route":"/career/message",
            "label":"訪客留言資料表維管"
            },
            {"route":"/career/knowledge",
            "label":"知識資料表維管"
            },
            {"route":"/career/publish",
            "label":"出版資料表維管"
            },
            {"route":"/career/term",
            "label":"名詞對照資料表維管"
            }
            ]
        }
      },
      mounted:function(){
        for(table of this.tables)
        table.route=table.route+'/'+this.personID;
        console.log("revise route: "+table.route)
      },
      methods:{

      },
    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>
