<?xml version="1.0" encoding="UTF-8"?>
<h:screen xmlns:h="http://www.hand-china.com/hap">
    <style>
        #tabstrip {
            box-shadow: 0px 0px 3px rgb(204, 204, 204) !important;
        }

        .add-span {
            width: 60px;
            height: 20px;
            line-height: 20px;
            border-radius: 2px;
            max-height: 32px;
            text-align: center;
            color: #fff;
            display: inline-block;
            overflow: hidden;
            background-color: #A0D469;
            cursor: pointer;
        }

        #treeList {
            height: 350px !important;
        }

        #treeList td, tr, th {
            border-width: 0px;
        }

        #tabstrip-1, #tabstrip-2 {
            height: 360px;
            width: 300px;
            overflow-y: hidden;
        }

        .k-grid-content {
            height: 255px !important;
        }

        .k-tabstrip > .k-content {
            border-style: hidden !important;
        }

        .k-panelbar .k-tabstrip-items .k-item, .k-tabstrip-items .k-item {
            border-left-style: hidden !important;
            border-right-style: hidden !important;
        }

        #tagGrid {
            height: 291px !important;
        }

        .bar-span-depart {
            width: 80px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
            border-radius: 2px;
            max-height: 32px;
            text-align: center;
            color: #fff;
            display: inline-block;
            overflow: hidden;
            background-color: #2EC3E8;
            cursor: pointer;
        }

        .bar-span-member {
            width: 80px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
            border-radius: 2px;
            max-height: 32px;
            text-align: center;
            color: #fff;
            display: inline-block;
            overflow: hidden;
            background-color: rgb(51, 71, 95);
            cursor: pointer;
        }

        .bar-span-tag {
            width: 80px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
            border-radius: 2px;
            max-height: 32px;
            text-align: center;
            color: #fff;
            display: inline-block;
            overflow: hidden;
            background-color: #ef321c;
            cursor: pointer;
        }

    </style>
    <script><![CDATA[
    /*微信账号种类*/
    var accountType = ${RequestParameters.accountType!-1};
    /*是查看通讯录还是发送消息*/
    var type = "${RequestParameters.type!-1}";
    var tagIds = "${RequestParameters.tagIds!}";
    var partyIds = "${RequestParameters.partyIds!}";
    var userIds = "${RequestParameters.userIds!}";
    var openIds = "${RequestParameters.openIds!}";
    var accountId =${RequestParameters.accountId!-1};
    var departmentIds = ${RequestParameters.departmentIds!-1};
    var tags = ${RequestParameters.tags!-1};
    var viewModel = kendo.observable({
        model: {
            accountId: accountId
        }
    });
    var receivers = [];
    /*部门treeList数据源*/
    var treeDataSource = new kendo.data.TreeListDataSource({
        transport: {
            read: {
                url: "${base.contextPath}/wechat/department/treeListDeapartmentQuery?accountId=" + accountId,
                type: "GET",
                dataType: "json",
                async: false
            }
        },
        schema: {
            model: {
                expanded: true
            },
            parse: function (response) {
                var products = [];
                for (var i = 0; i < response.total; i++) {
                    // if (response.rows[i].enabledFlag == 'Y') {
                    var product = {
                        id: response.rows[i].id,
                        weId: response.rows[i].weId,
                        parentId: response.rows[i].parentId,
//                        unitCode: response.rows[i].unitCode,
                        name: response.rows[i].name,
                        type: response.rows[i].type
//                        positionName: response.rows[i].positionName,
//                        description: response.rows[i].description
                    };
                    products.push(product);
                    //}
                }
                return products;
            }
        }
    });

    //删除为空
    function removeRepeat(list) {
        list.forEach(function (value, index, array) {
            if (value == '') {
                list.splice(index, 1);
            }
        })
    }
    //循环遍历产生选中标签
    function createSpan(list, type) {
        switch (type) {
            case "depart":
                list.forEach(function (value, index, array) {
                    var name;
                    treeDataSource._view.forEach(function (val) {
                        if (val.weId == value && val.type == 1) {
                            name = val.name;
                        }
                    })
                    document.getElementById("rightBar").innerHTML += '<span id="' + value + '" class="bar-span-depart" name="depart" onclick="deleteSpan(this)">' + name +
                        '</span>';
                })
                break;
            case "member":
                list.forEach(function (value, indx, aray) {
                    var name;
                    treeDataSource._view.forEach(function (val) {
                        if (val.weId == value && val.type == 2) {
                            name = val.name;
                        }
                    })
                    document.getElementById("rightBar").innerHTML += '<span id="' + value + '" class="bar-span-member" name="member" onclick="deleteSpan(this)">' + name +
                        '</span>';
                })
                break;
            case "tag":
                list.forEach(function (value, index, array) {
                    var name;
                    response.forEach(function (val) {
                        if (val.tagId == value) {
                            name = val.tagName;
                        }
                    })
                    document.getElementById("rightBar").innerHTML += '<span id="' + value + '" class="bar-span-tag" name="tag" onclick="deleteSpan(this)">' + name +
                        '</span>';
                })
        }
    }

    var response;
    /*初始化右侧选中的*/
    function requestSuc(e) {
        response = e.response.rows;
        var partIdList = partyIds.split(",");
        var tagIdList = tagIds.split(",");
        var openIdList = openIds.split(",");
        var userIdList = userIds.split(",");
        removeRepeat(partIdList);
        removeRepeat(tagIdList);
        removeRepeat(openIdList);
        removeRepeat(userIdList);
        createSpan(partIdList, "depart");
        createSpan(tagIdList, "tag");
        if (openIdList.length > 0) {
            createSpan(openIdList, "member")
        }
        /*if (userIdList.length > 0) {
         createSpan(userIdList, "member")
         }*/
    }
    function addTemp(dataItem) {
        return '<span class="add-span" onclick="addReceiver(\'' + dataItem.name + '\',\'' + dataItem.weId + '\',' + dataItem.type + ')">添加</span>'
    }
    function addTagTemp(dataItem) {
        return '<span class="add-span" onclick="addReceiver(\'' + dataItem.tagName + '\',\'' + dataItem.tagId + '\',3)">添加</span>'
    }
    function dsEditable() {
        return true;
    }

    //检查是否重复
    function checkBar(weId, type) {
        var rightBarNode = document.getElementById("rightBar");
        var nodeName;
        if (type == 1) {
            nodeName = "depart";//部门
        } else if (type == 2) {
            nodeName = 'member'//成员
        } else if (type == 3) {
            nodeName = 'tag' //标签
        }
        var count = 0;
        for (var i = 0; i < rightBarNode.children.length; i++) {
            if (rightBarNode.children[i].id == weId && rightBarNode.children[i].getAttribute("name") == nodeName) {
                count++;
                break;
            }
        }
        if (count == 0) {
            return true;
        } else {
            return false;
        }
    }
    function addReceiver(name, weId, type) {
        var rightBarNode = document.getElementById("rightBar");
        switch (type) {
            //部门
            case 1:
                if (checkBar(weId, type)) {
                    rightBarNode.innerHTML += '<span id="' + weId + '" class="bar-span-depart" name="depart" onclick="deleteSpan(this)">' + name +
                        '</span>';
                }
                break;
            case 2:
                if (checkBar(weId, type)) {
                    rightBarNode.innerHTML += '<span id="' + weId + '" class="bar-span-member" name="member" onclick="deleteSpan(this)">' + name +
                        '</span>';
                }
                break;
            case 3:
                if (checkBar(weId, type)) {
                    rightBarNode.innerHTML += '<span id="' + weId + '" class="bar-span-tag" name="tag" onclick="deleteSpan(this)">' + name +
                        '</span>';
                }
                break;
        }
    }
    function tagParameterMap(options, type) {
        if (type !== "read" && options.models && type !== "destroy") {
            var datas = options.models;
            if (type == 'create' || type == 'update') {
                datas = options.models.map(function (data) {
                    data['__status'] = (type == 'create' ? 'add' : 'update');
                    data['accountId'] = accountId;
                    return data;
                })
            }
            return kendo.stringify(datas);
        } else if (type === "read") {
            var map = {};
            map.page = options.page;
            map.pagesize = options.pageSize;
            map.accountId = accountId;
            map.tags = tags;
            for (var k in map) {
                if (map[k] === '' || map[k] === null || map[k] === undefined)
                    delete map[k]
            }
            return map;
        } else if (type == "destroy") {
            var datas = options.models;
            datas = options.models.map(function (data) {
                data['__status'] = 'delete';
                return data;
            });
            return kendo.stringify(datas);
        }
    }
    function gridLocate(e) {
        var d = this.dataItem(e.element);
    }
    function schemaError() {

    }
    function requestError() {

    }
    ]]></script>
    <div id="">

    </div>
    <h:tabStrip
            style="box-shadow:3px 3px 3px rgb(204, 204, 204);background:white;border-radius: 5px;float:left;margin-top:25px;margin-left:30px;"
            id="tabstrip" value="成员" animation="false">
        <h:tabs>
            <h:tab title="成员">
                <div style="position: relative">
                    <div id="treeListDiv">
                        <h:treeList id="treeList" dataSource="treeDataSource" navigatable="false" height="100%"
                                    resizable="false"
                                    scrollable="false" editable="false">
                            <h:columns>
                                <h:column field="name" title="<@spring.message 'hrorgunit.name'/>"/>
                                <h:column field="" title="<@spring.message '操作'/>" template="addTemp"/>
                            </h:columns>
                        </h:treeList>
                    </div>
                </div>
            </h:tab>
            <!--标签grid-->
            <h:tab title="标签">
                <h:dataSource id="tagDataSource" batch="true" pageSize="10" serverPaging="true" error="requestError"
                              requestEnd="requestSuc">
                    <h:transport parameterMap="tagParameterMap">
                        <h:read url="${base.contextPath}/wechat/tag/queryTag" type="GET" dataType="json"/>
                        <h:create url="${base.contextPath}/wechat/tag/submit" type="POST"
                                  contentType="application/json"/>
                        <h:update url="${base.contextPath}/wechat/tag/submit" type="POST"
                                  contentType="application/json"/>
                        <h:destroy url="${base.contextPath}/wechat/tag/submit" type="POST"
                                   contentType="application/json"/>
                    </h:transport>
                    <h:schema data="rows" total="total" errors="schemaError">
                        <h:model id="id" editable="dsEditable">
                            <h:fields>

                            </h:fields>
                        </h:model>
                    </h:schema>
                </h:dataSource>
                <div style="position: relative">

                    <h:hlsGrid id="tagGrid" dataSource="tagDataSource"
                               hlsBtnType=""
                               editable="true" height="475px" autoResize="true" resizable="true" navigatable="true"
                               locate="gridLocate">
                        <h:pageable pageSizes="all,5,10,20,50" buttonCount="0" refresh="true">
                        </h:pageable>
                        <h:columns>
                            <h:column field="tagName" title='标签名称'
                                      width="70">
                                <h:headerAttributes style="text-align:center"/>
                            </h:column>
                            <h:column field="" title='操作'
                                      width="30" template="addTagTemp">
                                <h:headerAttributes style="text-align:center"/>
                            </h:column>
                        </h:columns>
                    </h:hlsGrid>
                </div>


            </h:tab>
        </h:tabs>
    </h:tabStrip>
    <div id="rightBar"
         style="height: 400px;width: 100px;border-width: 1px;box-shadow: 0px 0px 3px rgb(204, 204, 204);float: left;margin-top: 25px;overflow-x: hidden;overflow-y: auto;">

    </div>
    <h:hlsToolBar id="saveToolBar">
        <h:hlsButton id="save" text="确定"/>
    </h:hlsToolBar>
    <script><![CDATA[
    $("#save").click(function () {
        var children = document.getElementById("rightBar").children;
        var noticeModel = getWindowObj("${base.contextPath}/weChat/weChatPushNoticce.view").contentWindow.viewModel;
        noticeModel.userIds = '';
        noticeModel.partyIds = '';
        noticeModel.tagIds = '';
        noticeModel.openIds = '';
        for (var i = 0; i < children.length; i++) {
            switch (children[i].getAttribute("name")) {
                case "depart":
                    noticeModel.partyIds += children[i].id + ",";
                    break;
                case "member":
                    noticeModel.userIds += children[i].id + ",";
                    noticeModel.openIds += children[i].id + ",";
                    break;
                case "tag":
                    noticeModel.tagIds += children[i].id + ",";
            }
        }
        window.parent.$("#" + "${RequestParameters.hlsWindowId}").data("kendoWindow").close();
    })

    function deleteSpan(e) {
        e.remove();
    }

    ]]></script>
</h:screen>