{{#partial "page"}}
{{inject 'comparisons' comparisons}}
{{inject 'compareRemoveMessage' (lang 'compare.no_remove')}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</h1>
<div class="page">
    <main class="page-content">

        <table class="compareTable">
            <tr class="compareTable-row">
                <th class="compareTable-heading"></th>
                {{#each comparisons}}
                <th class="compareTable-product">
                    <article class="card">
                        <figure class="card-figure">
                            <a class="card-figure__link" aria-label="{{name}}" href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
                                <div class="card-img-container">
                                    {{> components/common/responsive-img
                                        image=image
                                        class="card-image"
                                        fallback_size=../theme_settings.product_size
                                        lazyload=../theme_settings.lazyload_mode
                                        default_image=../theme_settings.default_image_product
                                    }}
                                </div>
                            </a>
                            <a class="compareTable-removeProduct" data-comparison-remove href="{{#if remove_url}}{{remove_url}}{{else}}#{{/if}}">
                                <svg class="icon">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
                                </svg>
                            </a>
                        </figure>
                        <div class="card-body">
                            {{#if brand.name}}
                                <p class="card-text"><a href="{{brand.url}}">{{ brand.name }}</a></p>
                            {{/if}}
                            <h3 class="card-title">
                                <a href="{{url}}">{{ name }}</a>
                            </h3>
                            {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
                                {{#if price_range}}
                                    {{> components/products/price-range}}
                                {{else}}
                                    {{> components/products/price price=price}}
                                {{/if}}
                            {{else}}
                                {{> components/common/login-for-pricing}}
                            {{/or}}
                        </div>
                    </article>
                </th>
                {{/each}}
            </tr>
            <tr class="compareTable-row">
                <th class="compareTable-heading"></th>
                {{#each comparisons}}
                    <td class="compareTable-action">
                        {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
                            {{#if show_cart_action}}
                                {{#if has_options}}
                                    <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                                {{/if}}
                                {{#if pre_order}}
                                    <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary" data-product-id="{{id}}">
                                        {{lang 'products.pre_order'}}
                                    </a>
                                {{/if}}
                                {{#if add_to_cart_url}}
                                    <a href="{{add_to_cart_url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary" data-product-id="{{id}}">
                                        {{lang 'products.add_to_cart'}}
                                    </a>
                                {{/if}}
                                {{#if out_of_stock_message}}
                                    <a href="{{url}}" class="button button--primary" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                                {{/if}}
                            {{/if}}
                        {{/or}}
                    </td>
                {{/each}}
            </tr>
            <tr class="compareTable-row">
                <th class="compareTable-heading">
                    <span class="compareTable-headingText">Description</span>
                </th>
                {{#each comparisons}}
                <td class="compareTable-item">{{{ summary }}}</td>
                {{/each}}
            </tr>
            {{#if settings.show_product_rating}}
                <tr class="compareTable-row">
                    <th class="compareTable-heading">
                        <span class="compareTable-headingText">Rating</span>
                    </th>
                    {{#each comparisons}}
                    <td class="compareTable-item">
                        {{#if rating}}
                            {{> components/products/ratings rating=rating}}
                        {{else}}
                            No Reviews
                    {{/if}}
                    </td>
                    {{/each}}
                </tr>
            {{/if}}
            <tr class="compareTable-row">
                <th class="compareTable-heading">
                    <span class="compareTable-headingText">Availability</span>
                </th>
                {{#each comparisons}}
                <td class="compareTable-item">
                    {{#if availability}}
                        {{ availability }}
                    {{else}}
                        {{lang 'common.not_applicable'}}
                    {{/if}}
                </td>
                {{/each}}
            </tr>
            <tr class="compareTable-row" >
                <th class="compareTable-heading" id="comparetr">
                    <span class="compareTable-headingText">{{lang 'common.other_details'}}</span>
                </th>
                <!-- {{#each comparisons}}
                    <td class="compareTable-item">
                        {{#if custom_fields}}
                            <ul>
                                {{#each custom_fields}}
                                    <li>{{name}}: {{{value}}}</li>
                                {{/each}}
                            </ul>
                        {{else}}
                            {{lang 'common.not_applicable'}}
                        {{/if}}
                    </td>
                {{/each}} -->
            </tr>
        </table>

    </main>
</div>
<script>
window.onload=function(){
    var  ids="{{#each comparisons}}{{id}},{{/each}}";
    //获取Spec
    fetch('/graphql', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer {{ settings.storefront_api.token }}'
                },
                body: JSON.stringify({
                    query: `
                    query metafields {
  site {
    products(entityIds: [`+ids.substring(0,ids.length-1)+`]) {
      edges {
        cursor
        node {
          id
          entityId
          name
          metafields(
            namespace: "Spec"
          ) {
            edges {
              node {
                key
                id
                value
              }
            }
          }
        }
      }
    }
  }
}
        `
                }),
            })
            .then(res => res.json())
            .then(json => {
                console.log(json);
                var edges = json.data.site.products.edges;;
               
                if(edges.length>0){
                    for(var h=edges.length-1;h>=0;h--){
                        var html="";
                        if(edges[h].node.metafields.edges.length>0){
                            var obj=JSON.parse(edges[h].node.metafields.edges[0].node.value);
                    var html="<td class='compareTable-item'><table id='"+edges[h].node.entityId+"' class='spcltable'>";
                    for(i in obj){
                        for(j in obj[i]){
                            html+="<tr><td>"+i+"</td>"+"<td>"+j+"</td>"+"<td>"+obj[i][j]+"</td></tr>";
                        }
                    }
                     html+="</table></td>";
                     $("#comparetr").after(html);
                     _w_table_rowspan("#"+edges[h].node.entityId,1);
                        }else{
                            html+="<td class='compareTable-item'>{{lang 'common.not_applicable'}}</td>";
                            $("#comparetr").after(html);
                        }
                    }
        
                }
               
            });
}
function _w_table_rowspan(_w_table_id,_w_table_colnum){
_w_table_firsttd = "";
_w_table_currenttd = "";
_w_table_SpanNum = 0;
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
_w_table_Obj.each(function(i){
if(i==0){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}
}
});
}
</script>
{{/partial}}
{{> layout/base}}