<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('店铺列表')" />
    <style>
        .layui-layer-btn0, .layui-layer-btn1 {
            font-size: 12px;
            font-weight: normal;
            margin: 0 3px;
            margin-right: 7px;
            margin-left: 7px;
            padding: 0 15px;
            color: #fff;
            border: 1px solid #0064b6;
            background: #0071ce;
            border-radius: 3px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            vertical-align: middle;
            background-repeat: no-repeat;
            text-decoration: none;
            outline: none;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }
        .layui-layer-btn1 {
            color: #404a58;
            border: 1px solid #c0c4cd;
            background: #fff;
            border-radius: 3px;
            margin-left: 0;
        }
        .layui-layer-btn0:hover {
            color: #fff;
        }
        #addClassify {
            display: none;
            width: 540px;
            padding-top: 20px;
        }
        #addClassify .selectClassify {
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        #addClassify .selectClassify label {
            display: flex;
            margin-right: 20px;
            align-items: center;
        }
        #addClassify .selectClassify label input {
            margin: 0;
            margin-right: 2px;
        }
        .shadeCss,.layui-layer-shade {
            background-color: rgb(0, 0, 0, 0.5) !important;
        }
        .selectClassifyOne {
            display: flex;
            align-items: center;
            margin-top: 12px;
            padding: 0 20px;
        }
        .selectClassifyOne span {
            width: 90px;
        }
        .bottomBtn {
            margin-top: 20px;
            text-align: right;
            padding: 10px 15px 12px;
            background: #f0f4f7;
            border-top: 1px #c7c7c7 solid;
        }
    </style>
</head>
<body class="store">
    <div class="container-div">
        <div class="row">

            <div class="btn-group-sm" id="toolbar">
                <a class="btn btn-success" id="button-open-10">
                    <i class="fa fa-plus"></i> 创建分类
                </a>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
            <div id="addClassify">
                <div class="selectClassify">
                    <span>分类选择：</span>
                    <label>
                        <input type="radio" checked value="1" id="optionsRadios1" name="optionsRadios"><span>一级</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>二级</span></label>
                    <label>
                        <input type="radio" value="3" id="optionsRadios1" name="optionsRadios"><span>三级</span></label>
                </div>
                <div class="selectClassifyOne">
                    <span>一级分类：</span>
                    <input class="form-control" type="text">
                </div>
                <div class="selectClassifyOne">
                    <span>二级分类：</span>
                    <input class="form-control" type="text">
                </div>
                <div class="selectClassifyOne">
                    <span>三级分类：</span>
                    <input class="form-control" type="text">
                </div>
                <div class="bottomBtn">
                    <a src="javascript:;" class="layui-layer-btn0 paddings" onclick="yes(1,2)">确定</a>
                    <a class="layui-layer-btn1 layui-layer-btn1" onclick="closeModal()">取消</a>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:inline="javascript">
        var dicCouponBusiType = [[${@dict.getType('zhengzai_coupon_busi_type')}]];
        var dicCouponBindType = [[${@dict.getType('zhengzai_coupon_bind_type')}]];
        var prefix = ctx + "candy/coupon/mgt";
        var prefix2 = ctx + "local";

        var viewMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:detail')}]];
        var cancelMgtCouponFlag = [[${@permission.hasPermi('candy:coupon:mgt:cancel')}]];

        var couType = [[${couType}]];

        $(function () {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add/{id}",
                detailUrl: prefix2 + "/shopDetail",
                removeUrl: prefix + "/cancel/{id}",
                // updateUrl: prefix + "/edit/{id}",
                // exportUrl: prefix + "/export",
                onCheck: onCheck,
                sortName: "createdAt",
                sortOrder: "desc",
                modalName: "代金券",
                columns: [
                    {
                        checkbox: true
                    },
                    {
                        field: 'valFace',
                        title: '一级分类',
                        formatter: function (value, row, index) {
                            $('input[name=btSelectAll]').hide();
                            if (index%2 == 0) {
                                setTimeout(()=>{
                                    $('input[data-index='+index+']').hide();
                                }, 100)
                            }
                            return '¥' + value;
                        }
                    },
                    {
                        field: 'bindType',
                        title: '二级分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(dicCouponBindType, value);
                        }
                    },
                    {
                        field: 'bindType',
                        title: '三级分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(dicCouponBindType, value);
                        }
                    },
                    {
                        field: 'bindType',
                        title: '关联商品数量',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(dicCouponBindType, value);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return `<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="del('${row.itemId}', 7, '确定下架此商品吗？')">删除</a>`
                        }
                    }]
            };
            $.table.init(options);
        });
        $("#button-open-10").click(function(){
	    	layer.open({
                type: 1,
                shade: true,
                title: '创建分类', //不显示标题
                content: $('#addClassify'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function(res){
                    console.log(res, '111')
                    // layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
                }
    		});
	    })
        function onCheck (row, $element) {
            console.log(row, $element)
        }
        function yes(index, layero) {
            console.log(index, layero)
            closeModal ()
        }
        function closeModal () {
            $(".layui-layer-close1").click();
        }
        function del(id, status, notice) {
            $.modal.confirm(notice, function() {
                $.ajax({
                    type: 'put',
                    url: '/stone/item/change/status',
                    data: {
                        itemId: id,
                        status
                    },
                    success:function(e) {
                        layer.msg("操作成功！")
                        $("button[name=refresh]").click()
                    }
                })
            });
        }
    </script>
</body>
</html>