
<footer_fixed>
    <style scoped>
    </style>

<div class="fixedFooter">
    <ul class="fixedFooterList">
        <li>
            <a href="{args.keirin_url}{kaisai}/entry/?race_id={race_id}&rf=footer_fixed" class="list" data-section="entry">
                <span class="icon raceInfo">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29" height="16" viewBox="0 0 28.666 15.612" fill="currentColor">
                        <defs>
                          <clipPath id="clip-path1">
                            <rect id="長方形_763" data-name="長方形 763" width="28.666" height="15.612" />
                          </clipPath>
                        </defs>
                        <g id="raceinfo" transform="translate(0 0)">
                          <g id="icon3" transform="translate(0 0)" clip-path="url(#clip-path1)">
                            <path id="パス_5786" data-name="パス 5786" d="M22.615,4.234H10.143a5.4,5.4,0,1,0,0,10.794h2.7V12.361h-2.7a2.73,2.73,0,1,1,0-5.46H22.615a2.73,2.73,0,1,1,0,5.46H14.443v2.667h8.172a5.4,5.4,0,1,0,0-10.794" transform="translate(-2.046 -1.825)" />
                            <path id="パス_5787" data-name="パス 5787" d="M20.86,0H7.805a7.806,7.806,0,0,0,0,15.612h3v-.824h-3a6.982,6.982,0,0,1,0-13.964H20.86a6.982,6.982,0,1,1,0,13.964H12.4v.824H20.86A7.806,7.806,0,0,0,20.86,0" transform="translate(0 0)" />
                          </g>
                        </g>
                    </svg>   
                </span>
                <span class="text">レース情報</span>
            </a>
        </li>

        <li>
            <a href="javascript:void(0)" onClick={ act_change_mode.bind(this, 'mark_sheet') } title="車券投票" class="list {mode == 'mark_sheet' ? 'Active' : ''}">
                <span class="icon vote">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="19" viewBox="0 0 14.592 18.948" fill="currentColor">
                        <defs>
                          <clipPath id="clip-path2">
                            <rect id="長方形_753" data-name="長方形 753" width="14.592" height="18.948" fill="none"/>
                          </clipPath>
                        </defs>
                        <g id="icon1" transform="translate(-0.5 0.385)">
                          <g id="グループ_2906" data-name="グループ 2906" transform="translate(0.5 -0.385)" clip-path="url(#clip-path2)">
                            <path id="パス_5749" data-name="パス 5749" d="M10.4.772h1.212a.377.377,0,0,0,.367-.386A.377.377,0,0,0,11.615,0H10.4a.377.377,0,0,0-.367.386A.377.377,0,0,0,10.4.772" transform="translate(-6.355 0)" />
                            <path id="パス_5750" data-name="パス 5750" d="M13.7,0H6.582a.377.377,0,0,0-.367.386.377.377,0,0,0,.367.386H13.7a.168.168,0,0,1,.163.171V18.006a.167.167,0,0,1-.162.171H.9a.167.167,0,0,1-.162-.171V.943A.167.167,0,0,1,.9.772h1.79A.377.377,0,0,0,3.053.386.377.377,0,0,0,2.686,0H.9A.921.921,0,0,0,0,.943V18.006a.921.921,0,0,0,.9.943H13.7a.921.921,0,0,0,.9-.943V.942A.923.923,0,0,0,13.7,0" transform="translate(0 0)" />
                            <path id="パス_5751" data-name="パス 5751" d="M8.371,20.39h-3.1v3.261h3.1Zm-.733,2.489H6.006V21.162H7.638Z" transform="translate(-3.339 -12.519)" />
                            <path id="パス_5752" data-name="パス 5752" d="M16.979,21.162h6.076a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -12.519)" />
                            <path id="パス_5753" data-name="パス 5753" d="M16.979,25.092h3.038a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -14.932)" />
                            <path id="パス_5754" data-name="パス 5754" d="M5.272,36.846h3.1V33.585h-3.1Zm.733-2.489H7.637v1.717H6.005Z" transform="translate(-3.339 -20.62)" />
                            <path id="パス_5755" data-name="パス 5755" d="M16.979,34.357h6.076a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -20.62)" />
                            <path id="パス_5756" data-name="パス 5756" d="M16.979,38.287h3.735a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -23.033)" />
                            <path id="パス_5757" data-name="パス 5757" d="M8.371,6.838h-3.1V10.1h3.1ZM7.638,9.327H6.006V7.61H7.638Z" transform="translate(-3.339 -4.198)" />
                            <path id="パス_5758" data-name="パス 5758" d="M16.979,7.61h6.076a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -4.198)" />
                            <path id="パス_5759" data-name="パス 5759" d="M16.979,11.541h4.638a.387.387,0,0,0,0-.772H16.979a.387.387,0,0,0,0,.772" transform="translate(-10.52 -6.612)" />
                          </g>
                        </g>
                    </svg>  
                </span>
                <span class="text">投票シート</span>
            </a>
        </li>
        <li>
            <!-- ↓開発の方へ  isIncludedItemのクラスをつけると赤い丸がつくようになるので設定をお願いいたします。-->
            <a href="javascript:void(0)" onClick={ act_change_mode.bind(this, 'bet_list') } class="list {is_bet_item ? 'isIncludedItem' : ''} {mode == 'bet_list' ? 'Active' : ''}">
                <span class="icon cart">
                    <svg id="グループ_21018" data-name="グループ 21018" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 19.742 18.709" fill="currentColor">
                        <defs>
                          <clipPath id="clip-path3">
                            <rect id="長方形_3033" data-name="長方形 3033" width="19.742" height="18.709" />
                          </clipPath>
                        </defs>
                        <g id="グループ_21017" data-name="グループ 21017" clip-path="url(#clip-path3)">
                          <path id="パス_36630" data-name="パス 36630" d="M424.264,452.3a1.521,1.521,0,1,0,1.521,1.521,1.521,1.521,0,0,0-1.521-1.521" transform="translate(-408.099 -436.629)" />
                          <path id="パス_36631" data-name="パス 36631" d="M154.49,452.3a1.521,1.521,0,1,0,1.521,1.521,1.521,1.521,0,0,0-1.521-1.521" transform="translate(-147.67 -436.629)" />
                          <path id="パス_36632" data-name="パス 36632" d="M19.608,2.936a.576.576,0,0,0-.442-.207H4.505L3.888.427A.576.576,0,0,0,3.332,0H.576a.576.576,0,0,0,0,1.152H2.89L5.645,11.431a.576.576,0,0,0,.556.427H17.024l-.339,1.862a.22.22,0,0,1-.208.148H5.8a.576.576,0,1,0,0,1.152H16.478A1.374,1.374,0,0,0,17.8,14c0-.015.008-.031.01-.046L19.733,3.409a.576.576,0,0,0-.125-.472m-8.879.945h2.232l-.54,6.824H11.269Zm-.615,6.824H8.738L7.675,3.881h1.9Zm4-6.824h1.9l-1.063,6.824H13.576Zm-9.3,0h1.7l1.063,6.824H6.643Zm12.42,6.824H16.118L17.18,3.881h1.3Z" />
                        </g>
                    </svg>  
                </span>
                <span class="text">カート</span>
            </a>
        </li>

        <!--li>
			<a href="{args.keirin_url}/bet/editor.html?date={kaisai_date}&race_id={race_id}&m=mark_sheet&rf=footer_fixed" title="車券投票" class="list" data-section="vote">
				<span class="icon vote"></span>
				<span class="text">投票シート</span>
			</a>
        </li-->
        <!--li-->
			<!-- ↓開発の方へ  isIncludedItemのクラスをつけると赤い丸がつくようになるので設定をお願いいたします。-->
            <!--a href="{args.keirin_url}/bet/editor.html?date={kaisai_date}&race_id={race_id}&m=bet_list&rf=footer_fixed" class="list" data-section="cart">
                <span class="icon cart"></span>
                <span class="text">カート</span>
            </a>
        </li-->
        <li>
            <a href="{args.keirin_url}shushi/inquiry.html?race_id={race_id}&rf=footer_fixed" class="list" data-section="purchased">
                <span class="icon purchase">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 19.999 19.919" fill="currentColor">
                        <defs>
                            <clipPath id="clip-path4">
                            <rect id="長方形_752" data-name="長方形 752" width="19.999" height="19.919" />
                            </clipPath>
                        </defs>
                        <g id="icon2" transform="translate(0 0)">
                            <path id="パス_5745" data-name="パス 5745" d="M47.69,27.2l.831.831.2.2.308-.3.383-.378-1.031-1.04Z" transform="translate(-34.756 -19.318)" />
                            <path id="パス_5746" data-name="パス 5746" d="M40.595,20.1l1.031,1.031.69-.69-1.04-1.031Z" transform="translate(-29.585 -14.147)" />
                            <g id="icon-2" data-name="icon" transform="translate(0 0)">
                            <g id="グループ_2903" data-name="グループ 2903" clip-path="url(#clip-path4)">
                                <path id="パス_5747" data-name="パス 5747" d="M10.07,5.025l.69-.69-.69-.69,2.477-2.468L13.9,2.53a2.5,2.5,0,0,0-.424,1.4h-.009A2.515,2.515,0,0,0,15.99,6.452V6.443a2.5,2.5,0,0,0,1.4-.423l1.353,1.353L17.232,8.889a6.007,6.007,0,0,1,.941.435l1.6-1.6a.483.483,0,0,0,0-.69L17.767,5.025a.483.483,0,0,0-.69,0,1.519,1.519,0,0,1-1.086.451,1.54,1.54,0,0,1-1.547-1.547,1.5,1.5,0,0,1,.451-1.086.483.483,0,0,0,0-.69L12.887.145a.483.483,0,0,0-.69,0L.145,12.2a.483.483,0,0,0,0,.69l2.007,2.007a.483.483,0,0,0,.69,0,1.542,1.542,0,0,1,1.086-.451A1.54,1.54,0,0,1,5.476,15.99a1.542,1.542,0,0,1-.451,1.086.483.483,0,0,0,0,.69l2.007,2.007a.483.483,0,0,0,.69,0l2.246-2.246a6,6,0,0,1-.436-.945l-2.16,2.16L6.019,17.39a2.505,2.505,0,0,0,.433-1.4A2.547,2.547,0,0,0,5.715,14.2H5.706a2.5,2.5,0,0,0-3.176-.3L1.176,12.547,9.389,4.334Z" transform="translate(0 0)" />
                                <path id="パス_5748" data-name="パス 5748" d="M45.217,36.445a4.771,4.771,0,0,0-2.068-.474c-.078,0-.155.008-.232.012a4.8,4.8,0,1,0,2.3.462m-3.448,6.344-1.5-1.4.612-.612,1.2,1.115,3.373-3.143a.456.456,0,0,1,.618,0,.41.41,0,0,1,.029.578l-.03.03-3.681,3.43a.459.459,0,0,1-.31.121.454.454,0,0,1-.307-.12Z" transform="translate(-27.95 -26.216)" />
                            </g>
                            </g>
                        </g>
                    </svg>
                </span>
                <span class="text">購入済み</span>
            </a>
        </li>
    </ul>
</div>

    <script>
    "use strict";

    var self = this;
    self.args = self.opts;
    self.debug = true;
    self.param = null;
    self.race_id = '';
    self.kaisai = '';
    self.kaisai_date = '';
    self.is_bet_item = false;
    self.mode = 'mark_sheet';

    if (self.debug) console.log('sel.args: %O', self.args);

    self.act_change_mode = function(mode){
        //買い目追加
        console.log('act_change_mode');
        console.log('mode: %s', mode);
        console.log(self.param);
        var query = sprintf('?m=%s', mode);
        for(var key in self.param){
            if(key == 'm'){
                continue;
            }
            query += sprintf("&%s=%s", key, self.param[key]);
        }
        self.mode = mode;
        self.args.obs.trigger('narabi_show_event', 'show');
        route(query);
    }

    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});
    });

    /*
     * 画面表示(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.show_data(p);
    });

    /*
     * データ取得、編集
     */
    self.show_data = function(p) {
        if (self.debug) console.log('self.show_data');
        self.param = p;
        self.race_id = p['race_id'];
        self.kaisai_date = p['date'];
        if(self.race_id != '' && self.race_id != undefined){
            var jyo_cd = self.race_id.substr(8, 2);
            self.kaisai = jyo_cd != '91' ? 'race' : 'pist6';
        }
        var isam_domain = sprintf("bet_%s", p['race_id']);
        // 買い目取得(local)
        var ndisam = new NDIsam();
        var list = ndisam.list(isam_domain);
        if(false === list ||  Object.keys(list).length <= 0){
            self.is_bet_item = false;
        }else{
            self.is_bet_item = true;
        }
        if(self.param['m'] != undefined){
            self.mode = self.param['m'];
        }
        console.log('self.mode: %s', self.mode);
        self.update();
    }

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

    </script>

</footer_fixed>
