<?xml version="1.0" encoding="UTF-8"?>
<h:screen xmlns:h="http://www.hand-china.com/hap">
    <script src="${base.contextPath}/common/code?wechatGender=WECHAT.GENDER" type="text/javascript"></script>
    <script src="${base.contextPath}/common/code?wechatStatus=WECHAT.STATUS" type="text/javascript"></script>
    <style>
        #memberGrid {
            height: 426px !important;
        }

        .k-tabstrip-items li {
            height: 32px;
            width: 140px;
            border-bottom: 4px solid rgb(246, 181, 0) !important;
            border-top-left-radius: 5px !important;
            border-right: 1px solid #ccc !important;
            text-align: center;
            font-size: 12px;
        }

        .k-tabstrip-items li.k-state-active {
            border-top-color: #57889c;
        }

        .k-tabstrip-items .k-state-active {
            border-top-left-radius: 5px;
            border-top: 4px solid rgb(126, 50, 149);
            border-bottom: none !important;
        }

        #tabstrip {
            margin: 0px !important;
        }

        #tabstrip-1, #tabstrip-2, #tabstrip-3 {
            overflow: hidden;
            height: 550px;
            width: 1000px;
        }

        #tagGrid {
            height: 426px !important;
        }

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

        #tabstrip {
            box-shadow: initial !important;
        }
    </style>
    <script id="script"><![CDATA[
    /*微信账号种类*/
    var accountType = ${RequestParameters.accountType!-1};
    /*是查看通讯录还是发送消息*/
    var type = "${RequestParameters.type!-1}";

    var accountId =${RequestParameters.accountId!-1};
    var departmentIds = ${RequestParameters.departmentIds!-1};
    var tags = ${RequestParameters.tags!-1};
    /*viewModel存查询数据*/
    var viewModel = kendo.observable({
        model: {
            accountId:accountId
        }
    });
    function dsEditable() {
        return true;
    }
    function schemaError() {

    }
    function requestError() {

    }
    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 parameterMap(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.departmentIds = departmentIds;
            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 openTagMember(tagId) {
        var model = viewModel.model;
        model.set("tagId", tagId);

        delete model.departmentId

        memberDataSource.read();
        /*切换标签页*/
        tabStrip.select(2);
        $("#tabstrip-2").css("opacity", "1");
    }
    function openMember(departmentId) {
        var model = viewModel.model;
        model.set("departmentId", departmentId);

        delete model.tagId

        memberDataSource.read();
        tabStrip.select(2);
        $("#tabstrip-1").css("opacity", "1");
    }
    function memberTemp(dataItem) {
        return '<div style="cursor: pointer;" onclick="openMember(' + dataItem.id + ')">查看</div>'
    }
    function tagMemberTemp(dataItem) {
        return '<div style="cursor: pointer;" onclick="openTagMember(' + dataItem.id + ')">查看</div>'
    }
    function parentTemp(dataItem) {
        return dataItem.parentName || "";
    }
    function parentEditor(container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoLov({
                code: "WECHAT_DEPARTMENT",
                contextPath: '${base.contextPath}',
                locale: '${base.locale}',
                textField: 'parentName',
                query: function (e) {
                    e.param['accountId'] = accountId;
                },
                model: options.model
            });
    }
    function refreshDepartment() {
        debugger
        var mask = $("body").mLoading('正在发送.....');
        $.ajax({
            url: '${base.contextPath}/wechat/account/synchronizeContacts?accountId=' + accountId,
            type: "GET",
            dataType: "json",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (datas) {
                mask.destroy();
                if (!datas.success) {
                    kendo.ui.showErrorDialog({
                        title: $l('提示'),
                        message: datas.message
                    })
                }
            }
        });
        gridDataSource.read();
    }
    /*用于保存接受消息范围*/
    function saveReceiver() {

        var departmentGrid = $("#grid").data("kendoGrid");
        var tagGrid = $("#tagGrid").data("kendoGrid");
        var memberGrid = $("#memberGrid").data("kendoGrid");
        var departmentSelect = departmentGrid.select();
        var tagSelect = tagGrid.select();
        var memberSelect = tagGrid.select();
        var departmentResult = [];
        var tagResult = [];
        var memberResult = [];
        departmentSelect.map(function (index, value) {
            departmentResult.push(departmentGrid.dataItem(value));
        })
        tagSelect.map(function (index, value) {
            tagResult.push(tagGrid.dataItem(value))
        })
        memberSelect.map(function (index, value) {
            memberResult.push(memberGrid.dataItem(value))
        })
        departmentResult.forEach(function (value, index, array) {
            parent.viewModel.partIds += value.departmentId + ",";
        })
        tagResult.forEach(function (value, index, array) {
            parent.viewModel.tagIds += value.tagId + ",";
        })
        memberResult.forEach(function (value, index, array) {
            parent.viewModel.userIds += value.memberId + ",";
        })
    }

    /*memberGrid函数*/


    function memberParameterMap(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');
                    if (viewModel.model.departmentId != undefined) {
                        data['departmentId'] = viewModel.model.departmentId;
                    } else if (viewModel.model.tagId != undefined) {
                        data['tagId'] = viewModel.model.tagId;
                    }
                    return data;
                })
            }
            return kendo.stringify(datas);
        } else if (type === "read") {
            var map = viewModel.model.toJSON();
            map.page = options.page;
            map.pagesize = options.pageSize;

            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 genderTemp(dataItem) {
        var result;
        wechatGender.forEach(function (value, index, array) {
            if (dataItem.gender == value.value) {
                result = value.meaning;
            }
        })
        return result;
    }
    function genderEditor(container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                change: function () {

                },
                dataTextField: "meaning",
                dataValueField: "value",
                valuePrimitive: true,
                dataSource: wechatGender
            });
    }
    function statusEditor(container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                change: function () {

                },
                dataTextField: "meaning",
                dataValueField: "value",
                valuePrimitive: true,
                dataSource: wechatStatus
            });
    }
    function statusTemp(dataItem) {
        var result;
        wechatStatus.forEach(function (value, index, array) {
            if (dataItem.status == value.value) {
                result = value.meaning;
            }
        });
        return result;
    }

    function infoTemp(dataItem) {
        return '<a href="javascript:;" onclick="getInfo(' + dataItem.memberId + ')">查看</a>'
    }
    function getInfo(memberId) {
        Hls.openBox({
            url: "${base.contextPath}/weChat/wechat_member_addition_info.view?memberId=" + memberId + "&accountType=" + accountType,
            winId: "editWin",
            width: "80%"
        });
    }
    ]]></script>
    <div id="editWin"></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>
            <!--部门grid-->
            <h:tab title="部门">
                <h:dataSource id="gridDataSource" batch="true" pageSize="10" serverPaging="true" error="requestError">
                    <h:transport parameterMap="parameterMap">
                        <h:read url="${base.contextPath}/wechat/department/queryDepartment" type="GET" dataType="json"/>
                        <h:create url="${base.contextPath}/wechat/department/submit" type="POST"
                                  contentType="application/json"/>
                        <h:update url="${base.contextPath}/wechat/department/submit" type="POST"
                                  contentType="application/json"/>
                        <h:destroy url="${base.contextPath}/wechat/department/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:item name="parentName">
                                    <h:validation required="true"/>
                                </h:item>
                            </h:fields>
                        </h:model>
                    </h:schema>
                </h:dataSource>
                <div style="position: relative">
                    <img onclick="refreshDepartment()" src="${base.contextPath}/resources/images/WECHAT/freshIcon.png"
                         style="position: absolute;left: 90%;top: 25px;cursor: pointer;z-index: 999;height: 20px;width: 20px"/>
                    <h:hlsGridBox hlsGridId="grid" hlsBtnType="add,save" title="部门"
                                  viewModelName="viewModel.data" dataSourceId="gridDataSource">
                        <h:hlsGrid id="grid" dataSource="gridDataSource"
                                   hlsBtnType="ADD,DELETE"
                                   editable="true" height="100%" 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="departmentName" title='部门名称'
                                          width="70">
                                    <h:headerAttributes style="text-align:center"/>
                                    <h:attributes style="text-align:left"/>
                                </h:column>
                                <h:column field="parentId" title='父级部门'
                                          width="70" editor="parentEditor" template="parentTemp">
                                    <h:headerAttributes style="text-align:center"/>
                                    <h:attributes style="text-align:left"/>
                                </h:column>
                                <h:column field="departmentOrder" title='排序'
                                          width="70">
                                    <h:headerAttributes style="text-align:center"/>
                                    <h:attributes style="text-align:left"/>
                                </h:column>
                                <h:column field="" title="成员"
                                          width="50" template="memberTemp">
                                    <h:headerAttributes style="text-align:center"/>
                                    <h:attributes style="text-align:center"/>
                                </h:column>

                            </h:columns>
                        </h:hlsGrid>
                    </h:hlsGridBox>
                </div>
            </h:tab>
            <!--标签grid-->
            <h:tab title="标签">
                <h:dataSource id="tagDataSource" batch="true" pageSize="10" serverPaging="true" error="requestError">
                    <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">
                    <img onclick="refreshDepartment()" src="${base.contextPath}/resources/images/WECHAT/freshIcon.png"
                         style="position: absolute;left: 90%;top: 25px;cursor: pointer;z-index: 999;height: 20px;width: 20px;"/>
                    <h:hlsGridBox hlsGridId="tagGrid" hlsBtnType="add,save" title="标签"
                                  viewModelName="viewModel.data" dataSourceId="tagDataSource">
                        <h:hlsGrid id="tagGrid" dataSource="tagDataSource"
                                   hlsBtnType="ADD,DELETE"
                                   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:attributes style="text-align:left"/>
                                </h:column>

                                <h:column field="" title="成员"
                                          width="20" template="tagMemberTemp">
                                    <h:headerAttributes style="text-align:center"/>
                                    <h:attributes style="text-align:center"/>
                                </h:column>

                            </h:columns>
                        </h:hlsGrid>
                    </h:hlsGridBox>
                </div>


            </h:tab>
            <!--成员grid-->
            <h:tab title="成员">
                <h:dataSource id="memberDataSource" batch="true" pageSize="10" serverPaging="true" error="requestError">
                    <h:transport parameterMap="memberParameterMap">
                        <h:read url="${base.contextPath}/wechat/member/queryMember" type="GET" dataType="json"/>
                        <h:create url="${base.contextPath}/wechat/member/submit" type="POST"
                                  contentType="application/json"/>
                        <h:update url="${base.contextPath}/wechat/member/submit" type="POST"
                                  contentType="application/json"/>
                        <h:destroy url="${base.contextPath}/wechat/member/submit" type="POST"
                                   contentType="application/json"/>
                    </h:transport>
                    <h:schema data="rows" total="total" errors="schemaError">
                        <h:model id="memberId" editable="dsEditable">
                            <h:fields>

                            </h:fields>
                        </h:model>
                    </h:schema>
                </h:dataSource>
                <h:hlsGridBox hlsGridId="memberGrid" title="成员" id="memberBox"
                              viewModelName="viewModel.data" dataSourceId="memberDataSource">
                    <h:hlsGrid id="memberGrid" dataSource="memberDataSource"

                               editable="true" height="100%" 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="name" title='姓名'
                                      width="50">
                                <h:headerAttributes style="text-align:center"/>
                                <h:attributes style="text-align:left"/>
                            </h:column>
                            <!--<h:column field="memberOrder" title='次序'
                                      width="50">
                                <h:headerAttributes style="text-align:center"/>
                                <h:attributes style="text-align:center"/>
                            </h:column>-->
                            <h:column field="status" title='激活状态'
                                      width="50" editor="statusEditor" template="statusTemp">
                                <h:headerAttributes style="text-align:center"/>
                                <h:attributes style="text-align:left"/>
                            </h:column>
                            <h:column field="gender" title="性别"
                                      width="40" editor="genderEditor" template="genderTemp">
                                <h:headerAttributes style="text-align:center"/>
                                <h:attributes style="text-align:left"/>
                            </h:column>
                            <h:column field="" title="详细信息"
                                      width="40" template="infoTemp">
                                <h:headerAttributes style="text-align:center"/>
                                <h:attributes style="text-align:center"/>
                            </h:column>
                        </h:columns>
                    </h:hlsGrid>
                </h:hlsGridBox>
            </h:tab>
        </h:tabs>
    </h:tabStrip>


    <h:hlsToolBar id="saveToolBar">
        <h:hlsButton id="save" click="saveReceiver" text="确定"/>
    </h:hlsToolBar>
    <script><![CDATA[
    /*获取tabstrip组件*/
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    /*如果在发送消息时显示按钮*/
    window.onload = function () {
        if (type == -1) {
            $("#hlstoolbar_saveToolBar").hide();
        } else if (type == 'send') {
            /*增加勾选框*/
            $("#grid").data("kendoGrid").setOptions({selectable: "multiple, rowbox"});
            $("#tagGrid").data("kendoGrid").setOptions({selectable: "multiple, rowbox"});
            $("#memberGrid").data("kendoGrid").setOptions({selectable: "multiple, rowbox"});
        }
        if (accountType == 2 || accountType == 3) {
            tabStrip.select(1);
            $("li:first").css("display", "none");
//            $("#tabstrip-2").css("display","inline-flex");
//            tabStrip.remove("li:first");
        }
    };
    ]]></script>
</h:screen>