
<bet_header>
    <style scoped>
    </style>

    <div class="SimpleHead01 SimpleHeadCharge { !is_show_charge_button() ? 'SimpleHeadChargeNotVerify' : '' }">
    	<a href="javascript:history.back();" class="Return_Link">
            <span class="App_Icon Icon_Return00">戻る</span>
        </a>
        <virtual if={ is_show_charge_button() }>
    	    <div class="amountWrap">
                <virtual if={vote_mode == 'netkeirin' && args.sns_user_id != '' && is_ekyc}>
    	    	<dl class="amount" onclick={ act_change_text_mode.bind(this) }>
    	    		<dt>マネー残高</dt>
    	    		<dd class="payback"><span id="point">{point}</span>円</dd>
    	    	</dl>
    	    	<dl class="amount" onclick={ act_change_text_mode.bind(this) }>
    	    		<dt>払戻金<div class="eye jsEyeStatus {text_mode == 'hide' ? 'off' : ''}"></div></dt>
    	    		<dd class="payback">
    	    			<div>
    	    				<p class="jsAmountYen" style="" id="balance" if={ text_mode == 'show' }>{balance}</p>
    	    				<p class="jsHiddenText" if={ text_mode == 'hide' }>＊＊＊＊</p>
    	    			</div>
    	    			<span class="yen">円</span>
    	    		</dd>
    	    	</dl>
                </virtual>
          </div>
          <a href="javascript:void(0);" id="" class="amountChargeBtn jsChargeForModal" onclick="{ charge.bind(this) }">チャージする</a>
        </virtual>

        <virtual if="{is_show_not_verify}">
          <div class="notVerifyWrap">
            <div class="bonusPart">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.197" height="17.07" viewBox="0 0 25.197 17.07">
                <defs>
                  <clipPath id="clip-path-bonus">
                    <rect id="長方形_2862" data-name="長方形 2862" width="25.197" height="17.07" fill="#e03d3d"/>
                  </clipPath>
                </defs>
                <g id="グループ_19198" data-name="グループ 19198" clip-path="url(#clip-path-bonus)">
                  <path id="パス_5813" data-name="パス 5813" d="M23.333,0H14.965a.522.522,0,0,0,0,1.044h8.368a.821.821,0,0,1,.82.82V15.206a.821.821,0,0,1-.82.82H1.863a.821.821,0,0,1-.82-.82V1.863a.821.821,0,0,1,.82-.82h10.7a.522.522,0,0,0,0-1.044H1.863A1.866,1.866,0,0,0,0,1.863V15.206A1.866,1.866,0,0,0,1.863,17.07h21.47A1.866,1.866,0,0,0,25.2,15.206V1.863A1.866,1.866,0,0,0,23.333,0" transform="translate(0 0)" fill="#e03d3d"/>
                  <path id="パス_5814" data-name="パス 5814" d="M92.878,87.18h6.807a1.126,1.126,0,0,0,1.125-1.125V79.4a1.126,1.126,0,0,0-1.125-1.125H92.878A1.126,1.126,0,0,0,91.753,79.4v6.655a1.126,1.126,0,0,0,1.125,1.125M92.8,86.055V79.4a.081.081,0,0,1,.081-.081h6.807a.081.081,0,0,1,.081.081v6.655a.081.081,0,0,1-.081.081H92.878a.081.081,0,0,1-.081-.081" transform="translate(-88.392 -75.408)" fill="#e03d3d"/>
                  <path id="パス_5815" data-name="パス 5815" d="M145.441,120.23a.522.522,0,0,0,.522.522H150a.522.522,0,0,0,.522-.522,3.135,3.135,0,0,0-1.213-2.542,1.846,1.846,0,1,0-2.66,0,3.135,3.135,0,0,0-1.213,2.542m2.543-3.018a.8.8,0,1,1,.8-.8.8.8,0,0,1-.8.8m0,1.078a1.629,1.629,0,0,1,1.444,1.419H146.54a1.629,1.629,0,0,1,1.444-1.419" transform="translate(-140.113 -110.366)" fill="#e03d3d"/>
                  <path id="パス_5816" data-name="パス 5816" d="M408.485,115.6h3.646a.522.522,0,1,0,0-1.044h-3.646a.522.522,0,1,0,0,1.044" transform="translate(-393.019 -110.365)" fill="#e03d3d"/>
                  <path id="パス_5817" data-name="パス 5817" d="M408.485,171.59h6.228a.522.522,0,0,0,0-1.044h-6.228a.522.522,0,1,0,0,1.044" transform="translate(-393.019 -164.299)" fill="#e03d3d"/>
                  <path id="パス_5818" data-name="パス 5818" d="M408.485,227.575H411.6a.522.522,0,0,0,0-1.044h-3.114a.522.522,0,0,0,0,1.044" transform="translate(-393.019 -218.233)" fill="#e03d3d"/>
                  <path id="パス_5819" data-name="パス 5819" d="M408.485,283.56h6.228a.522.522,0,0,0,0-1.044h-6.228a.522.522,0,1,0,0,1.044" transform="translate(-393.019 -272.167)" fill="#e03d3d"/>
                  <path id="パス_5820" data-name="パス 5820" d="M91.753,371.163a.522.522,0,0,0,.522.522h17.811a.522.522,0,1,0,0-1.044H92.275a.522.522,0,0,0-.522.522" transform="translate(-88.392 -357.064)" fill="#e03d3d"/>
                </g>
              </svg>            
              <p class="bonusText"><span>1,000円分</span>のマネーもらえる！</p>
            </div>
            <a href="{args.keirin_url}regist/first_gift.html?rf=betsheet" class="bonusGetBtn">本人確認する</a>
          </div>
        </virtual>

<!--
        <a if={vote_mode == 'netkeirin'} href="javascript:void(0);" id="" class="amountChargeBtn jsChargeForModal" onclick="{ charge.bind(this) }" if={ is_show_charge_button() }>チャージする</a>
        <a if={vote_mode == 'TIPSTAR'} href="javascript:void(0);" id="" class="amountChargeBtn jsChargeForModal" onclick="{ tipstar_charge.bind(this) }">チャージする</a>
-->
    </div><!-- /.SimpleHead01 -->

    <script>
    "use strict";

    var self = this;
    self.args = self.opts;
    self.debug = true;
    self.param = null;
    if (self.debug) console.log('sel.args: %O', self.args);
    self.vote_mode = self.args.vote_mode;
    self.point = '-';
    self.balance = '-';
    self.text_mode = 'show';
    self.is_ban_user = false; // 本人確認ができていないユーザ
    self.is_show_not_verify = false;

    is_show_charge_button(){
      console.log('is_show_charge_button');
      console.log(self.is_ban_user);
      if(self.vote_mode == 'netkeirin'){
        if(self.args.sns_user_id != '' && self.is_ekyc && !self.is_ban_user){
          return true;
        }else{
          return false;
        }
      }else{
        if(!self.is_ban_user){
          return true;
        }else{
          return false;
        }
      }
    }

    act_change_text_mode(){
      if(self.text_mode == 'show'){
        self.text_mode = 'hide';
        self.setCookie('is_money_visible', '0', 365); // 1年間
      }else{
        self.text_mode = 'show';
        self.setCookie('is_money_visible', '1', 365); // 1年間
      }
    }

    self.tipstar_charge = function(){
        console.log('self.tipstar_charge');
        var location_url = sprintf("%s/charge", self.args.tipstar_url);
        console.log(location_url);
        window.open(location_url, '_blank');
        //location.href = location_url;
    }

    self.on('update', function() {
        //	     console.error('self.update()');
    });
    self.on('updated', function() {
        //	     console.error('self.updated()');
    });

    /*
     * 画面初期化(mount)
     */
    self.on('mount', function() {
        if (self.debug)  console.log('mount %s', self.args.tag_name);
        self.args.obs.trigger('tag_mounted', {tag: self.args.tag_name});
    });

    shared_obs.on('change_vote_mode', function(e) {
        console.log('change_vote_mode : ', e);
        self.vote_mode = e;
        if(self.vote_mode == 'netkeirin'){
          self.get_pasonal_data(function(){
            if (self.args.sns_user_id == '' || !self.is_ekyc || self.is_ban_user) {
              self.is_show_not_verify = true;
            } else {
              self.is_show_not_verify = false;
            }
            self.update();
          });
        }else{
          self.is_show_not_verify = false;
          self.update();
        }
    });

    shared_obs.on('update_points', function(e) {
        console.log('bet_header update_points : ', e);
        self.point = Math.trunc(e).toLocaleString();
        self.update();
    });

    /*
     * 画面表示(parent -> trigger -> render_xxxx)
     */
    self.args.obs.on('render_' + self.args.tag_name, function(p) {
        if (self.debug) console.log('render_%s start p: %O', self.args.tag_name, p);
        self.param = p;
        self.show_data(p);
    });


     /*
      * データ取得、編集
      */
    self.show_data = function(p) {
        if (self.debug) console.log('self.show_data');
        self.get_pasonal_data(function(){
          if(self.getCookie('is_money_visible') == 1){
            self.text_mode = 'show';
          }else{
            self.text_mode = 'hide';
          }

          if (self.vote_mode == 'netkeirin' && (self.args.sns_user_id == '' || !self.is_ekyc || self.is_ban_user)) {
            self.is_show_not_verify = true;
          }
          self.update();
        });
    }

    //制作
    self.event_regist = function(){
    }

    self.charge = function() {
      //e.preventDefault();
      if(self.vote_mode == 'netkeirin'){
        $.colorbox({
            iframe:true,
            width: "90%",
            maxWidth:'480px',
            height:"500px",
            maxHeight:"90%",
            speed:'200',
            open:true,
            fixed: true,
            speed: 200,
            href: self.args.money_api_url + '/charge/',
            className: 'addChargeColorbox',
            onComplete: function () {
              window.addEventListener('message', function(event) {
                if (event.data === 'closeColorbox') {
                  $.colorbox.close();
                }
              });
            },
            onClosed: function() {
             self.set_points(function(point){
//              self.update();
              self.args.obs.trigger('update_points_event', point);

             });
            }
        });
      }else if(self.vote_mode == 'TIPSTAR'){
        self.tipstar_charge();
      }
    }

    self.set_points = function(fn) {
      var _data = {};
      _data.output = 'jsonp';
      $.ajax({
        type: 'POST',
        url:  self.args.money_api_url + '/charge/api/api_get_points.html',
        data: _data,
        dataType: _data.output,
      }).done(function(data, textStatus, jqXHR){
        console.log(data);
        if (data.status == 'OK') {
            //var balance = data.data.balance.balance;
            //var point = data.data.points_summary.total_active_points;
            //$('#balance').html(Math.trunc(balance).toLocaleString());
            //$('#point').html(Math.trunc(point).toLocaleString());
            var point = data.data.points_summary.total_active_points;
            self.point = Math.trunc(point).toLocaleString();
            var balance = data.data.balance.balance;
            self.balance = Math.trunc(balance).toLocaleString();
            fn(point);
        } else {
            fn();
        }
      }).fail(function(jqXHR, textStatus, errorThrown){
        console.log('jqXHR: ',jqXHR);
        fn();
      });
    }

    self.get_pasonal_data = function(fn){
        if(self.args.sns_user_id != ''){
            self.set_points(function(){
                self.get_ekyc_statue(function(){
                    fn();
                });
            });
        }else{
            fn();
        }
    }

    // 本人確認状態確認
    self.get_ekyc_statue = function(fn){
        var ekyc_api_url = self.args.keirin_url + '/regist/ekyc/api_get_validate.html';
        $.ajax({
            type     : 'GET',
            url: ekyc_api_url,
            dataType: 'json',
            success: function( result ){
                console.log('result: ',result);
                if(result['status'] == 'success' && (result['result'] == '1' || result['result'] == '3')){
                    self.is_ekyc = true;
                    self.is_ban_user = result['result'] == '3' ? true : false;
                    fn();
                } else {
                    fn();
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.error('XMLHttpRequest.status: ',XMLHttpRequest.status)
                console.error('textStatus: ',textStatus);
                console.error('errorThrown.message: ',errorThrown.message);
                fn();
            }
        });
    }

    self.getCookie = function(name) {
      const value = document.cookie;
      const parts = value.split(';');
      for (let i = 0; i < parts.length; i++) {
        let part = parts[i].trim();
        if (part.indexOf(name + '=') === 0) {
          return part.substring(name.length + 1, part.length);
        }
      }
      return null;
    }

  self.setCookie = function(name, value, days) {
    var cookie_domain = self.args.cookie_domain;
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/; domain=" + cookie_domain;
  }



    </script>

</bet_header>
