<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('编辑商品标签')" />
    <style>
        .custom-btn {
            cursor: pointer;
        }
    </style>
</head>
<body class="white-bg">
    <input id="prodId" th:value="${prodId}" type="hidden">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row" id="ibox-container">
        </div>
    </div>
    <!-- 设置快递单类型区域 -->
    <script id="addNewTagDiv" type="text/template">
        <div class="col-sm-12 select-table table-striped">
            <table id="newTag-table"></table>
        </div>
    </script>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "master/product/prodTag";
        var prodTagVoList = [[${prodTagVoList}]];
        prodTagVoList.forEach(item => {
            var card = "<div class='col-sm-1'><div class='ibox'><div class='ibox-title'><i class='fa fa-remove pull-right custom-btn' onclick='removeTag(" + item.id + ")'></i><h5>"+item.tagName+"</h5></div></div></div>";
            $("#ibox-container").append(card);
        });
        var newTagcard = "<div class='col-sm-1'><div class='ibox'><div class='ibox-title custom-btn' onclick='addNewTag()'><h5>添加新标签</h5></div></div></div>";
        $("#ibox-container").append(newTagcard);

        $("#form-prod-edit").validate({
            focusCleanup: true
        });

        function removeTag(prodTagId) {
            var data = {
                "prodId": $("#prodId").val(),
                "id": prodTagId,
            };
            $.operate.post(prefix + "/remove", data, refreshTab);
        }

        function refreshTab() {
            location.reload();
        }

        function addNewTag() {
            var content = $('#addNewTagDiv').html();
            layer.open({
                type: 1,
                fix: false,
                maxmin: false,
                shade: 0.3,
                area: ['600px', '480px'],
                title: '添加标签',
                // 弹层外区域关闭
                shadeClose: true,
                success: function(layero, index){
                    var addTagOptions = {
                        id: "newTag-table",
                        url: ctx + "master/tag/list",
                        showSearch: false,
                        showRefresh: false,
                        showColumns: false,
                        showToggle: false,
                        pagination: false,
                        modalName: "用户避雷标签",
                        columns: [
                            {
                                checkbox: true
                            },
                            {
                                field: 'tagName',
                                title: '标签'
                            }
                        ]
                    };
                    $.table.init(addTagOptions);
                },
                content: content,
                btn: ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-remove"></i> 关闭'],
                btn1: function() {
                    var tagIds = $.table.selectColumns("tagId");
                    var url = prefix + "/addTags";
                    var data = {
                        "prodId": $("#prodId").val(),
                        "tagIds": tagIds,
                    };

                    $.post(url, data, function(result) {
                        if (result.code === web_status.SUCCESS) {
                            $.modal.closeAll();
                            $.modal.enable();
                            $.modal.alertSuccess("添加成功。");
                            refreshTab();
                        } else if (result.code === web_status.WARNING) {
                            $.modal.closeAll();
                            $.modal.enable();
                            $.modal.alertWarning(result.msg)
                        } else {
                            $.modal.closeAll();
                            $.modal.enable();
                            $.modal.alertError(result.msg);
                        }
                    });
                    layer.closeAll();
                }
            });
        }
    </script>
</body>
</html>
