<meta charset="utf-8">
<script src="//cdn.daifazhu.com/kb/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="//cdn.daifazhu.com/kb/js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.daifazhu.com/kb/js/layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="//cdn.daifazhu.com/kb/js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/css/cascade.css?v=23" media="all">

<style>
    body,
    div {
        margin: 0;
        padding: 0;
    }

    body {
        /*width: 1070px;*/
        /*margin: 0 auto;*/
    }

    .main {
        background-color: #F5F5F5;
    }

    .main .header {
        width: 100%;
        height: 15%;
        /*margin: 0px 5px 5px 5px;*/
        background-color: #FFF;
    }

    .main .body {
        margin-top: 10px;
        height: 80%;
        display: flex;
        background-color: #F5F5F5;
    }

    .main .body .left {
        width: 10%;
        font-size: 10px;
        font-weight: 300;
        display: flex;
        background-color: #FFF;
    }

    .main .body .left .data-money {
        background-color: #eee;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        text-align: justify;
        word-break: break-all;
    }

    .main .body .left .data-rate {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .main .body .left .data-rate div {
        margin-right: 5px;
    }

    .main .body .left .subText {
        /*display: flex;*/
        margin-bottom: 10px;
    }

    .main .body .left .data-count {
        /*background-color: #EDF9FF;*/
        margin-top: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        text-align: center;
        word-break: break-all;
        flex-direction: column;
    }

    .main .body .middle {
        margin-left: 0.5%;
        margin-right: 0.5%;
        width: 89%;
        font-size: 10px;
        font-weight: 200;
        background-color: #FFF;
    }

    .ad_msg {
        color: white;
        position: absolute;
        width: 88%;
        left: 1%;
        background-color: #9933E5;
        height: 25px;
        line-height: 25px;
        font-weight: bold;
        font-size: 15px;
    }


    .main .body .right {
        width: 10%;
        background-color: #FFF;
    }

    .main .body .right .ys_ads {
        display: flex;
        flex-direction: column;
    }

    .main .body .right .ys_ad {
        margin-top: 5px;
    }

    .main .foot {
    }

    #toolPage {
        text-align: center;
    }

    /* 覆盖样式 layui*/

    .layui-tab-brief > .layui-tab-title .layui-this,
    .layui-tab-brief > .layui-tab-title .layui-this:after,
    .layui-tab-brief > .layui-tab-more li.layui-this:after {
        color: #3aadff !important;
        border-bottom: 2px solid #3aadff !important;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #3aadff !important;
    }

    .layui-laypage a:hover {
        color: #3aadff !important;
    }

    .layui-icon {
        cursor: pointer;
    }

    ::-webkit-scrollbar {
        width: 3px;
        height: 5px;
    }

    ::-webkit-scrollbar-button,
    ::-webkit-scrollbar-button:vertical {
        display: none;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track:vertical {
        background-color: black;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: #f5f5f5;
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:vertical {
        margin-right: 10px;
        background-color: #a6a6a6;
    }

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:vertical:hover {
        background-color: #aaa;
    }

    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-corner:vertical {
        background-color: #535353;
    }

    ::-webkit-scrollbar-resizer,
    ::-webkit-scrollbar-resizer:vertical {
        background-color: #ff6e00;
    }

    /*通用样式*/

    .f-red {
        color: red;

    }

    .w-50 {
        width: 50px;
    }


    .content {
        /*margin-top: 30px;*/
    }



    /*.item .tool {*/
    /*    padding-top: 10px;*/
    /*}*/


    a, a:hover {
        text-decoration: none !important;
    }

    p.zk,p.zd {
        border: none !important;
        justify-content: center !important;
        cursor: pointer;
        margin: 0 !important;
        line-height: 12px !important;
        color: #7b7878;
    }
    .more{
        /*display: none !important;*/
    }
    .show{
        display: block !important;
    }
    .back_to_old,.go_to_help {
        background-color: #eee !important;
        color: #1a1a1a !important;
        margin-top: 5px;
        width: 100px;
        font-size: 18;

    }
    .chat-div {
        position: fixed;
        right: 0.5%;
        bottom: 8%;
        background-color: #f5f5f5;
    }
    .chat-div .slide_box {
        /*width: 154px;*/
        height: auto;
        overflow: hidden;
        font-size: 12px;
        text-align: center;
        line-height: 130%;
        color: #666;
        border: 2px solid #76b8ea;
    }
    .chat-div .slide_box p {
        text-align: center;
        padding: 2px;
        margin: 2px;
        border-bottom: 1px solid #ddd;
    }
    .weixin{
        width: 90px;
    }
    ul.body_right{
        display: inline;

    }
</style>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278969742'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1278969742%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
<div class="main">
    <div class="header layui-carousel" id="topbanner">
        <div carousel-item>
            <div>
                <a href="javascript:openUrl('#')" target="_blank">
                    <img src="/aticles/2019-11-12/13580_428b017442534cc0.png" alt="" width="100%" height="100%">
                </a>
            </div>
            <div>
                <a href="javascript:openUrl('#')" target="_blank">
                    <img src="/aticles/2019-11-12/13580_162b2061b2084b0a.png" alt="" width="100%" height="100%">
                </a>
            </div>
            <div>
                <a href="javascript:openUrl('#')" target="_blank">
                    <img src="/aticles/2019-11-12/13580_c1d16e4ece534d43.png" alt="" width="100%" height="100%">
                </a>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="middle">
            <div class="content">
                <div id="wrapper">
                    <!-- 品牌列表开始 -->
                    <div class="brand-list">
                        <div class="brand-bd cle" id="brand-waterfall">
                        </div>
                    </div>
                    <!-- 品牌列表 end -->
                </div>
            </div>


        </div>
        <div class="right">
            <div style="text-align: center;">
                <button onclick="openUrl('/CkController/help')" class="layui-btn layui-btn-s go_to_help">工具教程</button>
            </div>
        </div>
        <div class="foot"></div>
    </div>
</div>
<div class="chat-div">
    <div class="slide_box" id="chatDiv">
        <div style="background: #76b8ea;height: 15px;padding: 5px;"><span style="margin:5px;color: #FFFFFF;font-size: 14px;">在线客服</span></div>
        <p>
            <img src="http://777nn.cn/aticles/2019-09-03/13580_3a1f46442b3b481e.jpg" class="weixin" alt="微信扫码咨询"><br>
            <b>微信扫码咨询</b>
        </p>
    </div>
</div>
<script id="toolList" type="text/html">
    <div class="item">
        <div class="type">{{= groupTypeStr}}</div>
        {{each(i, item) tools}}
        <!--如果大于五项添加展开-->
        <p class="tool {{if i>4 }}more{{/if}}" {{if i>4 && groupType!=5 }}style="display:none"{{/if}} >
            {{if isEmpty(item.tutorial) }}
            <span style="padding-right: 20px"></span>
            {{else}}
            <i class="layui-icon layui-icon-video" title="教程" onclick="javascript:openUrl('{{= item.tutorial}}')"></i>
            {{/if}}
            {{if id==30 }}
            <i class="layui-icon layui-icon-read" title="文档教程"
               onclick="javascript:openUrl('//cdn.daifazhu.com/uploadVisitor/tools/jiaocheng.docx')" style="position: relative; left: 11px;"
            ></i>
            {{/if}}
            <span class="tool_title">
                  {{if id<0 }}
                                   <a href="javascript:openUrl('{{= downloadUrl}}')"
                      title="{{= item.title}}" style="color:red" >{{= subStr(item.title,9)}}</a>
                  {{else}}
                   <a href="javascript:openTool('{{= id}}','{{= status}}','{{= type}}','{{= targetVersion}}','{{= downloadUrl}}')"
                      title="{{= item.title}}">{{= subStr(item.title,9)}}</a>
                  {{/if}}
            </span>
            {{if id >0 }}
                {{if item.opType == 2 }}
                <i class="layui-icon layui-icon-star-fill" title="取消收藏" style="color: #ffb800 !important;"
                   onclick="javascript:doOp(-1,'{{= id}}')"
                ></i>
                {{else}}
                <i class="layui-icon layui-icon-star-fill" title="收藏" style="color: #999 !important;"
                   onclick="javascript:doOp(2,'{{= id}}')"
                ></i>
                {{/if}}
            {{/if}}

        </p>
        {{if i>4 && (tools.length-1) == i && groupType!=5}}
        <p class="zk">
            <span title="点击展开更多">展开更多</span>
        </p>
        {{/if}}
        {{/each}}
    </div>
</script>
<!--VIP{{= level}}软件-->
<script src="/js/cascade.js" type="text/javascript" charset="utf-8"></script>
<script>

    var departId = "13580";
    var layer = layer || {};

    //初始化相关配置项
    function initConfig() {
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'carousel', 'layer'], function () {
            layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            layer = layui.layer;
            //建造实例
            carousel.render({
                elem: '#topbanner'
                , width: '100%' //设置容器宽度
                , arrow: 'hover' //始终显示箭头
                , anim: 'fade' //切换动画方式
                , height: "100px"
                , indicator: "inside"
            });

            $(document).ajaxStart(function () {
                layer.ready(function () {
                    layer.load(0, {
                        shade: 0.1
                    })
                })
            });
            $(document).ajaxStop(function () {
                layer.close(layer.load());
            });
        });
    }

    $(document).ready(function () {
        initConfig();
        loadToolData();
    })


    function loadToolData() {
        var contentObj = $("#brand-waterfall");
        var sid = "";
        try {
            sid = ClientObj.getSid();
        } catch (e) {

        }

        $.post("/CkController/toolList", {sid: sid}, function (response) {
            if (response.isOk) {
                contentObj.empty();
                var dataArray = response.res;
                if (dataArray === undefined || dataArray == null || dataArray.length <= 0) {
                    var html = '' +
                            '<div class="tool">' +
                            "暂未找到任何神器,亲再等等,我们马上杀个技术祭天。" +
                            '</div>';
                    contentObj.html(html);
                } else {
                    //进行数据分组
                    var toolArr = groupTool(response.res);
                    var html = $("#toolList").tmpl(toolArr);
                    contentObj.html(html);
                    $('#brand-waterfall').cascade();
                }


            }
        })
    }

    function printNavsJson() {
        var sid = "";
        try {
            sid = ClientObj.getSid();
        } catch (e) {

        }

        $.post("/CkController/toolList", {sid: sid}, function (response) {
            if (response.isOk) {
                var dataArray = response.res;
                if (dataArray === undefined || dataArray == null || dataArray.length <= 0) {
                    console.log("没有工具")
                } else {
                   //进行数据分组
                   var toolArr = navsTool(response.res);
                   console.log(JSON.stringify(toolArr))
                }


            }
        })
    }

    function groupTool(res) {
        //根据不同的type分组
        var toolGroups = new Map;
        var usedType = new Array();
        for (var i = 0; i < res.length; i++) {

            var tool = res[i];
            var groupType = tool.groupType;
            if (usedType.indexOf(groupType) > -1) {
                //找到类别进行分类存储
                toolGroups.get(groupType).push(tool);
            } else {
                var newGroup = [];
                newGroup.push(tool);
                toolGroups.set(groupType, newGroup);
                //记录下插入的位置
                usedType.push(groupType);
            }

        }


        var showAutoOrder=departId =="16140"||departId =="15650"||departId =="10450"||departId =="10340"||departId =="13640"||departId =="10830" ;
        //组装成array
        var dataArr = [];
        toolGroups.forEach(function (values, key) {
            var tempOb = {};
            tempOb.groupType = key;
            tempOb.groupTypeStr = values[0].groupTypeStr;
            if (key==5&&showAutoOrder){
                //
                var tool= {};
                tool.id=-1;
                tool.title="【自动下单】代发";
                if (departId =="16140") {
                    tool.downloadUrl = "https://tb.cn/bsTx50w";
                }else if (departId =="15650") {
                    tool.downloadUrl = "https://tb.cn/re6x50w";
                }else if (departId =="10450") {
                    tool.downloadUrl = "https://tb.cn/tcew50w";
                }else if (departId =="10340"||departId =="10830") {
                    tool.downloadUrl = "https://tb.cn/2yJw50w";
                }else if (departId =="13640") {
                    tool.downloadUrl = "https://tb.cn/cM7w50w";
                }

                values.push(tool)
            }
            tempOb.tools = values;
            dataArr.push(tempOb);
        })

        dataArr.sort(compareA("groupType"));
        console.log(dataArr)
        return dataArr;
    }

    function navsTool(res) {
        //根据不同的type分组
        var toolGroups = new Map;
        var usedType = new Array();
        for (var i = 0; i < res.length; i++) {
            if (res[i].tutorial==null) continue;
            var tool = res[i];
            var groupType = tool.groupType;
            if (usedType.indexOf(groupType) > -1) {
                //找到类别进行分类存储
                toolGroups.get(groupType).push(tool);
            } else {
                var newGroup = [];
                newGroup.push(tool);
                toolGroups.set(groupType, newGroup);
                //记录下插入的位置
                usedType.push(groupType);
            }

        }

        //组装成array
        var dataArr = [];
        toolGroups.forEach(function (values, key) {
            var tempOb = {};
            tempOb.groupType = key;
            tempOb.groupTypeStr = values[0].groupTypeStr;
            tempOb.tools = values;
            dataArr.push(tempOb);
        })



        dataArr.sort(compareA("groupType"));

        //组装成合适的数据
        var navJson={};
        var contentManagement=new Array();

        for (var i = 0; i < dataArr.length; i++) {
            var tempOb = {};
            var tools=dataArr[i].tools;
            var childrens=new Array();
            for (var j = 0; j < tools.length; j++) {
                var tool=tools[j];
                var children= {};
                children.title = tool.title;
                children.icon = "&#xe6ed;";
                children.spread = false;
                children.href = tool.tutorial;
                childrens.push(children);
            }
            tempOb.title = dataArr[i].groupTypeStr;
            tempOb.icon = "&#xe630;";
            tempOb.spread = false;
            tempOb.children = childrens;
            contentManagement.push(tempOb);
        }
        navJson.contentManagement=contentManagement;

        console.log(JSON.stringify(navJson))
    }

    function compareA (property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }

    function doOp(opType, toolId) {
        var sid = "";
        try {
            sid = ClientObj.getSid();
        } catch (e) {

        }
        $.post("/CkController/recOp", {sid: sid, toolId: toolId, opType: opType}, function (response) {
            if (response.isOk) location.reload();
            layer.msg(response.msg, {icon: response.isOk ? 6 : 5})
        })

    }

    //打开网页版应用
    function openUrl(url) {
        try {
            //处理相对路径问题
            if (url[0] == ("/")) {
                url = "http://" + window.location.host + url;
            }
            ClientObj.openUrl(url);
        } catch (e) {
            window.open(url)
        }
    }

    //下载插件
    function down(type, url) {

        try {
            ClientObj.download(type);
        } catch (e) {
            window.open(url)
        }
    }

    //打开插件
    function openPlugin(type,url) {
        try {
            ClientObj.open(type);
        } catch (e) {
            window.open(url)
        }
    }

    //更新插件
    function updatePlugin(type,url) {
        try {
            ClientObj.update(type);
        } catch (e) {
            window.open(url)
        }
    }

    //检测本地是否已下载该插件
    function isDown(type) {
        try {
            var existPlugin = ClientObj.localInfo();
            if (existPlugin.indexOf('"type":' + type) > -1) {
                return true;
            }
            return false;
        } catch (e) {
            console.log(e)

            // window.open(url)
        }
        return false;
    }

    //检测是否是新版本
    function isLastVersion(type, v) {
        try {
            var existPlugin = ClientObj.localInfo();
            var local = '"type":' + type + ',"targetVersion":"' + v;
            if (existPlugin.indexOf(local) > -1) {
                return true;
            }
            return false;
        } catch (e) {
            console.log(e)
        }
        return false;
    }


    function getClientTitle() {
        try {
            return ClientObj.getClientTitle();
        } catch (e) {
            return "";
        }
    }

    function isTxm() {
        try {
            return ClientObj.isTxm;
        } catch (e) {
            return false;
        }
    }

    function isEmpty(e) {
        return e == null || e == "" || e == undefined;
    }

    /**
     * 根据客户端版本显示插件
     */
    function isShowTool(availableZHVersion) {
        var version = "3.6.3.8";
        try {
            version = ClientObj.getversion();
        } catch (e) {
            console.log(e)
        }
        return version.localeCompare(availableZHVersion) >= 0;
    }

    function subStr(str, length) {
        if (str.length > length) {
            str = str.substr(0, length);
        }
        return str;
    }

    $(document).on("click",".zk",function () {
        $(this).siblings(".more").toggle(150);
        callResize();
        $(this).text("折叠").removeClass("zk").addClass("zd");

    })
    $(document).on("click",".zd",function () {
        $(this).siblings(".more").toggle(150);
        callResize();
        $(this).text("展开更多").removeClass("zd").addClass("zk");


    })

    $(document).on("click",".back_to_old",function () {
        location.href="/CkController/indexOld";
    })

    function callResize() {
        setTimeout(function () {
            window.dispatchEvent(new Event('resize'))
        },250)
    }


    function reloadTool(){
        loadToolData(1,10);
    }

    function openTool(id,status,type,targetVersion,downloadUrl) {

        if(status==1 || status == 8){
            if (isDown(type)==false) {
                down(type,downloadUrl);
                return;
            }
            if (isLastVersion(type,targetVersion)==false){
                //进行更新 后打开
                updatePlugin(type,downloadUrl);
                return;
            }
        }

        openPlugin(type,downloadUrl);
    }

    
    function finishDownload(type,downloadUrl) {
        layer.closeAll();
        // openPlugin(type,downloadUrl);
    }


</script>
