<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <?php $shoname_name = D('Home/Front')->get_config_by_name('shoname'); ?>
    <title><?php echo $shoname; ?></title>
    <link rel="shortcut icon" href="" />

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

    <link href="./resource/css/bootstrap.min.css?v=201903260001" rel="stylesheet">
    <!-- <link href="./resource/css/common.css?v=201903260001" rel="stylesheet"> -->
    <script type="text/javascript">
        window.sysinfo = {
        <?php if (!empty($_W['uniacid']) ){ ?>'uniacid': '{$_W['uniacid']}',<?php } ?>
        <?php if( !empty($_W['acid'])  ){ ?>'acid': '{$_W['acid']}',<?php } ?>
        <?php if (!empty($_W['openid']) ) { ?>'openid': '{$_W['openid']}',<?php } ?>
        <?php if( !empty($_W['uid']) ) {  ?>'uid': '{$_W['uid']}',<?php } ?>
        'isfounder': <?php if (!empty($_W['isfounder']) ) { ?>1<?php  }else{  ?>0<?php } ?>,
        'siteroot': '{$_W['siteroot']}',
        'siteurl': '{$_W['siteurl']}',
        'attachurl': '{$_W['attachurl']}',
        'attachurl_local': '{$_W['attachurl_local']}',
        'attachurl_remote': '{$_W['attachurl_remote']}',
        'module': {'url' : '<?php if( defined('MODULE_URL') ) { ?>{MODULE_URL}<?php } ?>', 'name' : '<?php if (defined('IN_MODULE') ) { ?>{IN_MODULE}<?php } ?>'},
        'cookie': {'pre': ''},
        'account': {:json_encode($_W['account'])},
      };
    </script>

    <script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./resource/js/lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="./resource/js/app/util.js?v=201903260001"></script>
    <script type="text/javascript" src="./resource/js/app/common.min.js?v=201903260001"></script>
    <script type="text/javascript" src="./resource/js/require.js?v=201903260001"></script>
    <script type="text/javascript" src="./resource/js/lib/jquery.nice-select.js?v=201903260001"></script>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link href="/static/css/snailfish.css" rel="stylesheet">
    <script>
		var random = Math.random();
		document.write('<link href="/static/css/diy/shopdiy.css?v=' + random + '" rel="stylesheet" type="text/css"/>');
	</script>
    <style>
        body {
            min-width: none;
            background: #fff;
        }
        .ns-calendar {
            background: url("https://v4.niuteam.cn/public/static/img/ns_calendar.png") no-repeat center / 16px 16px;
        }

        .layui-logo {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .layui-logo a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 50px;
        }

        .layui-logo a img {
            max-height: 100%;
            max-width: 100%;
        }

        .goods-preview .qrcode-wrap {
            max-width: 130px;
            max-height: 130px;
            overflow: hidden;
        }

        .goods-preview .qrcode-wrap input {
            margin-top: 30px;
        }

        @media only screen and (max-width: 1340px) {
            .layui-nav .layui-nav-item a {
                padding: 0 15px;
            }

            .layui-nav.ns-head-account .layui-nav-item a {
                padding: 0 20px;
            }
        }

        @media only screen and (max-width: 1200px) {
            .layui-nav .layui-nav-item a {
                padding: 0 10px;
            }

            .layui-nav.ns-head-account .layui-nav-item a {
                padding: 0 20px;
            }
        }

        @media only screen and (max-width: 920px) {
            .layui-nav .layui-nav-item a {
                padding: 0 5px;
            }

            .layui-nav.ns-head-account .layui-nav-item a {
                padding: 0 20px;
            }
        }

        @media only screen and (max-width: 1090px) {
            .ns-shop-ewm {
                display: none;
            }
        }

        .style_all {
            display: flex;
            margin: auto;
        }

        .styles {
            width: 48%;
            margin-right: 4%;
        }

        .styles:nth-child(2) {
            margin-right: 0;
        }

        .styles img {
            width: 100%;
            height: 200px;
            border: 2px #ccc solid;
            box-sizing: border-box;
        }

        .styles p {
            text-align: center;
            margin-top: 10px;
        }

        /* .layui-layer-content{padding-bottom:4px!important;} */
    </style>

    <style>
        .contraction {
            display: inline-block;
            margin-right: 5px;
        }

        .contraction span {
            cursor: pointer;
            display: inline-block;
            width: 17px;
            height: 17px;
            text-align: center;
            line-height: 14px;
            /* border: 1px solid #e9e9e9;*/
            user-select: none;
            /* background: #fff;*/
        }

        .sku-list {
            display: none;
            border-bottom: 1px solid #e6e6e6;
        }

        .sku-list td:nth-of-type(2) {
            display: flex;
            align-items: center;
        }

        .sku-list td {
            border-bottom: 0;
            padding: 5px 15px !important;
        }

        .select-goods .ns-screen .layui-colla-content {
            padding-left: 15px;
        }

        .select-goods {
            border-bottom: 1px solid #f2f2f2;
            height: 603px;
        }

        .select-goods .select-goods-left {
            width: 135px;
            margin: 20px;
            padding-right: 10px;
            border-right: 1px solid #f2f2f2;
            box-sizing: border-box;
            overflow-y: auto;
        }

        /* 滚动条整体部分*/
        .select-goods .select-goods-left::-webkit-scrollbar {
            width: 5px;
            background-color: #d0cdc7;
        }

        /* scroll轨道背景*/
        .select-goods .select-goods-left::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            background-color: #d0cdc7;
        }

        /* 滚动条中能上下移动的小块*/
        .select-goods .select-goods-left::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #a09d9d;
        }

        .select-goods .select-goods-left dl {
            height: auto;
            overflow: hidden;
        }

        .select-goods .select-goods-left dt,
        .select-goods .select-goods-left dd {
            position: relative;
            height: 32px;
            font-size: 12px;
            line-height: 32px;
            cursor: pointer;
        }

        .select-goods .select-goods-left dt {
            padding-left: 13px;
        }

        .select-goods .select-goods-left dd {
            padding-left: 20px;
        }

        .select-goods .select-goods-left dt:after {
            content: '';
            position: absolute;
            border: 4px solid transparent;
            border-right-color: #333;
            border-bottom-color: #333;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: all .3s;
        }

        .select-goods .select-goods-left dl.fold {
            height: 32px;
        }

        .select-goods .select-goods-left .fold dt:after {
            transform: translateY(-50%) rotate(-45deg);
        }

        .select-goods .select-goods-left .active {
            background-color: #f7f7f7;
        }

        .select-goods .select-goods-left .ns-text-color {
            background-color: transparent;
        }

        .select-goods .select-goods-right {
            padding-top: 20px;
            margin-right: 20px;
            margin-left: 20px;
        }

        .select-goods .select-goods-right .layui-table-body {
            height: 425px;
        }

        .select-goods .select-goods-right .ns-single-filter-box {
            padding: 0;
        }

        .select-goods .select-goods-right .ns-single-filter-box .layui-form {
            margin: inherit;
        }

        .select-goods .select-goods-right .ns-single-filter-box .layui-form div {
            margin: 0;
        }

        .select-goods .select-goods-classification {
            border: 0;
        }

        .select-goods .select-goods-classification .layui-colla-title {
            height: 32px;
            background-color: #fff;
            border: 0;
            line-height: 32px;
            font-size: 12px;
            padding-left: 15px;
        }

        .select-goods .select-goods-classification .layui-colla-title i {
            font-size: 0;
        }

        .select-goods .select-goods-classification .layui-colla-title.arrow.active:after {
            transform: rotate(0) translateY(-50%);
        }

        .select-goods .select-goods-classification .layui-colla-title.arrow:after {
            content: '';
            border: 4px solid #333;
            position: absolute;
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            left: 3px;
            top: 50%;
            transition: all .3s;
            transform: rotate(-45deg) translateY(-50%);
        }

        .select-goods .select-goods-classification .layui-colla-content {
            padding: 0;
            font-size: 12px;
            border-top: 0;
        }

        .select-goods .select-goods-classification .layui-colla-item {
            border: 0;
            font-size: 12px;
        }

        .select-goods .select-goods-classification .classification-item {
            cursor: pointer;
            border: 0;
            font-size: 12px;
        }

        .select-goods .select-goods-classification .select-goods-classification .classification-item {
            padding-left: 26px;
        }

        .select-goods .select-goods-classification .select-goods-classification .classification-item.arrow:after {
            left: 15px;
        }

        .select-goods .select-goods-classification .select-goods-classification .layui-colla-content.classification-item {
            padding-left: 38px;
        }

        .select-goods .select-goods-classification .classification-item:hover {
            background-color: #f7f7f7;
        }

        .ns-single-filter-box {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;
            padding: 14px 0;
            background-color: #fff;
        }

        .ns-single-filter-box .layui-form .layui-btn {
            border-color: #e6e6e6;
            padding: 0 10px;
        }

        .ns-single-filter-box .layui-form .layui-input + .layui-btn {
            height: 32px;
            line-height: 32px;
            position: absolute;
            right: 1px;
            top: 1px;
            border-width: 0;
            border-left-width: 1px;
        }

        .ns-table-title {
            display: flex;
            align-items: center;
        }

        .ns-table-title .ns-title-pic {
            flex-shrink: 0;
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-left: 5px;
        }

        .ns-table-title .ns-title-pic img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <div class="select-goods">
        <div class="select-goods-right">
            <!-- 筛选面板 -->
            <div class="ns-single-filter-box">
                <div></div>
                <div class="layui-form">
                    <div class="layui-input-inline">
                        <input type="text" name="promotion_name" placeholder="请输入活动名称" autocomplete="off"
                            class="layui-input">
                        <button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
                            <i class="layui-icon">&#xe615;</i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 列表 -->
            <table id="goods_list" lay-filter="goods_list"></table>
        </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script type="text/javascript">
		document.write('<script type="text/javascript" charset="utf-8" src="/static/js/diy/common.js?t="' + Math.random() + '><\/script>');
	</script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');

        layui.use(['layer', 'upload', 'element'], function () {});
    </script>


    <script type="text/html" id="checkbox">
        {{# if(d.selected){ }}
        <input type="checkbox" data-goods-id="{{d.id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox" checked>
        <input type="hidden" data-goods-id="{{d.id}}" name="old_goods_json" value='{:html_entity_decode($link)}' />
        {{# }else{ }}
        <input type="checkbox" data-goods-id="{{d.id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox">
        {{# } }}
        <input type="hidden" data-goods-id="{{d.id}}" name="goods_json" value='{{ JSON.stringify(d) }}' />
    </script>

    <!-- 专题信息 -->
    <script type="text/html" id="goods_info">
        <div class="ns-table-title">
            <div class="ns-title-pic" id="goods_img_{{d.id}}">
                <img layer-src src="{{d.image}}" />
            </div>
            <div class="ns-title-content">
                <a href="javascript:;" class="ns-multi-line-hiding ns-text-color" title="{{d.name}}">{{d.name}}</a>
            </div>
        </div>
    </script>

    <script>
	var select_id = "", //选中商品id
        select_list = "",
		disabled = "0", //不可选中
		goodsCols = [], //数据源
		filterData = {promotion_type: '',label_id: '',goods_name:''}, //筛选数据

		table, form,laytpl,element,
        goodsCols = [
            [
                {
                    unresize: 'false',
                    width: '8%',
                    templet: '#checkbox'
                },
                {
                    title: '活动名称',
                    unresize: 'false',
                    width: '92%',
                    templet: '#goods_info'
                }
            ]
        ]

	$(function () {
		layui.use(['form','laytpl','element'], function () {
			form = layui.form;
			laytpl = layui.laytpl;
			element = layui.element;

			table = new Table({
				elem: '#goods_list',
				url: "{:U('Marketing/special_select')}",
				cols: goodsCols,
				callback : function (res) {

					// 更新商品复选框状态
                    // for (var i=0;i<goodsIdArr.length;i++) {
                    //     var selected_goods = $("input[name='goods_checkbox'][data-goods-id='" + goodsIdArr[i] + "']");
                    //     if (selected_goods.length) {
                    //         $("input[name='goods_checkbox'][data-goods-id='" + goodsIdArr[i] + "']").prop("checked", true);
                    //     }
                    // }
					form.render();
				}
			});

			/**
			 * 监听搜索
			 */
			form.on('submit(search)', function (data) {
				filterData.name = data.field.name;
                if (data.field.promotion_name) filterData.promotion_name = data.field.promotion_name;
				table.reload({
					page: {
						curr: 1
					},
					where: filterData
				});
				return false;
			});


			// 勾选商品
			form.on('checkbox(goods_checkbox)', function(data) {
                if (data.elem.checked){
                    var goodsId = $("input[name='goods_checkbox']:checked").eq(0).attr("data-goods-id");
                    value = $("input[name='goods_json'][data-goods-id = "+ goodsId +"]").val();
                    old_value = $("input[name='old_goods_json'][data-goods-id = "+ goodsId +"]").val();

                    if(old_value) select_list = old_value.toString();
                    select_list = JSON.parse(value);

                    $("input[name='goods_checkbox']:checked").prop("checked",false);
                    $(data.elem).prop("checked",true);
                    form.render();
                } else {
                    select_list = "";
                }
			});
		});

	});

    function selectSpecial(callback) {
        var res = select_list;
        callback(res);
    }
    </script>
</body>

</html>