<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <%@include file="/views/common.jsp" %>
    <script src="../js/packery.pkgd.min.js"></script>
    <script src="../js/draggabilly.pkgd.min.js"></script>
</head>
<style>
    h2 {
        margin: 20px;
        margin-left: 10px;
        font-size: 26px;
        font-weight: bold
    }

    p {
        margin: 16px;
        font-size: 16px
    }

    a {
        color: -webkit-link;
        text-decoration: none;
        font-weight: bold
    }

    .price-layout-page {
        background: #eeeeee;
        padding: 18px;
    }
</style>
<body class="price-layout-page">
<input type="hidden" value="${ sessionScope.USER_SESSION.sysStatus }" id="sysStatus"></span>
<div class="layui-col-md8" style="padding: 10px;">
    <div style="background: white; padding: 7px;">
        <div style="display: flex;justify-content: space-between">
            <h2>报价需知:</h2>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="copyUrl">复制链接</button>
        </div>
        <hr>
        <span style="color: red; margin-left: 10px;">含有以下需求的产品不接</span>
        <p>1、含有反对宪法确定的基本原则内容的;</p>
        <p>2、含有危害国家统一、主权和领土完整内容的(如:台独,港独,疆独等);</p>
        <p>3、含有泄露国家秘密、危害国家安全或者损害国家荣誉和利益内容的;</p>
        <p>4、含有煽动民族仇恨、民族歧视，破坏民族团结或者侵害民族风俗、习惯内容的;</p>
        <p>5、含有宣扬邪教内容的;</p>
        <p>6、含有扰乱、破坏社会稳定和秩序内容的(如:代开发票等);</p>
        <p>7、含有宣扬赌博、暴力或者教唆犯罪内容的;</p>
        <p>8、含有侮辱、诋毁或者诽谤他人，侵害他人合法权益的;</p>
        <p>9、含有涉黄的名片或不干胶、彩页不接内容的(如:有明显诱惑、酒店上门服务、找美女帅哥、会所休闲喝茶、养生SPA、高端养生、私人订制暗示等）;</p>


        <hr class="layui-bg-red">

        <div>
            <h3 style="text-align: center">
                <a href="${pageContext.request.contextPath}/file/领淘报价系统操作手册.docx">点击下载《操作手册》</a>
            </h3>
        </div>
        <div style="margin-bottom: 0;">
            <!-- <button class="layui-btn layui-btn-normal" onclick="videoClick()">查看视频</button> -->
            <span style="color: red;">推荐使用谷歌浏览器;其他浏览器请先切换成 “极速模式”</span>
        </div>
        <div>
            <div class="grid" style="width:1194px;height: 889px;background-color: #000">
                <div class="grid-item" data-width="70" data-height="66"
                     style="width:70px;height: 66px;background-color: #fff"></div>
                <div class="grid-item" data-width="70" data-height="86"
                     style="width:70px;height: 86px;background-color: #fff"></div>
                <div class="grid-item" data-width="70" data-height="77"
                     style="width:70px;height: 77px;background-color: #fff"></div>
                <div class="grid-item" data-width="70" data-height="90"
                     style="width:70px;height: 90px;background-color: #fff"></div>
            </div>
        </div>
        <!-- 注册后，看完视频显示答题按钮，答题通过后不显示 || 超管 -->
        <!-- <c:if test="${sessionScope.USER_SESSION.sysStatus == 1
						  or sessionScope.USER_SESSION.role eq '1' 
						  or sessionScope.USER_SESSION.role.contains('1,') }">
				<div id="layerDemo" style="margin-bottom: 0;">
					<button class="layui-btn layui-btn-normal" onclick="testClick()">开始答题</button>
				</div>
			</c:if> -->
    </div>
</div>
<div class="layui-col-md4" style="padding: 7px;">
    <div style="background: white; padding: 7px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend style="color:red;"><h1>更新日志:</h1></legend>
        </fieldset>
        <!-- 渲染到这 -->
        <div id="view"></div>
    </div>
</div>
</body>

<script id="logInfo" type="text/html">
    {{# layui.each(d.data.list, function(index, item){  }}
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">
                    {{item.addTimeStr}}
                </h3>
                <p>
                    {{item.content}}
                </p>
            </div>
        </li>
    </ul>
    {{# });  }}
</script>
<script>
    console.log(window.parent.system_isPdd)
    /* function videoClick(){
        //iframe层
        layer.open({
            type: 2,
            title: '产品知识短视频介绍',
            maxmin: true,
            // 点击遮罩关闭
            shadeClose: false,
            area: ['90%', '95%'],
            skin:'layui-layer-molv',
            content: './videoPaper.jsp' //iframe的url
        });
        // 新用户登陆展示
        if($("#sysStatus").val() == 0){
            layer.open({
                zIndex: layer.zIndex, // 层级最高，重点1
                 title: '温馨提示',
                 skin:'layui-layer-molv',
                 content: '<br>检测到当前用户为新用户，请<span style="line-height: 22px;color:red;font-weight:bold">持续看完</span>当前为您播放的<span style="line-height: 22px;color:red;">【4】</span>个视频后，进入下一步',
                  success: function(layero){
                     layer.setTop(layero); //重点2
                   }
            });
        }
    } */
    /* function testClick(){
        //iframe层
        layer.open({
            type: 2,
            title: '产品知识',
            // 点击遮罩关闭
            shadeClose: false,
            maxmin: true,
            area: ['100%', '100%'],
            skin:'layui-layer-molv',
            //content: './testPaper.jsp' //iframe的url
            content: './information.jsp' //iframe的url
        });
    } */
    let $grid = $('.grid')
    $grid.packery({
        // options
        itemSelector: '.grid-item',
        gutter: 1,
        columnWidth: 2
    });
    $grid.find('.grid-item').each(function (i, gridItem) {
        let draggie = new Draggabilly(gridItem);
        // bind drag events to Packery
        $grid.packery('bindDraggabillyEvents', draggie);
    });
    $grid.on('click', '.grid-item', function (event) {
        // change size of item by toggling large class
        let width = $(event.currentTarget).data("width");
        let height = $(event.currentTarget).data("height");
        $(event.currentTarget).data("width", height);
        $(event.currentTarget).data("height", width);
        $(event.currentTarget).css("width", height);
        $(event.currentTarget).css("height", width);
        // trigger layout after item size changes
        $grid.packery('shiftLayout');
    });
    layui.use(['form', 'laytpl', 'layer'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl;
        form.render();

        //获取后台数据后渲染
        $.ajax({
            url: "${pageContext.request.contextPath}/getUpdateLogs",
            datatype: "json",
            type: "GET",
            async: false,//关闭异步，否则popover组件无法渲染出值
            context: document.body,
            success: function (data) {
                var getTpl = document.getElementById('logInfo').innerHTML,
                    view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
                form.render();
            }
        })

        function getUuid() {
            return 'xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
                var r = (Math.random() * 16) | 0,
                    v = c == 'x' ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        }

        document.getElementById('copyUrl').onclick = function () {
            var copyipt = document.createElement("input");
            // var text = "https://upload.lingtao8.com/upload_file/?name=" + getUuid();
            var text = "https://file.lingtao8.com/?tid=" + getUuid();
            copyipt.setAttribute("value", text);
            document.body.appendChild(copyipt);
            copyipt.select();
            document.execCommand("copy");
            document.body.removeChild(copyipt);
            layer.msg("复制成功");
        }

    });
</script>

</html>