<!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">
  <title>Digital Link 個人身份管理</title>
  <meta name="description" content="">
  <meta name="subject" content="">
  <link rel="icon" type="image/png" href="/digitalLinkWeb/images/favicon.ico">
  <!-- custom css -->
  <link rel="stylesheet" href="/digitalLinkWeb/css/bootstrap.min.css">
  <link rel="stylesheet" href="/digitalLinkWeb/css/fontawesome.min.css">
  <link rel="stylesheet" href="/digitalLinkWeb/css/solid.min.css">
  <link rel="stylesheet" href="/digitalLinkWeb/css/regular.min.css">
  <link rel="stylesheet" href="/digitalLinkWeb/css/style.css">
  <!-- custom js -->
  <script src="/digitalLinkWeb/js/alpine.2.8.2.min.js" defer></script>
</head>
<body class="product-profile-container" oncontextmenu="alert('版權僅適用本網站禁止下載使用'); return false;">
  <div class="main-container" x-data="loadData()">
    <div class="top-banner pb-4">
      <img src="/digitalLinkWeb/images/logo-taiwan.png" alt="GS1 Taiwan logo" height="40" class="mt-3 mx-3" />
      <div class="container-lg d-flex flex-wrap align-items-center my-2">
        <div class="text-md-end page-title-start">
          <h3 class="fw-bold mb-1">個人身份介紹</h3>
          <h5 class="fw-bold mb-0">Personal Introduction</h5>
        </div>
        <template x-if="product.gtin && product.code">
          <h3 class="word-break fw-bold sm-fs-18px lh-15 mb-0" x-text="'(01)' + product.gtin + '(21)' + product.code"></h3>
        </template>
      </div>
      

    </div>
<!--    <template x-for="item in getData()" :key="item">-->
      <div class="container-lg py-4 py-sm-5">  
        <!--系統無掃碼的身分證-->
        <div class="text-center px-3" x-show="product.gtin == '' || product.gtin == null">
          <h4 class=" text-minor fw-bold lh-17 sm-fs-20px my-5">
            <i class="fas fa-search me-3"></i>查無此人資訊或是系統異常，請稍後再嘗試。
          </h4>
          <img src="/digitalLinkWeb/images/error.png" class="mx-auto img-fluid" />
        </div>
        <!--系統有身分證資訊-->
        <div x-show="product.gtin">

          <!--有帳號，但沒有建立檔案-->
          <template x-if="product.person && (product.code == '' || product.code == null)">
              <div>
                <div class="basic-info-box account-only">
                  <h1 class="mb-0 pe-4" x-text="product.person.name"></h1>
                  <div class="d-inline-block mt-2" x-text="product.person.birthday"></div>
                  <span x-show="product.person.birthday && product.person.account">．</span>
                  <div class="d-inline-block mt-2" x-text="product.person.account"></div>
                  <div class="contact-info-box mt-3" x-show="product.person.email || product.person.phone || product.person.address">
                    <div class="contact-items" x-show="product.person.email">
                      <i class="fas fa-envelope"></i>
                      <span x-text="product.person.email"></span>
<!--                      <span x-text="item.fileMail"></span>-->
                    </div>
                    <div class="contact-items" x-show="product.person.phone">
                      <i class="fas fa-phone"></i>
                      <span x-text="product.person.phone"></span>
<!--                      <span x-text="item.filePhone"></span>-->
                    </div>
                    <div class="contact-items" x-show="product.person.address">
                      <i class="fas fa-map-marker-alt"></i>
                      <span x-text="product.person.address"></span>
<!--                      <span x-text="item.fileAddress"></span>-->
                    </div>
                  </div>
                </div>
              </div>
          </template>

          <!--有帳號，有個別檔案-->
          <template x-if="product.code">
              <div class="row align-items-center g-4">
                <div class="col-12 col-md-4 col-xl-3">
                  <div class="product-img">
                    <button class="product-img-prev" x-show="product.img.length >= 2" @click="updateMinus();" :class="{'disabled':current==0}"><i class="fas fa-arrow-left"></i></button>
                    <img :src="product.img[current]" class="product-img-show" />
                    <button class="product-img-next" x-show="product.img.length >= 2" @click="updatePlus();" :class="{'disabled':current==1}"><i class="fas fa-arrow-right"></i></button>
                  </div>
                </div>
                <div class="col-12 col-md-8 col-xl-9">
                  <div class="basic-info-box">
                    <h1 class="mb-0 pe-4 pe-md-5" x-text="product.name"></h1>
                    <div class="d-inline-block mt-2" x-text="product.birthday"></div>
                    <span x-show="product.birthday && product.identifier">．</span>
                    <div class="d-inline-block mt-2" x-text="product.identifier"></div>
                    <div class="contact-info-box mt-3" x-show="product.email || product.phone || product.address">
                      <div class="contact-items" x-show="product.email">
                        <i class="fas fa-envelope"></i>
                        <span x-text="product.email"></span>
<!--                        <span x-text="item.fileMail"></span>-->
                      </div>
                      <div class="contact-items" x-show="product.phone">
                        <i class="fas fa-phone"></i>
                        <span x-text="product.phone"></span>
<!--                        <span x-text="item.filePhone"></span>-->
                      </div>
                      <div class="contact-items" x-show="product.address">
                        <i class="fas fa-map-marker-alt"></i>
                        <span x-text="product.address"></span>
<!--                        <span x-text="item.fileAddress"></span>-->
                      </div>
                    </div>
                    <div class="wrap-block text-lightgray sm-fs-15px lh-lg text-justify pe-4 pe-md-5 mt-4" x-html="product.desc"></div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="my-4">
                    <div class="personal-items" x-show="product.info">
                      <h5 class="personal-items-title"><span>個人介紹</span></h5>
                      <div class="wrap-block" x-html="product.info"></div>
                    </div>
                    <div class="personal-items" x-show="product.familyBackground">
                      <h5 class="personal-items-title"><span>家庭背景</span></h5>
                      <div class="wrap-block" x-html="product.familyBackground"></div>
                    </div>
                    <div class="personal-items" x-show="product.educationalBackground">
                      <h5 class="personal-items-title"><span>就學經歷</span></h5>
                      <div class="wrap-block" x-html="product.educationalBackground"></div>
                    </div>
                    <div class="personal-items" x-show="product.workExperience">
                      <h5 class="personal-items-title"><span>工作經歷</span></h5>
                      <div class="wrap-block" x-html="product.workExperience"></div>
                    </div>
                    <div class="personal-items" x-show="product.certificate">
                      <h5 class="personal-items-title"><span>技能證照</span></h5>
                      <div class="wrap-block" x-html="product.certificate"></div>
                    </div>
                    <div class="personal-items">
                      <h5 class="personal-items-title"><span>學歷</span></h5>
                      <div class="wrap-block"><input type="button" value="請按我" onclick="requestData('school')"></div>
                    </div>
                    <div class="personal-items">
                      <h5 class="personal-items-title"><span>電話</span></h5>
                      <div class="wrap-block"><input type="button" value="請按我" onclick="requestData('phone')"></div>
                    </div>
                    <div class="personal-items">
                      <h5 class="personal-items-title"><span>住址</span></h5>
                      <div class="wrap-block"><input type="button" value="請按我" onclick="requestData('address')"></div>
                    </div>
                  </div>
                </div>
              </div>
          </template>

        </div>
      </div>
<!--    </template>-->
  </div>
  <button type="button" class="back-to-top opacity-0">
    <i class="fas fa-chevron-up"></i>
  </button>
  <div class="modal fade" id="info4" tabindex="-1" role="dialog" aria-labelledby="infoLabel" aria-hidden="true"
       data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document" style="top:30%;height:30px">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">訊息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <span id="info4Text"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" onclick="closeInfoModal();">確認</button>
        </div>
      </div>
    </div>
  </div>
  <script src="/digitalLinkWeb/js/bootstrap.bundle.min.js"></script>
  <script src="/digitalLinkWeb/js/back-to-top.js"></script>
  <script src="/digitalLinkWeb/jquery-easyui-1.4.5/jquery.min.js"></script>
  <script>
<!--    var productData = [-->
<!--      {-->
<!--        //掃入條碼-->
<!--        "elementString":"(01)062134646821(21)12345678",-->
<!--        //判斷是否有這個帳號的屬性-->
<!--        "gtin":"062134646821",-->
<!--        //帳號基本資料-->
<!--        "account":"F213464682",-->
<!--        "email":"ABCD1234@gmail.com",-->
<!--        "name":"王小明",-->
<!--        "birthday":"1990/01/01",-->
<!--        "getIdDate":"2004/01/08",-->
<!--        "address":"114 臺北市內湖區堤頂大道2段501號6樓",-->
<!--        "phone":"02-77092912",-->
<!--        //個別檔案資料-->
<!--        "identifier":"12345678",-->
<!--        "title":"全球商業網公司用履歷表",-->
<!--        "fileMail":"",-->
<!--        "filePhone":"09-0000-000",-->
<!--        "fileAddress":"", -->
<!--        "img":[-->
<!--          "images/img07.jpg",-->
<!--          "images/img01.png",-->
<!--        ],-->
<!--        "introduction":"大學在新創軟體公司實習，也曾經參加過創業工作坊的workshop，激發我對產品設計的熱情，擁有豐富市場分析及提案的經歷，樂於研究市場、使用者與產品，具理科的邏輯思維，及文組的柔軟論調，並能以價值導向做出最佳的產品決策。\n過往的經驗讓我宛如一塊海綿，迅速地吸收新知，目前於CRM平台擔任產品經理，協助品牌打造會員生態系，並持續為自己累積更多Domain Know-how，打磨自己成為更具備大局觀的成熟產品經理！",-->
<!--        "language":"中文-精通、英語-生活會話",-->
<!--        "belief":"",-->
<!--        "personalInfo":"<p>喜歡挑戰，喜歡冒險，面對失敗總思考著如何戰勝自己。<br>對新事物感到好奇興奮，一但開始就會竭盡所能做到最好。\n活潑不怕生的個性，讓我在團體中擁有很好的號召力與渲染力，常扮演活動主辦人角色，喜歡和不同領域的人交流分享，激盪出不一樣的火花。</p><p><strong>專案</strong><br>擔任線下實體活動主辦人，包含前期場地租借、廠商接洽、行銷內容宣傳到當天現場人員分配、場控等，從無到有的規劃執行，成功增加品牌能見度與增加預定轉換率。</p><p><strong>興趣</strong><br>閱讀：從文學作品、旅遊書籍到心理學，享受大量閱讀後，藉由不同層面及角度，從同一事件裡得出不同的觀點的趣味度。</p><p class='fw-bold'>社交平台<br><a href='https://zh-tw.facebook.com/' target='_blank'>Facebook</a><br><a href='https://www.instagram.com/' target='_blank'>Instagram</a></p>",-->
<!--        "family":"來自一個和樂的家庭，從父母身上不僅學到他們恪守本分的敬業態度，更學習到他們對生活的認真勤懇。耳濡目染之下，我也很珍惜人生中的一分一秒，不斷充實自己，把握每一個能讓自己成長的機會。",-->
<!--        "education":"<p><h5 class='fw-bold'>國立政治大學 NCCU</h5><div class='fw-bold mb-2'>企業管理學系 學士</div><div class='text-black-50'>2016-09 ~ 2020-06</div>大學期間，除了修習必修課程外，有額外進修「創新與創造力」課程，過程中與學員們一起腦力激發創意和實作，發現自己喜歡挖掘與嘗試新的事物，之後也參與系上營隊融入團體，和大家一起奮戰籌備活動。</p>",-->
<!--        "experience":"<p><strong>▍ 兩兩科技股份有限公司　Product manager</strong><br><span class='text-primary'>2021-10 ~ 現在</span><br>→ 著重於品牌之會員經營，包含會員分級、介紹回饋、自動贈禮等計畫，利用數據分析達到精準再行銷，提升品牌顧客忠誠度及回流率</p><ol><li>從 0 到 1 進行新功能規劃與執行，上線後 3 個月內獲取 40 家品牌客戶的導入，並維持 88% 以上的回訪率及 75% 的 NPS市場調查、競品分析與商業模式擬定，進行產品定位、PRD撰寫、繪製 User Flow，與 Dev、Design 合作產出進行產品測試、驗收、維運</li><li>透過 Google Analytics、SQL 分析使用狀況，優化產品 Landing Page ，大幅提升 16% 的轉換率</li><li>提出跨部門溝通及專案 SOP 管理表，縮短平均 8% 的交付時間</li><li>導入 ClickUp 專案管理工具管理內部任務，大幅提升團隊 30% 開發效率</li></ol><p><br><strong>▍ 練生資訊股份有限公司　產品經理</strong><br><span class='text-primary'>2020-08 ~ 2021-10</span><br>→ 主打即時預訂的線上服務平台，涵蓋近十個城市、十種多元產業，每月活躍用戶達 15 萬</p><ol><li>一年內負責 7 個客製專案，有效提升用戶對產品黏著度 15%對齊與釐清客戶需求，制定專案計畫、開發進度控管、繪製User Flow、PRD撰寫、GTM行銷資料與設計師、工程師、業務跨部門溝通與協作、上線前測試＆上線後驗證成效</li><li>參與產品 SEO 專案規劃與執行，於 8 個月內提升 10% 網站流量</li><li>協助規劃企業系列方案，進一步 Cross-selling 行銷活動，提升專案合作廣度與深度</li></ol><p><br><strong>▍ 可斯股份有限公司　專案經理實習生</strong><br><span class='text-primary'>2019-06 ~ 2010-05</span><br>→ 全台首例共享行動電源服務，解決外出時電量不足的煩惱，並支援跨國租借歸還。</p><ol><li>協助規劃產品功能開發、撰寫需求文件</li><li>參與 APP 開發流程、撰寫使用教學手冊</li><li>競品與市場調研，探索市場趨勢與商業模式</li><li>彙整與蒐集外部需求，跨部門溝通並研究解決方案</li></ol><p><br><strong>▍ 興遊科技股份有限公司　Operation Intern</strong><br><span class='text-primary'>2018-10 ~ 2019-04</span><br>→ 集結亞洲各國特色旅宿的線上訂房平台，提供旅人最優質的住宿體驗服務</p><ol><li> 協助快速上架旅宿，半年內達標 120 間旅宿上線</li><li>密集的跨部門溝通，協助檢查夥伴上線內容，維護旅宿上架品質</li><li>維護網站＆數據分析</li><li>有限期間內完成營運主管指派任務</li></ol>",-->
<!--        "skills":"<p class='fw-bold'>證照</p><ul><li><strong>Google Analytics (分析) 個人認證資格　</strong>2021-04<br>進階</li><li><strong>Google Analytics (分析) 個人認證資格　</strong>2020-11<br>基礎</li><li><strong>Google Ads 多媒體廣告認證　</strong>2017-07<br>基礎</li></ul>",-->
<!--        "registrationDate":"2023-05-15 07:34",-->
<!--        "editDate":"2023-05-17 14:07",-->
<!--      }-->
<!--    ];-->
    var picShowPath = null;
    var product = {"gtin":null,"code":null,"img":[],"name":null,"birthday":null,"identifier":null,"email":null,"phone":null,"address":null,"desc":null,"languageSkills":null,"belief":null,"info":null,"familyBackground":null,"educationalBackground":null,"workExperience":null,"certificate":null,"person":null};

    function loadData() {
      return {
        product: product,
        current: 0, 
        getData() {
          return this.product;
        },
        updateMinus(){ this.current = 0;},
        updatePlus(){ this.current = 1;}
      };
    }

    var contextPath = '/digitalLinkWeb'
    let evtSource;
    function requestData(field){
       let data = {};
       data.field = field;
       data.gtin = product.gtin;
        $.ajax({
             url: contextPath + "/requestData",
             type : 'post',
             dataType: 'json',
             contentType : 'application/json; charset=utf-8',
             data: JSON.stringify(data),
             success : function(response) {
                 if(response.code == 'M000'){
                    let requestId=response.data;
                    $("#info4").modal("show");
                    $("#info4Text").text("請稍候")
                    createSSE(requestId);
                 }
             }
         });
    }

    function createSSE(requestId){
        evtSource = new EventSource("/digitalLinkWeb/requestDataSse?requestId="+requestId);
        evtSource.onopen = function () {
              console.log('connection is established');
        };
         evtSource.onerror = function (event) {
              console.log('connection state: ' + evtSource.readyState + ', error: ' + event);
              console.log(event);
              evtSource.close();
        };
        evtSource.onmessage = (event) => {
              console.log('id: ' + event.lastEventId + ', data: ' + event.data);
              let sseDTO=JSON.parse(event.data);
              if(sseDTO.type==="used"){
              }else if(sseDTO.type==="acceptRequestData"){
                  $("#info4Text").text("收到的授權資料是["+sseDTO.message+"]");
                  evtSource.close();
              }else if(sseDTO.type==="rejectRequestData"){
                  $("#info4Text").text("您已經被回絕此資料的讀取權限")
                  evtSource.close();
              }else if(sseDTO.type==="firstConnect"){
                  console.log("第一次連上");
              }else if(sseDTO.type==="heartbeat"){
                  console.log("心跳");
              }
        };

    }

    function closeInfoModal(){
        if(evtSource){
            evtSource.close();
            evtSource=undefined; 
        }
        $('#info4').modal('hide');
    }
    $('#info4').on('hidden.bs.modal', function (e) {
         if(evtSource){
            evtSource.close();
            evtSource=undefined;
        }
    }) 


  </script>
</body>
</html>
