<!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>
<style type="text/css">
body {
  background-color: #d6d6d3;
  height: 100vh;
  width: 100vw;
  display: flex;
     flex-direction:column;
	 justify-content: flex-start;
     align-items:center;
  	margin: 0;
}
.navbar{background:#e5f8cd;}
.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>修正指定之staffinfo</title>
  </head>
  <body>
    <div id="show_div">
      <bander></bander>
        <inputer></inputer>
        <!-- <outputer></outputer> -->
    </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" href="/deep1/innerweb/affaire/personnel">{{lastpage}}</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">{{edit1}} <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">{{editbatch}}</a>
            </li>
          </ul>
          <span class="navbar-text">
            {{statusreport}}
          </span>
        </div>
      </nav>
    </template>
    
    <template id="inputerUI" >
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">修正{{staffinfo.a05name}}之資料</h5>
          <h6 class="card-subtitle mb-2 text-muted">{{card_subtitle}}</h6>
          <form action="/deep1/staffinfo/update" method="post">
            <div class="form-group" :key="inputerUIkey">
            <label for="formGroupExampleInput2">{{items.item}}</label>
            <input type="text" name="_id" class="form-control" id="formGroupExampleInput" :value="staffinfo._id">
            
            <label for="formGroupExampleInput2">{{items.item0}}</label>
              <input type="text" name="a05lastname" class="form-control" id="formGroupExampleInput0" :value="staffinfo.a05lastname">

              <label for="formGroupExampleInput2">{{items.item1}}</label>
              <input type="text" name="a10fistname" class="form-control" id="formGroupExampleInput1" :value="staffinfo.a10fistname">

              <label for="formGroupExampleInput2">{{items.item2}}</label>
              <input type="text" name="a13identity" class="form-control" id="formGroupExampleInput2" :value="staffinfo.a13identity">           
              
              <label for="formGroupExampleInput2">{{items.item3}}</label>
            <select name="a15gender" class="form-select">
                <optgroup v-for="(gender,index) of genders" :key="gender._id">
                <option :value="gender.a25code" :selected="genderindex[indgex]">{{gender.a30mean}}</option>
                </optgroup>
                </select>
              <br>
              
              <label for="formGroupExampleInput2">{{items.item4}}</label>
              <input type="text" name="a20birthday" class="form-control" id="formGroupExampleInput4" :value="staffinfo.a20birthday">
            
              <label for="formGroupExampleInput2">{{items.item5}}</label>
              <input type="text" name="a25dateofjoin" class="form-control" id="formGroupExampleInput5" :value="staffinfo.a25dateofjoin">

              <label for="formGroupExampleInput2">{{items.item6}}</label>
            <select name="a28department" class="form-select">
                <optgroup v-for="(department,index) of departments" :key="department._id">
                <option :value="department.a25code" :selected="departmentindex[index]">{{department.a30mean}}</option>
                </optgroup>
                </select>
              <br>

              <label for="formGroupExampleInput2">{{items.item7}}</label>
            <select name="a30position" class="form-select">
                <optgroup v-for="(position,index) of positions" :key="position._id">
                <option :value="position.a25code" :selected="positionindex[index]">{{position.a30mean}}</option>
                </optgroup>
                </select>
              <br>

              <label for="formGroupExampleInput2">{{items.item8}}</label>
              <input type="text" name="a33tel" class="form-control" id="formGroupExampleInput8" :value="staffinfo.a33tel">

              <label for="formGroupExampleInput2">{{items.item9}}</label>
              <input type="text" name="a35phoneno" class="form-control" id="formGroupExampleInput9" :value="staffinfo.a35phoneno">
            
              <label for="formGroupExampleInput2">{{items.item10}}</label>
              <input type="text" name="a40email" class="form-control" id="formGroupExampleInput10" :value="staffinfo.a40email">
            
              <label for="formGroupExampleInput2">{{items.item11}}</label>
              <input type="text" name="a45address" class="form-control" id="formGroupExampleInput11" :value="staffinfo.a45address">
            
              <label for="formGroupExampleInput2">{{items.item12}}</label>
              <input type="text" name="a50degree" class="form-control" id="formGroupExampleInput12" :value="staffinfo.a50degree">
            
              <label for="formGroupExampleInput2">{{items.item13}}</label>
              <input type="text" name="a55resume" class="form-control" id="formGroupExampleInput13" :value="staffinfo.a55resume">
            
              <label for="formGroupExampleInput2">{{items.item14}}</label>
          <select name="a60expertise" class="form-select" multiple>
                <optgroup v-for="(expertise,index) of expertises" :key="expertise._id">
                <option :value="expertise.a25code" :selected="expertiseindex[index]">{{expertise.a30mean}}</option>
                </optgroup>
                </select>
              <br>
                
              <label for="formGroupExampleInput2">{{items.item15}}</label>
              <input type="text" name="a65extra" class="form-control" id="formGroupExampleInput15" :value="staffinfo.a65extra">  
           
              <input type="hidden" name="statusreport" class="form-control" id="msg1" value="由修正staffinfo後進入本頁">
              <input type="hidden" name="status" class="form-control" id="msg2" value="1">
              <input type="submit" id="button1" value="確定送出" class="btn btn-info">
            </div>
          </form>
          <input type="submit" id="button2" value="重新輸入" class="btn btn-info" @click="rerender()">
          <!-- <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a> -->
        </div>
      </div> 
    </template>

 
<!-- Vue CDN-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component("bander",{
    props:{},
    data(){
      return {
        brand:"Deep內部功能",
        lastpage:"回人資管理頁",
        edit1:"修正1筆",
        editbatch:"修正多筆",
        statusreport:'<%- statusreport %>'
      }
    },
    methods:{

    },
    template:"#banderUI"
  });
  Vue.component("inputer",{
    props:{},
    data(){
      return {
        card_title:"",
        card_subtitle:"請修正以下各項資料:",
        items:{
            item:"ID",
            item0:"姓:",
            item1:"名:",
            item2:"身分證號碼:",
            item3:"性別:",
            item4:"出生年月日:",
            item5:"加入事業時間:",
            item6:"現職單位:",
            item7:"現職職稱:",
            item8:"電話:",
            item9:"手機:",
            item10:"Email:",
            item11:"地址:",
            item12:"主要學歷:",
            item13:"主要經歷:",
            item14:"主要專長:",
            item15:"其他:",
            item99:"特別註記"     
      },
      staffinfo:JSON.parse(decodeURIComponent('<%=staffinfo%>')),
      termlist:JSON.parse(decodeURIComponent('<%=termlist%>')),
        genders:[],
        departments:[],
        positions:[],
        expertises:[],
        genderindex:[],
        departmentindex:[],
        positionindex:[],
        expertiseindex:[],
      inputerUIkey:0
        
      } 
    },
    mounted:function(){
        for(term of this.termlist){
            if(term.a20field=="a15gender"){
                this.genders.push(term)
            }
        }
        for(term of this.termlist){
            if(term.a20field=="a28department"){
                this.departments.push(term)
            }
        }
        for(term of this.termlist){
            if(term.a20field=="a30position"){
                this.positions.push(term)
            }
        }
        for(term of this.termlist){
            if(term.a20field=="a60expertise"){
                this.expertises.push(term)
            }
        }
        for(gender of this.genders){
            if(gender._id==this.staffinfo.a15gender){
                this.genderindex.push(true)
            }else{
                this.genderindex.push(false)
            }
        } 
        for(department of this.departments){
            if(department.a25code==this.staffinfo.a28department){
                this.departmentindex.push(true)
            }else{
                this.departmentindex.push(false)
            }
        }
        for(position of this.positions){
            if(position.a25code==this.staffinfo.a30position){
                this.positionindex.push(true)
            }else{
                this.positionindex.push(false)
            }
        }
        for(expertise of this.expertises){
            if(expertise.a25code==this.staffinfo.a60expertise){
                this.expertiseindex.push(true)
            }else{
                this.expertiseindex.push(false)
            }
        }
                           
    },  
    methods:{
        rerender:function() {
      this.inputerUIkey += 1;
      console.log("inputerUIkey:"+this.inputerUIkey) 
    }
    }, 
      
    template:"#inputerUI"
  });
    new Vue({
        el:'#show_div',
        data:{
          testdata:'有執行到此。。。。'
        },
        /* computed:{

        },
        watch:{

        },
        filters:{

        },
        mixins:[

        ],
        template:" ",
        components:{

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