<search-po>
    <link rel="stylesheet" href="css/search-top.css">
    <link rel="stylesheet" href="css/animate.css">
    <notice-box></notice-box>
    <div class="main">
      <div class="content">
        <div class="page-title">
            <h2>キーワード検索</h2>
        </div>
        <div class="form-wrapper">
            <div class="form-item">
                <form onsubmit={ submit }>
                    <table>
                        <tr>
                            <td style="width: 150px !important;">キーワード</td>
                            <td colspan="2">
                                <input type="text" name="keyword" id="keyword" placeholder="販売元メーカー名・製造元メーカー名・品番・品名・容量・等級名・ＣＡＳ ＮＯ．・EANコード">
                                <input type="hidden" name="cas_code" id="cas_code">
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td class="form-text">
                                ※複数の語を空白で区切ると絞込み検索(AND)ができます
                            </td> 
                        </tr>
                        <tr class="only_s004">
                            <td colspan="3">
                                <div style = 'border: 0.5px solid #3e70a5; margin-top: 15px; margin-bottom: 15px'></div>
                            </td>
                        </tr>  
                        <tr class="only_s004">
                            <td style="">品番</td>
                            <td>
                                <input type="text" name="supplier_code" id="supplier_code" placeholder="品番を入力" autocomplete="off">
                            </td>
                            <td>
                                <select id="no_type">
                                    <option value="1">完全一致</option>
                                    <option value="2">から始まる</option>
                                    <option value="3">で終わる</option>
                                    <option value="4" selected>を含む</option>
                                </select>
                            </td>
                        </tr>
                        <tr class="only_s004">
                            <td>品名</td>
                            <td>
                                <input type="text" name="name" id="name" placeholder="品名を入力" autocomplete="off">
                            </td>
                            <td>
                                <select id="name_type">
                                    <option value="1">完全一致</option>
                                    <option value="2">から始まる</option>
                                    <option value="3">で終わる</option>
                                    <option value="4" selected>を含む</option>
                                </select>
                            </td>
                        </tr>
                        <tr class="only_s004">
                            <td>製造元/ブランド</td>
                            <td>
                                <div class="div-wraper-autocompleter">
                                    <input type="text" name="maker_name" id="maker_name" placeholder="メーカー名を入力（サジェスト）">
                                </div>
                                <div class="multi_select"></div>
                            </td>
                        </tr>
                        <tr class="only_s004">
                            <td>CAS No.</td>
                            <td>
                                <input type="text" name="search_cas_code" id="search_cas_code" placeholder="CAS No.を入力">
                            </td>
                        </tr>
                        <tr id="search-campaign">
                            <td></td>
                            <td>
                                <div>
                                    <label for="search_campaign" style="display: inline;">キャンペーン中の商品のみ検索</label>
                                    <input type="checkbox" name="search_campaign" id="search_campaign" style="display: inline; width: auto;">
                                </div>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>表示件数</td>
                            <td>
                                <select id="limit" style="width:60px">
                                    <option selected="{limit_po_on_page == 20 ? 'selected':''}">20</option>
                                    <option selected="{limit_po_on_page == 50 ? 'selected':''}">50</option>
                                </select>
                                件
                            </td>
                        </tr>
                        <tr>
                          <td class="searchBtnTd">
                            <button class="reset-btn" type="reset"><i class="fa fa-refresh" aria-hidden="true"></i>条件クリア</button>
                          </td>
                          <td>
                            <button style="color: red; display: none" type="button" id="ec27-Open">カタログ外商品のお見積りはこちら</button>
                          </td>
                          <td align="right" colspan="2">
                            <button style="background:#1C6BC0; color:#FFFFFF; border-radius:5px;" class="search-btn" type="submit">検索</button>
                          </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div id="not-found" class="not-found text-center" style="display:none">
            <img src="img/search-not-found.png" alt="Result not found.">
            <p style="margin-top:-80px;font-weight:bold;font-size:20px">検索結果は0件でした。他のキーワードで再度検索してみてください。</p>
        </div>
        <div id="search-result">
            <search-result></search-result>
            <div id="paging" class="text-center">
                <ul class="pagination" id="pagination"></ul>
            </div>
        </div>
        <maker-popup></maker-popup>
        <ec27></ec27>
        <create-new-inquiry-open></create-new-inquiry-open>
      </div>
    </div>
    <script>
        ec10_current_search = 'search-po';
        this.limit_on_page = ec10_limit_on_page;
        this.basic_is_active = opts.basic_is_active;
        this.suggest_list = opts.suggest_list;
        this.list_combine = opts.list_combine;
        this.conditions = [
            {condition: '完全一致'},
            {condition: 'から始まる'},
            {condition: 'を含む'},
        ];
        var user_info = JSON.parse(localStorage.getItem('EcUserInfo'));
        this.total = 1;
        var thisTag = this;
        this.list_show = user_info.list_navigation.S;
        this.list_show_F = user_info.list_navigation.F;
        this.list_show_B = user_info.list_navigation.B;
        toggle(e) {
            this.basic_is_active = !this.basic_is_active;
            this.antibody_is_active = !this.antibody_is_active;
        }

        var accessTokenCognito = localStorage.getItem('accessTokenCognito');
        const notFoundResult=(total)=>{
            if(total==0){
              $("#not-found").css("display","block");
              $("#search-result").css("display","none");
            }else{
              $("#not-found").css("display","none");
              $("#search-result").css("display","block");
            }
        }
        this.on('mount', function () {
            var suggest_list = JSON.parse(localStorage.getItem('suggest_list'));
            var check_detail = arColumn(this.list_show, 'navigation_id', 'S004');
            if (check_detail.length > 0) {
                if (check_detail[0].display_status == 'N') {
                    $(".only_s004").remove();
                    // $("#panel_2").remove();
                    // $("#more-option").remove();
                }
            } 
            var check_detail = arColumn(this.list_show_F, 'navigation_id', 'F013');
            if (check_detail.length > 0) {
                if (check_detail[0].display_status == 'N') {
                    $("#search-campaign").remove();
                }
            } else {
                $("#search-campaign").remove();
            }
            var check_detail = arColumn(this.list_show_B, 'navigation_id', 'B013');
            if (check_detail.length > 0) {
                $('#ec27-Open').text(arColumn(this.list_show_B, 'navigation_id', 'B013')[0]['display_contents']);
                if (check_detail[0].display_status == 'N') {
                    $("#ec27-Open").remove();
                }
                if(!check_detail[0].display_status){
                    $("#ec27-Open").remove();
                }
            } else {
                $("#ec27-Open").remove();
            }
            $('#maker_name').autocomplete({
                open: function( event, ui ) {
                    return event.target.value;
                },
                source: function( request, response  ) {
                  var convertMatcher3 = '';
                  if (request.term.length > 0) {
                    convertMatcher3 = new RegExp("^" + $.ui.autocomplete.escapeRegex( mb_convert_kana(request.term, 'RNSKHC')), 'i');
                  }
                  var convertMatcher = request.term.replace(/[\uff01-\uff5e]/g,function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xfee0); });
                  convertMatcher = new RegExp("^" + $.ui.autocomplete.escapeRegex ( convertMatcher ), "i" );
                  var convertMatcher2 = new RegExp("^" + $.ui.autocomplete.escapeRegex ( request.term.toFullWidth() ), "i" );
                  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex ( request.term ), "i" );
                  response( $.grep( JSON.parse(JSON.stringify(suggest_list)), function( item ){
                      return  convertMatcher2.test(item) || convertMatcher3.test(item) || convertMatcher.test(item) || matcher.test( item );
                  }) );
                },
                select: function( event, ui ) {
                    $('.multi_select').append('<p>'+ui.item.value+'<i class="fa fa-times x-multi_select-search" aria-hidden="true"></i></p>');
                    $('#maker_name').val('');
                    return false;
                }
            });
            // $('#maker_name').autocompleter({
            //     limit : 10,
            //     source: suggest_list,
            //     combine: function(params) {
            //         alert(params);
            //         return;
            //         var value = $('#maker_name').val();
            //         value = mb_convert_kana(value, 'ranaskhc');

            //         return {
            //             q: params.query,
            //             label: value
            //         };
            //         console.log(params)
            //     },
            //     // customLabel: true,
            //     callback : function(val, index, object) {

            //         console.log(val)
            //         console.log(index)
            //         console.log(object)
            //         $('.multi_select').append('<p>'+val+'<i class="fa fa-times x-multi_select-search" aria-hidden="true"></i></p>');
            //         $('#maker_name').val('');
            //         return false;
            //     }
            // });
            $(document).on('click', '.x-multi_select-search', function() {
                $(this).parent().remove();
            });
            // riot.mount('notice-box', 'notice-box', {name: "notice/box"});
            $('#keyword').val(ec10_keyword);
            // var dis_keyword = false;
            // dis_keyword = $('#keyword').prop('disabled');
            // if (ec10_keyword != '' && !dis_keyword) {
            if (ec10_keyword != '') {
                // ec10_cas_code = '';
                if (ec10_cas_code) {
                    $('.form-item form')[0].reset();
                    // var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : '';
                    // if (panel == 'panel_2') {
                    //     $('.tab-area').find('#more-option').addClass('active');
                    //     $('.panel-area').find('#panel_2').addClass('active');
                    //     $('.tab-area').find('#keyword-option').removeClass('active');
                    //     $('.panel-area').find('#panel_1').removeClass('active');
                    //     $('#panel_2').find('input[type="text"]').val('');
                    //     $('#search_cas_code').val(search_cas_code);
                        $('#search_cas_code').val(ec10_cas_code);
                        // $('#keyword').prop('disabled', true);
                    // } else {
                    //     $('.tab-area').find('#keyword-option').addClass('active');
                    //     $('.panel-area').find('#panel_1').addClass('active');
                    //     $('.tab-area').find('#more-option').removeClass('active');
                    //     $('.panel-area').find('#panel_2').removeClass('active');
                    //     $('#keyword').val(ec10_cas_code);
                    //     $('#keyword').prop('disabled', false);
                    // }
                    submit();
                    ec10_cas_code = '';
                    return;
                }
                if(check_login){
                    submit();
                } else {
                    var result_search = JSON.parse(localStorage.getItem('result_search')) ? JSON.parse(localStorage.getItem('result_search')) : [];
                    if (result_search.length > 0) {
                        thisTag.searchBack();
                    }
                }
            } else if (ec10_cas_code) {
                    $('.form-item form')[0].reset();
                // var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : '';
                // if (panel == 'panel_2') {
                //     $('.tab-area').find('#more-option').addClass('active');
                //     $('.panel-area').find('#panel_2').addClass('active');
                //     $('.tab-area').find('#keyword-option').removeClass('active');
                //     $('.panel-area').find('#panel_1').removeClass('active');
                //     $('#panel_2').find('input[type="text"]').val('');
                //     $('#search_cas_code').val(search_cas_code);
                    $('#search_cas_code').val(ec10_cas_code);
                //     $('#keyword').prop('disabled', true);
                // } else {
                //     $('.tab-area').find('#keyword-option').addClass('active');
                //     $('.panel-area').find('#panel_1').addClass('active');
                //     $('.tab-area').find('#more-option').removeClass('active');
                //     $('.panel-area').find('#panel_2').removeClass('active');
                //     $('#keyword').val(ec10_cas_code);
                //     $('#keyword').prop('disabled', false);
                // }
                submit();
            } else {
                if(ec12_back_po == 'search-po'){
                    var result_search = JSON.parse(localStorage.getItem('result_search')) ? JSON.parse(localStorage.getItem('result_search')) : [];
                    if (result_search.length > 0) {
                        thisTag.searchBack();
                    }
                    // submit();
                }
            }
        })
        this.backToTop = function(){
            $('body,html').animate({
                scrollTop: 0
            }, 0);
        }
        // this.on('unmount', function() {
        //     box.notice.unmount(true);
        // })
        this.searchBack = function(){
            $('#ec27-Open').show();
            var result_search = JSON.parse(localStorage.getItem('result_search'));
            var last_search = result_search[result_search.length-1];
            var panel = last_search.panel;
            var result_search_page = last_search.page;
            var keyword = last_search.keyword;
            var search_supplier_code = last_search.search_supplier_code;
            var search_name_jp = last_search.search_name_jp;
            var search_maker_name = last_search.search_maker_name;
            var search_cas_code = last_search.search_cas_code;
            var no_type = last_search.no_type;
            var name_type = last_search.name_type;
            var search_campaign = last_search.search_campaign;
            // if (panel == 'panel_2') {
                // $('.tab-area').find('#more-option').addClass('active');
                // $('.panel-area').find('#panel_2').addClass('active');
                // $('.tab-area').find('#keyword-option').removeClass('active');
                // $('.panel-area').find('#panel_1').removeClass('active');
                $('#supplier_code').val(search_supplier_code);
                $('#name').val(search_name_jp);
                if (search_maker_name.length > 0) {
                    var html = '';
                    for (var i = 0; i < search_maker_name.length; i++) {
                        var item = search_maker_name[i];
                        html += '<p>'+item+'<i class="fa fa-times x-multi_select-search" aria-hidden="true"></i></p>';
                    }
                    $('.multi_select').append(html);
                }
                $('#search_cas_code').val(search_cas_code);
                $('#no_type').val(no_type);
                $('#name_type').val(name_type);
                // $('#keyword').prop('disabled', true);
            // } else {
            //     $('.tab-area').find('#keyword-option').addClass('active');
            //     $('.panel-area').find('#panel_1').addClass('active');
            //     $('.tab-area').find('#more-option').removeClass('active');
            //     $('.panel-area').find('#panel_2').removeClass('active');
                $('#keyword').val(keyword);
                // $('#keyword').prop('disabled', false);
            // }
            if (search_campaign) {
                $('#search_campaign').prop('checked', true);
            }
            if(ec12_back_po == 'search-po' && login_back == true){
                result_search.pop();
            }
            localStorage.setItem('result_search', JSON.stringify(result_search));
            riot.mount('search-result', {results: last_search.product_list,total:last_search.total, tag: 'search/simple-po'});
            thisTag.backToTop();
            var $pagination = $('#pagination');
            var totalPages = Math.ceil(last_search.total/$('#limit').val());
            $pagination.twbsPagination('destroy');
            $pagination.twbsPagination({
                totalPages: totalPages,
                visiblePages: 5,
                startPage: result_search_page,
                initiateStartPageClick: false,
                onPageClick: function (event, page) {
                    var url = URL_API + '/v1/get_product_ec102';
                    // var dis_keyword = false;
                    // dis_keyword = $('#keyword').prop('disabled');
                    var keyword = $('#keyword').val();
                    var search_supplier_code = $('#supplier_code').val();
                    var search_name_jp = $('#name').val();
                    var search_maker_name = $('#maker_name').val();
                    var search_cas_code = $('#search_cas_code').val();
                    var no_type = $('#no_type').val();
                    var name_type = $('#name_type').val();
                    var lstSuggest = new Array();
                    var checkKeyword = trimSpaces(keyword).split(/[ 　]/);
                    if (checkKeyword.length >= 6) {
                        alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                        return;
                    }
                    if (search_supplier_code != null) {
                        var checkKeyword = trimSpaces(search_supplier_code).split(/[ 　]/);
                        if (checkKeyword.length >= 6) {
                            alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                            return;
                        }
                    }
                    if (search_name_jp != null) {
                        var checkKeyword = trimSpaces(search_name_jp).split(/[ 　]/);
                        if (checkKeyword.length >= 6) {
                            alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                            return;
                        }
                    }
                    $('.multi_select').find('p').each(function(index, el) {
                        var lstText = $(this).text();
                        lstSuggest.push(lstText);
                    });
                    if (search_maker_name != null && search_maker_name != '') {
                        lstSuggest.push(search_maker_name);
                    }
                    var query = [];
                    query.push('token=' + accessTokenCognito);
                    query.push('page=' + page);
                    query.push('limit=' + $('#limit').val());
                    if (keyword) {
                    // if (keyword && !dis_keyword) {
                        query.push('keywords=' + encodeURIComponent(keyword));
                    }
                    // if (panel == 'panel_2') {
                        if (search_supplier_code) {
                            query.push('search_supplier_code=' + encodeURIComponent(search_supplier_code));
                        }
                        if (search_name_jp) {
                            query.push('search_name_jp=' + encodeURIComponent(search_name_jp));
                        }
                        if (lstSuggest.length > 0) {
                            query.push('search_maker_name=' + encodeURIComponent(JSON.stringify((lstSuggest))));
                        }
                        if (search_cas_code) {
                            query.push('search_cas_code=' + encodeURIComponent(search_cas_code));
                        }
                        if (search_supplier_code && no_type) {
                            query.push('no_type=' + encodeURIComponent(no_type));
                        }
                        if (search_name_jp && name_type) {
                            query.push('name_type=' + encodeURIComponent(name_type));
                        }
                    // }
                    if ($('#search_campaign').is(':checked')) {
                        query.push('search_campaign=true');
                    }
                    if (ec10_cas_code) {
                        query.push('cas_value=' + ec10_cas_code);
                    }
                    url += '?' + query.join('&');
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (data) {
                            if(data.status == 100){
                                riot.mount('app','maintain',{ messege:data.messege });
                                return false;
                            }
                            if(data.http == 400){
                                alert(data.message);
                                return false;
                            }
                            thisTag.total = data.total;
                            ec10_total_page_po = data.total;
                            var total = data.total;
                            var results = data.product_list;
                            var newArray = [];
                            data.page = page;
                            data.keyword = keyword;
                            data.search_supplier_code = search_supplier_code;
                            data.search_name_jp = search_name_jp;
                            data.search_maker_name = lstSuggest;
                            data.search_cas_code = search_cas_code;
                            data.no_type = no_type;
                            data.name_type = name_type;
                            data.search_campaign = false;
                            if ($('#search_campaign').is(':checked')) {
                                data.search_campaign = true;
                            }
                            newArray = JSON.parse(localStorage.getItem('result_search')) ? JSON.parse(localStorage.getItem('result_search')) : [];
                            if (Array.isArray(newArray)) {
                                newArray.push(data);
                            } else {
                                newArray = [];
                            }
                            // newArray.push(data);
                            localStorage.setItem('result_search', JSON.stringify(newArray));
                            // localStorage.setItem('result_search', JSON.stringify(data));
                            // localStorage.setItem('result_search_page', page);
                            riot.mount('search-result', {results: results,total:total, tag: 'search/simple-po'});
                            thisTag.backToTop();
                        },
                        error: function (xhr, stt, error) {
                            alert('error');
                        }
                    });
                }
            });
        }
        submit = function (e) {
            $('#ec27-Open').show();
            if(ec10_current_search == 'search-po'){
                ec12_back_po = 'search-po';
            }
            // var dis_keyword = false;
            // dis_keyword = $('#keyword').prop('disabled');
            var keyword = $('#keyword').val();
            var search_supplier_code = $('#supplier_code').val();
            var search_name_jp = $('#name').val();
            var search_maker_name = $('#maker_name').val();
            var search_cas_code = $('#search_cas_code').val();
            var no_type = $('#no_type').val();
            var name_type = $('#name_type').val();
            var checkKeyword = trimSpaces(keyword).split(/[ 　]/);
            if (checkKeyword.length >= 6) {
                alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                return;
            }
            if (search_supplier_code != null) {
                var checkKeyword = trimSpaces(search_supplier_code).split(/[ 　]/);
                if (checkKeyword.length >= 6) {
                    alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                    return;
                }
            }
            if (search_name_jp != null) {
                var checkKeyword = trimSpaces(search_name_jp).split(/[ 　]/);
                if (checkKeyword.length >= 6) {
                    alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                    return;
                }
            }
            if (keyword != null && keyword != '') {
                var test = keyword.replace(/[-()/&=[\]\\><{}、。，・：；／＼‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＞＜－＆＝@#＠＃?？_|~～"\',]/g, '');
                if(test == '') {
                    alert('記号のみでの検索はできません。');
                    return;
                }
            }
            if (search_supplier_code != null && search_supplier_code != '') {
                var test = search_supplier_code.replace(/[-()/&=[\]\\><{}、。，・：；／＼‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＞＜－＆＝@#＠＃?？_|~～"\',]/g, '');
                if(test == '') {
                    alert('記号のみでの検索はできません。');
                    return;
                }
            }
            if (search_name_jp != null && search_name_jp != '') {
                var test = search_name_jp.replace(/[-()/&=[\]\\><{}、。，・：；／＼‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＞＜－＆＝@#＠＃\?？_\|~～"\',]/g, '');
                if(test == '') {
                    alert('記号のみでの検索はできません。');
                    return;
                }
            }
            if (search_maker_name != null && search_maker_name != '') {
                var test = search_maker_name.replace(/[-()/&=[\]\\><{}、。，・：；／＼‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＞＜－＆＝@#＠＃?？_|~～"\',]/g, '');
                if(test == '') {
                    alert('記号のみでの検索はできません。');
                    return;
                }
            }
            if (search_cas_code != null && search_cas_code != '') {
                var test = search_cas_code.replace(/[-()/&=[\]\\><{}、。，・：；／＼‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＞＜－＆＝@#＠＃?？_|~～"\',]/g, '');
                if(test == '') {
                    alert('記号のみでの検索はできません。');
                    return;
                }
            }

            if (e) {
                ec10_cas_code = '';
                thisTag.total = 1;
                ec10_po_current_page = 1;
                ec10_total_page_po = 1;
            }
            var lstSuggest = new Array();
            $('.multi_select').find('p').each(function(index, el) {
                var lstText = $(this).text();
                lstSuggest.push(lstText);
            });
            if (search_maker_name != null && search_maker_name != '') {
                lstSuggest.push(search_maker_name);
            }
            // var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : '';
            var $pagination = $('#pagination');
            var totalPages = Math.ceil(ec10_total_page_po/$('#limit').val());
            $pagination.twbsPagination('destroy');
            $pagination.twbsPagination({
                totalPages: totalPages,
                visiblePages: 5,
                startPage: ec10_po_current_page,
                onPageClick: function (event, page) {
                    ec10_limit_on_page = $('#limit').val();
                    ec10_po_current_page = page;
                    var url = URL_API + '/v1/get_product_ec102';
                    var query = [];
                    query.push('token=' + accessTokenCognito);
                    query.push('page=' + page);
                    query.push('limit=' + $('#limit').val());
                    if (keyword) {
                    // if (keyword && !dis_keyword) {
                        query.push('keywords=' + encodeURIComponent(keyword));
                    }
                    // if (panel == 'panel_2') {
                        if (search_supplier_code) {
                            query.push('search_supplier_code=' + encodeURIComponent(search_supplier_code));
                        }
                        if (search_name_jp) {
                            query.push('search_name_jp=' + encodeURIComponent(search_name_jp));
                        }
                        if (lstSuggest.length > 0) {
                            query.push('search_maker_name=' + encodeURIComponent(JSON.stringify((lstSuggest))));
                        }
                        if (search_cas_code) {
                            query.push('search_cas_code=' + encodeURIComponent(search_cas_code));
                        }
                        if (search_supplier_code && no_type) {
                            query.push('no_type=' + encodeURIComponent(no_type));
                        }
                        if (search_name_jp && name_type) {
                            query.push('name_type=' + encodeURIComponent(name_type));
                        }
                    // }
                    if (ec10_cas_code) {
                        query.push('cas_value=' + ec10_cas_code);
                    }
                    if ($('#search_campaign').is(':checked')) {
                        query.push('search_campaign=true');
                    }
                    console.log(query)
                    // write in storage
                    ec10_keyword = keyword;
                    // end write
                    url += '?' + query.join('&');
                    $.ajax({
                        type: 'GET',
                        url: url,
                        timeout: 60000,
                        success: function (data, text) {
                            notFoundResult(data.total);
                            if(data.status == 100){
                                riot.mount('app','maintain',{ messege:data.messege });
                                return false;
                            }
                            if(data.http == 400){
                                alert(data.message);
                                return false;
                            }
                            thisTag.total = data.total;
                            var total = data.total;
                            var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : '';
                            ec10_total_page_po = total;
                            var results = data.product_list;
                            var newArray = [];
                            data.page = page;
                            data.panel = panel;
                            data.keyword = keyword;
                            data.search_supplier_code = search_supplier_code;
                            data.search_name_jp = search_name_jp;
                            data.search_maker_name = lstSuggest;
                            data.search_cas_code = search_cas_code;
                            data.no_type = no_type;
                            data.name_type = name_type;
                            data.search_campaign = false;
                            if ($('#search_campaign').is(':checked')) {
                                data.search_campaign = true;
                            }
                            newArray = JSON.parse(localStorage.getItem('result_search')) ? JSON.parse(localStorage.getItem('result_search')) : [];
                            if (Array.isArray(newArray)) {
                                newArray.push(data);
                            } else {
                                newArray = [];
                            }
                            // newArray.push(data);
                            localStorage.setItem('result_search', JSON.stringify(newArray));
                            // localStorage.setItem('result_search_page', page);
                            riot.mount('search-result', {results: results,total:total, tag: 'search/simple-po'});
                            thisTag.backToTop();
                            var totalPages = Math.ceil(data.total/$('#limit').val());
                            var $pagination = $('#pagination');
                            $pagination.twbsPagination('destroy');
                            $pagination.twbsPagination({
                                totalPages: totalPages,
                                visiblePages: 5,
                                initiateStartPageClick: false,
                                startPage: ec10_po_current_page,
                                onPageClick: function (event, page) {

                                    ec10_po_current_page = page;
                                    // console.log(ec10_po_current_page);
                                    var url = URL_API + '/v1/get_product_ec102';
                                    // var dis_keyword = false;
                                    // dis_keyword = $('#keyword').prop('disabled');
                                    var keyword = $('#keyword').val();
                                    var search_supplier_code = $('#supplier_code').val();
                                    var search_name_jp = $('#name').val();
                                    var search_maker_name = $('#maker_name').val();
                                    var search_cas_code = $('#search_cas_code').val();
                                    var no_type = $('#no_type').val();
                                    var name_type = $('#name_type').val();
                                    var checkKeyword = trimSpaces(keyword).split(/[ 　]/);
                                    if (checkKeyword.length >= 6) {
                                        alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                                        return;
                                    }
                                    if (search_supplier_code != null) {
                                        var checkKeyword = trimSpaces(search_supplier_code).split(/[ 　]/);
                                        if (checkKeyword.length >= 6) {
                                            alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                                            return;
                                        }
                                    }
                                    if (search_name_jp != null) {
                                        var checkKeyword = trimSpaces(search_name_jp).split(/[ 　]/);
                                        if (checkKeyword.length >= 6) {
                                            alert('検索パフォーマンスを維持するため候補値を5つ以下にして検索をお願いします');
                                            return;
                                        }
                                    }
                                    var lstSuggest = new Array();
                                    $('.multi_select').find('p').each(function(index, el) {
                                        var lstText = $(this).text();
                                        lstSuggest.push(lstText);
                                    });
                                    if (search_maker_name != null && search_maker_name != '') {
                                        lstSuggest.push(search_maker_name);
                                    }
                                    var query = [];
                                    query.push('token=' + accessTokenCognito);
                                    query.push('page=' + ec10_po_current_page);
                                    query.push('limit=' + $('#limit').val());
                                    if (keyword) {
                                    // if (keyword && !dis_keyword) {
                                        query.push('keywords=' + encodeURIComponent(keyword));
                                    }
                                    // if (panel == 'panel_2') {
                                        if (search_supplier_code) {
                                            query.push('search_supplier_code=' + encodeURIComponent(search_supplier_code));
                                        }
                                        if (search_name_jp) {
                                            query.push('search_name_jp=' + encodeURIComponent(search_name_jp));
                                        }
                                        if (lstSuggest.length > 0) {
                                            query.push('search_maker_name=' + encodeURIComponent(JSON.stringify((lstSuggest))));
                                        }
                                        if (search_cas_code) {
                                            query.push('search_cas_code=' + encodeURIComponent(search_cas_code));
                                        }
                                        if (search_supplier_code && no_type) {
                                            query.push('no_type=' + encodeURIComponent(no_type));
                                        }
                                        if (search_name_jp && name_type) {
                                            query.push('name_type=' + encodeURIComponent(name_type));
                                        }
                                    // }
                                    if (ec10_cas_code) {
                                        query.push('cas_value=' + ec10_cas_code);
                                    }
                                    if ($('#search_campaign').is(':checked')) {
                                        query.push('search_campaign=true');
                                    }

                                    url += '?' + query.join('&');
                                    $.ajax({
                                        url: url,
                                        type: 'GET',
                                        success: function (data) {
                                            if(data.status == 100){
                                                riot.mount('app','maintain',{ messege:data.messege });
                                                return false;
                                            }
                                            if(data.http == 400){
                                                alert(data.message);
                                                return false;
                                            }
                                            thisTag.total = data.total;
                                            ec10_total_page_po = data.total;
                                            var total = data.total;
                                            var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : '';
                                            var results = data.product_list;
                                            var newArray = [];
                                            data.page = page;
                                            data.panel = panel;
                                            data.keyword = keyword;
                                            data.search_supplier_code = search_supplier_code;
                                            data.search_name_jp = search_name_jp;
                                            data.search_maker_name = lstSuggest ;
                                            data.search_cas_code = search_cas_code;
                                            data.no_type = no_type;
                                            data.name_type = name_type;
                                            data.search_campaign = false;
                                            if ($('#search_campaign').is(':checked')) {
                                                data.search_campaign = true;
                                            }
                                            newArray = JSON.parse(localStorage.getItem('result_search')) ? JSON.parse(localStorage.getItem('result_search')) : [];
                                            if (Array.isArray(newArray)) {
                                                newArray.push(data);
                                            } else {
                                                newArray = [];
                                            }
                                            // newArray.push(data);
                                            localStorage.setItem('result_search', JSON.stringify(newArray));
                                            // localStorage.setItem('result_search', JSON.stringify(data));
                                            // localStorage.setItem('result_search_page', page);
                                            riot.mount('search-result', {results: results,total:total, tag: 'search/simple-po'});
                                            thisTag.backToTop();
                                        },
                                        error: function (xhr, stt, error) {
                                            alert('error');
                                        }
                                    });
                                }
                            });
                        },
                        error: function (xhr, stt, error) {
                            alert('error');
                        }
                    });
                }
            });
        }
        $(function() {
            $('.show_maker').on('click',function(){
                var list_combine = sortArray(thisTag.list_combine, 'maker_name_eng');
                riot.mount('maker-popup',{list_combine : list_combine, default_char : ''});
                $('#maker_show').fadeIn();
            });
            $('#ec27-Open').on('click',function(){
                $('#img-loader').hide();
                var accessTokenCognito = localStorage.getItem('accessTokenCognito');
                var status = 0;
                var status_cud = 'Y';
                var cusUseCode1 = [];
                var cusUseCode2 = [];
                var dealer = [];
                var screen = 'ec31';
                var customer_use_code_1 = ['customer_use_code_1','customer_use_code_2'];
                // var customer_use_code_2 = 'customer_use_code_2';
                var url = URL_API + '/api/ec31/customer_use_code?token=' + accessTokenCognito + '&status=' + status_cud + '&field=' + customer_use_code_1;
                var url_dealer = URL_API + '/api/get_dealer_customers_ec27?token=' + accessTokenCognito
                // var url2 = URL_API + '/api/customer_use_code?token=' + accessTokenCognito + '&status=' + status_cud + '&field=' + customer_use_code_2;

                $.ajax({
                    url: url_dealer,
                    type: 'GET',
                    timeout: 60000,
                    async:false,
                    success: function (data) {
                        if(data.status == 100){
                            riot.mount('app','maintain',{ messege:data.messege });
                            return false;
                        }
                        if(data.status == 'not_authorize'){
                            var url = "#";
                            $(location).attr("href", url );
                            return false;
                        }
                        // console.log(data);
                        dealer = data.dealer;
                        // console.log(cusUseCode1);
                        // console.log(cusUseCode2);
                    },
                    error: function (xhr, stt, err) {
                        alert('error');
                    }
                });

                $.ajax({
                    url: url,
                    type: 'GET',
                    timeout: 60000,
                    async:false,
                    success: function (data) {
                        if(data.status == 100){
                            riot.mount('app','maintain',{ messege:data.messege });
                            return false;
                        }
                        if(data.status == 'not_authorize'){
                            var url = "#";
                            $(location).attr("href", url );
                            return false;
                        }
                        // console.log(data);
                        cusUseCode1 = data.cus_user_code_list[0];
                        cusUseCode2 = data.cus_user_code_list[1];

                        // console.log(cusUseCode1);
                        // console.log(cusUseCode2);
                    },
                    error: function (xhr, stt, err) {
                        alert('error');
                    }
                });
                riot.mount('ec27',{cus_use_code_1: cusUseCode1, cus_use_code_2: cusUseCode2, dealer: dealer});
                $('#ec27-form').fadeIn();
            });
            $('#maker_name').autocomplete({
                open: function( event, ui ) {
                    return event.target.value;
                },
                source: function( request, response  ) {
                  var convertMatcher3 = '';
                  if (request.term.length > 0) {
                    convertMatcher3 = new RegExp("^" + $.ui.autocomplete.escapeRegex( mb_convert_kana(request.term, 'RNSKHC')), 'i');
                  }
                  var convertMatcher = request.term.replace(/[\uff01-\uff5e]/g,function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xfee0); });
                  convertMatcher = new RegExp("^" + $.ui.autocomplete.escapeRegex ( convertMatcher ), "i" );
                  var convertMatcher2 = new RegExp("^" + $.ui.autocomplete.escapeRegex ( request.term.toFullWidth() ), "i" );
                  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex ( request.term ), "i" );
                  response( $.grep( JSON.parse(JSON.stringify(thisTag.suggest_list)), function( item ){
                      return  convertMatcher2.test(item) || convertMatcher3.test(item) || convertMatcher.test(item) || matcher.test( item );
                  }) );
                },
                select: function( event, ui ) {
                    $('#maker_name').val('');
                    $('.multi_select').append('<p>'+ui.item.value+'<i class="fa fa-times x-multi_select-search" aria-hidden="true"></i></p>');
                    return false;
                }
            });
            // $('#maker_name').autocompleter({
            //     limit : 10,
            //     source: thisTag.suggest_list,
            //     combine: function(params) {
            //         alert(params);
            //         return;
            //     },
            //     callback : function(val, index, object) {
            //         console.log(val)
            //         console.log(index)
            //         console.log(object)
            //         $('.multi_select').append('<p>'+val+'<i class="fa fa-times x-multi_select-search" aria-hidden="true"></i></p>');
            //         $('#maker_name').val('');
            //         return false;
            //     }
            // });
            $(document).on('click', '.x-multi_select-search', function() {
                $(this).parent().remove();
            });
            $('.reset-btn').on('click', function() {
                $('.multi_select').find('p').remove();
                clearTypeSearch();
            })
            var panel = JSON.parse(localStorage.getItem('data-panel')) ? JSON.parse(localStorage.getItem('data-panel')) : 'panel_1';
            localStorage.setItem('data-panel', JSON.stringify(panel));
            /* tab & panel */
            // $('.tab').on('click',function(){
            //     var keyword = $('#keyword').val();
            //     var search_supplier_code = $('#supplier_code').val();
            //     var search_name_jp = $('#name').val();
            //     var search_maker_name = $('#maker_name').val();
            //     var search_cas_code = $('#search_cas_code').val();
            //     var no_type = $('#no_type').val();
            //     var name_type = $('#name_type').val();
            //     if(!$(this).hasClass('active')){
            //         /*tab*/
            //         $('.tab').removeClass('active');
            //         $(this).addClass('active');
            //         /*panel*/
            //         var panel = $(this).attr('data-panel');
            //         localStorage.setItem('data-panel', JSON.stringify(panel));
            //         if (panel == 'panel_2') {
            //             $('#keyword').prop('disabled', true);
            //             $('#supplier_code').val(search_supplier_code);
            //             $('#name').val(search_name_jp);
            //             $('#maker_name').val(search_maker_name);
            //             $('#search_cas_code').val(search_cas_code);
            //             $('#no_type').val(no_type);
            //             $('#name_type').val(name_type);
            //             if(WIDTH_DEVICE < 768){
            //                 riot.mount('search-result-mobile', { tag: 'search/simple-po'});
            //             } else {
            //                 riot.mount('search-result', { tag: 'search/simple-po'});
            //             }
            //             var $pagination = $('#pagination');
            //             $pagination.twbsPagination('destroy');
            //         } else {
            //             $('#keyword').prop('disabled', false);
            //             $('#keyword').val(keyword);
            //             $('#keyword').prop('disabled', false);
            //             if(WIDTH_DEVICE < 768){
            //                 riot.mount('search-result-mobile', { tag: 'search/simple-po'});
            //             } else {
            //                 riot.mount('search-result', { tag: 'search/simple-po'});
            //             }
            //             var $pagination = $('#pagination');
            //             $pagination.twbsPagination('destroy');
            //         }
            //         $('.panel').removeClass('active');
            //         $('#' + panel).addClass('active');
            //     }
            // });
        });
        String.prototype.toHalfWidth = function() {
            return this.replace(/[Ａ-Ｚａ-ｚ０-９ァ-ン]/g, function(s) {return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)});
        };

        String.prototype.toFullWidth = function() {
            return this.replace(/[A-Za-z0-9\uFF65-\uFF9F]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 0xFEE0)});
        };
    </script>
</search-po>
