<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <:include file="./common/title.html" websiteName="商店首页 - ${website.websiteName}" keywords="${website.keywords}"
              description="${website.description}" favicon="${website.favicon}" shop="${shop}"/>
    <link rel="stylesheet" href="${ctxPath}/default/css/index.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/js/swiper/swiper-bundle.min.css"/>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6844461225129292"
            crossorigin="anonymous"></script>
    <style>
        .no-content {
            padding: 60px 0 55px;
            text-align: center;
            color: #999;
            border-radius: 5px;
        }

        .no-content .no-content-img {
            width: 150px;
            margin: 0 auto 20px;
            display: block;
        }

        .no-content .user-no-contents {
            margin-bottom: 0;
            padding-bottom: 15px;
            text-align: center;
            font-size: 18px;
            color: #c8c8c8;
        }

        .user-w-logon p {
            text-align: initial;
        }
    </style>
</head>
<body>

<!-- header -->
<:include file="./common/header.html" websiteName="${website.websiteName}"
          websiteLogo="${website.websiteLogo}"/>

<!-- goods-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
            <:if test="${carouselList != []}">
                <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
                    <!-- Swiper -->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <:for items="${carouselList}" var="item">
                                <div class="swiper-slide">
                                    <:if test="${item.imageLogo== null || item.imageLogo==''}">
                                        <a href="${item.link}"
                                           style="height: 100%; background-image: url(../theme/default/images/carousel_logo.png);">
                                            <div class="swiper-text">
                                                <h2>${item.title}</h2>
                                            </div>
                                        </a>
                                    </:if>
                                    <:if test="${item.imageLogo != null && item.imageLogo != ''}">
                                        <a href="${item.link}"
                                           style="height: 100%; background-image: url(${item.imageLogo!});">
                                            <div class="swiper-text">
                                                <h2>${item.title}</h2>
                                            </div>
                                        </a>
                                    </:if>
                                </div>
                            </:for>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </:if>

            <div class="layui-card widget-mission-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
                <div class="widget-mission-footer">
                    <div style="position: relative; padding: 15px; border-top: 1px solid #f6f6f6;">
                        <i class="layui-icon layui-icon-search layui-icon-screen-show"></i>
                        <input id="screen-product1" placeholder="请输入商品名称" class="layui-input screen-input"
                               lay-verify="required" required/>
                    </div>
                </div>
            </div>

            <!-- goods-card -->
            <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
                <div class="layui-card-header">
                    选择分类
                </div>
                <div class="layui-card-body" style="padding: 15px 15px;">
                    <div class="layui-row layui-col-space15 classify-type" id="classifyList">

                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15" id="goodsList" style="padding: 1px 0;">
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 zlian-is-user-widget">
            <div class="user-widget-content">
                <div>
                    <div class="user-w-logon" style="padding: 0; border-bottom: 0px solid transparent;">
                        <div class="layui-card-header">
                            购物须知
                            <a class="zlian-help-center pull-right" href="${ctxPath}/article">
                                文章教程
                                <i class="layui-icon" style="transform: rotate(-0deg);">&#xe602;</i>
                            </a>
                        </div>
                        <div class="layui-card-body zlian-body-div">
                            <div class="zlian-body-info">
                                ${shop.storeDetails}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-mission-footer">
                    <div style="position: relative; padding: 15px; border-top: 1px solid #f6f6f6;">
                        <i class="layui-icon layui-icon-search layui-icon-screen-show"></i>
                        <input id="screen-product" placeholder="请输入商品名称" class="layui-input screen-input"
                               lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="layui-card is-col-xs12-991"
                 style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%); margin-top: 15px">
                <div class="layui-card-header">
                    推荐商品
                </div>
                <div class="layui-card-body" style="padding: 15px 15px;">
                    <div class="layui-row layui-col-space15">
                        <:for items="${hotProductList}" var="item">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="b2-widget-post-thumb box-in b2-radius">
                                    <div class="b2-widget-post-thumb-product-img">
                                        <:if test="${item.image == null || item.image == ''}">
                                            <img class="lazy loaded" src="../theme/default/images/commodity.svg">
                                        </:if>
                                        <:if test="${item.image != null && item.image != ''}">
                                            <img class="lazy loaded" src="${item.image!}">
                                        </:if>
                                    </div>
                                    <div class="b2-widget-post-title">
                                        <h2>${item.name}</h2>
                                        <div class="products-price red">
                                            ￥
                                            <:if test="${item.price == '0.00'}">免费</:if>
                                            <:if test="${item.price != '0.00'}">${item.price}</:if>
                                        </div>
                                    </div>
                                    <a ref="nofollow" class="link-overlay" href="${ctxPath}/product/${item.link}"></a>
                                </div>
                            </div>
                        </:for>
                        <:if test="${hotProductList == []}">
                            <div class="no-content">
                                <img src="/theme/default/images/error_ic_empty.png" class="no-content-img">
                                <p class="user-no-contents">暂无商品</p>
                            </div>
                        </:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<:include file="./common/footer.html" websiteName="${website.websiteName}" beianIcp="${website.beianIcp}"/>
<!-- footer -->
<:include file="./common/footer-menu-home.html"/>
<!-- 项目模板 -->
<script type="text/html" id="classifyItem">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
        <div class="project-list-item {{#  if(d.andIncrement === 0){ }}active{{#  } }} " data-id="{{d.id}}"
             lay-filter="classifySubmit" lay-submit>
            <div class="project-list-item-body">
                <div class="item-title"
                     style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 600;">
                    {{d.name}}
                </div>
                <div class="project-list-item-text">
                    商品数量： {{d.productsMember}}
                </div>
            </div>
        </div>
    </div>
</script>

<!-- 项目模板 -->
<script type="text/html" id="productItem">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        <div class="item-in box b2-radius">
            <div class="post-module-thumb" style="padding-top: 100%;">
                <a href="${ctxPath}/product/{{d.link}}" rel="nofollow" class="thumb-link">
                    <picture class="picture">
                        <img src="{{# if(d.imageLogo == null || d.imageLogo == ''){ }}../theme/default/images/commodity.svg{{# } }}  {{# if(d.imageLogo != null){ }} {{d.imageLogo}} {{# } }}"
                             class="post-thumb lazy">
                    </picture>
                </a>
            </div>
            <div class="post-info">
                <h2>
                    <a href="${ctxPath}/product/{{d.link}}">{{d.name}}</a>
                </h2>
                <div class="post-list-meta-box">
                    <div class="post-list-cat b2-radius">
                        <span style="color: #F56C6C; font-size: 15px">¥ {{d.price}}</span>
                    </div>
                </div>
                <div class="list-footer">
                    <a href="${ctxPath}/product/{{d.link}}" class="post-list-meta-avatar">
                        <span>库存: {{d.cardMember}}</span>
                    </a>
                    <span>
                    {{# if(d.isCoupon >= 1){ }}<span style="color: #67C23A">券</span>{{# } }}
                    {{# if(d.restricts >= 1){ }}<span style="color: #F56C6C">限购</span>{{# } }}
                    {{# if(d.isWholesale === 1){ }}<span style="color: #E6A23C">折扣</span>{{# } }}
                    </span>
                </div>
            </div>
        </div>
        <div class="product-tag">
            {{# if(d.shipType == 0){ }}<span class="el-tag el-tag&#45;&#45;light">自动发货</span>{{# } }}
            {{# if(d.shipType == 1){ }}<span class="el-tag el-tag&#45;&#45;success el-tag&#45;&#45;danger">手动发货</span>{{#
            } }}
        </div>
        {{# if(d.cardMember == 0){ }}
        <div class="ribbon-two ribbon-two-danger"><span>售罄</span></div>
        {{# } }}
    </div>
</script>

<!-- js部分 -->
<:include file="./common/js.html"/>
<script type="text/javascript" src="${ctxPath}/assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/jquery.cookie.js"></script>
<!-- Swiper JS -->
<script type="text/javascript" src="${ctxPath}/assets/js/swiper/swiper-bundle.min.js"></script>

<script>
    layui.use(['layer', 'form', 'notice', 'dataGrid'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var dataGrid = layui.dataGrid;
        var classifysListJson = JSON.parse('${classifysListJson!}');
        var classifyId;
        var shopSettingsJson = JSON.parse(JSON.stringify(${shopSettings!}));

        if (shopSettingsJson.isWindow == 1) {
            var isWindow = $.cookie('isWindow');
            if ($.cookie("isWindow") != 'yes') {
                //示范一个公告层
                layer.open({
                    type: 1,
                    title: '站点公告',
                    closeBtn: false,
                    area: '300px;',
                    shade: 0.4,
                    id: 'LAY_layuipro',
                    btn: ['我知道啦'],
                    btnAlign: 'c',
                    moveType: 1,
                    content: '<div style="padding: 20px; font-size: 16px; font-family: Content-font, Roboto, sans-serif; font-weight: 400;">' + shopSettingsJson.windowText + '</div>',
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.click(function () {
                            /*var date = new Date();
                            date.setTime(date.getTime() + (5 * 1000));*/
                            $.cookie('isWindow', 'yes', {expires: 1});
                        })
                    }
                });
            }
        }

        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
            },
            autoplay: true
        });

        // 分类点击事件
        $('.pay-type-group>div').click(function () {
            $('.pay-type-group>div').removeClass('active');
            $(this).addClass('active');
        });

        var list = classifysListJson;
        var classifyHtml = '';
        if (list.length != 0) {
            classifyId = list[0].id;
            dataGrid.render({
                elem: '#classifyList',
                templet: '#classifyItem',
                data: list
            });
        } else {
            classifyHtml = '' +
                '<div style="text-align: center; padding: 30px;">' +
                '   <div style="letter-spacing: 1.5px; position: relative; height: 40px; line-height: 50px; display: inline-block; font-size: 18px; color: #888; padding-left: 36px; background-size: 32px; background-position: 0 19px; background-repeat: no-repeat;">' +
                '       <img src="/theme/default/images/no.svg" style="top: 11px; width: 50px; margin-right: 10px; left: 0;">' +
                '       <span>暂无分类</span>' +
                '   </div>' +
                '</div>';
            $("#classifyList").html(classifyHtml);
        }

        // 点击事件
        $('.classify-type>div .project-list-item').click(function () {
            $('.classify-type>div .project-list-item').removeClass('active');
            $(this).addClass('active');
        });

        if (classifyId != undefined && classifyId != '') {
            dataGrid.render({
                elem: '#goodsList',
                templet: '#productItem',
                url: '/getProductList',
                where: {classifyId: classifyId},
                loadMore: {limit: 12, class: 'datagrid-page-goodsList', noText: "商品内容为空"}  // 开启加载更多
            });
        }

        /* 表单提交 */
        form.on('submit(classifySubmit)', function () {
            classifyId = $('.classify-type>div .project-list-item.active').data('id');
            dataGrid.render({
                elem: '#goodsList',
                templet: '#productItem',
                url: '/getProductList',
                where: {classifyId: classifyId},
                loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
            });
        });

        $(document).ready(function (e) {
            $("#screen-product").keyup(function (e) {
                var content = $(this).val(); // 获取到搜索框输入的内容
                dataGrid.render({
                    elem: '#goodsList',
                    templet: '#productItem',
                    url: '/getProductList',
                    where: {classifyId: classifyId, name: content},
                    loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
                });
            });
        });

        $(document).ready(function (e) {
            $("#screen-product1").keyup(function (e) {
                var content = $(this).val(); // 获取到搜索框输入的内容
                dataGrid.render({
                    elem: '#goodsList',
                    templet: '#productItem',
                    url: '/getProductList',
                    where: {classifyId: classifyId, name: content},
                    loadMore: {limit: 12, class: 'datagrid-page-goodsList'}  // 开启加载更多
                });
            });
        });

    });
</script>
</body>
</html>