/**
 * @fileoverview added by tsickle
 * Generated from: lib/commentary/index.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
// 组件类
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, } from "@angular/core";
import { CommonFunctionService } from "../service/common-function.service";
import { DialogService } from "../service/dialog.service";
import { Debounce } from "../utils/decorator";
import { getTranslation } from "../utils/utils";
var RsCommentaryComponent = /** @class */ (function () {
    function RsCommentaryComponent(cf, dialog, ref) {
        this.cf = cf;
        this.dialog = dialog;
        this.ref = ref;
        this.commentData = [];
        this.editPermission = true; // edit权限
        // edit权限
        this.deletePermission = true; // delete权限
        // delete权限
        this.isReadOnly = false;
        this.filedsKey = {
            commentaries: "commentaries",
            messageId: "messageId",
            ownerName: "ownerName",
            lastModifiedOn: "lastModifiedOn",
            messageBody: "messageBody",
        };
        this.dateTimePipeFormat = "dd-MMM-yyyy hh:mm:a";
        this.actionComplete = new EventEmitter();
        this.commentVal = "";
        this.replyVal = "";
        this.editCommentVal = "";
    }
    /**
     * @return {?}
     */
    RsCommentaryComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.getInfo();
    };
    /**
     * @return {?}
     */
    RsCommentaryComponent.prototype.getInfo = /**
     * @return {?}
     */
    function () {
        this.translation = getTranslation();
    };
    /**
     * @return {?}
     */
    RsCommentaryComponent.prototype.addComment = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.actionComplete.emit({
            action: "addComment",
            data: { inputValue: this.commentVal },
            callback: (/**
             * @param {?} res
             * @return {?}
             */
            function (res) {
                var _a;
                _this.commentData.unshift((_a = {},
                    _a["" + _this.filedsKey["messageId"]] = res.messageId,
                    _a["" + _this.filedsKey["commentaries"]] = [],
                    _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
                    _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
                    _a["" + _this.filedsKey["messageBody"]] = _this.commentVal,
                    _a));
                _this.commentVal = "";
            }),
        });
    };
    /**
     * @param {?} item
     * @return {?}
     */
    RsCommentaryComponent.prototype.editComment = /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        this.editCommentVal = item[this.filedsKey["messageBody"]];
        item.showCommentEdit = true;
    };
    /**
     * @param {?} item
     * @return {?}
     */
    RsCommentaryComponent.prototype.updateComment = /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        return tslib_1.__awaiter(this, void 0, void 0, function () {
            var _this = this;
            return tslib_1.__generator(this, function (_a) {
                this.actionComplete.emit({
                    action: "updateComment",
                    data: tslib_1.__assign({}, item, { inputValue: this.editCommentVal }),
                    callback: (/**
                     * @param {?} res
                     * @return {?}
                     */
                    function (res) {
                        item[_this.filedsKey["messageBody"]] = _this.editCommentVal;
                        item.showCommentEdit = false;
                        _this.ref.markForCheck();
                    }),
                });
                return [2 /*return*/];
            });
        });
    };
    /**
     * @param {?} item
     * @return {?}
     */
    RsCommentaryComponent.prototype.deleteComment = /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        var _this = this;
        /** @type {?} */
        var dialogRef = this.dialog.showCommonDilaog({
            title: this.translation["DELETE_COMMENT"],
            description: this.translation["DELETE_COMMENT_CONFIRM"],
            saveBtnLabel: this.translation.DELETE,
        });
        dialogRef.afterClosed().subscribe((/**
         * @param {?} res
         * @return {?}
         */
        function (res) {
            if (res === "close") {
                return;
            }
            /** @type {?} */
            var idx = _this.commentData.findIndex((/**
             * @param {?} ele
             * @return {?}
             */
            function (ele) {
                return ele[_this.filedsKey.messageId] === item[_this.filedsKey.messageId];
            }));
            _this.actionComplete.emit({
                action: "deleteComment",
                data: item,
                callback: (/**
                 * @param {?} res
                 * @return {?}
                 */
                function (res) {
                    _this.commentData.splice(idx, 1);
                    _this.ref.detectChanges();
                    _this.ref.markForCheck();
                }),
            });
        }));
    };
    /**
     * @param {?} item
     * @return {?}
     */
    RsCommentaryComponent.prototype.addReply = /**
     * @param {?} item
     * @return {?}
     */
    function (item) {
        var _this = this;
        this.actionComplete.emit({
            action: "replyComment",
            data: tslib_1.__assign({}, item, { inputValue: this.replyVal }),
            callback: (/**
             * @param {?} res
             * @return {?}
             */
            function (res) {
                var _a;
                item[_this.filedsKey["commentaries"]].unshift((_a = {},
                    _a["" + _this.filedsKey["messageId"]] = res[_this.filedsKey["messageId"]],
                    _a["" + _this.filedsKey["commentaries"]] = [],
                    _a["" + _this.filedsKey["ownerName"]] = _this.displayName,
                    _a["" + _this.filedsKey["lastModifiedOn"]] = Date.now(),
                    _a["" + _this.filedsKey["messageBody"]] = _this.replyVal,
                    _a));
                _this.replyVal = "";
                item.showReplyInput = false;
                _this.ref.detectChanges();
                _this.ref.markForCheck();
            }),
        });
    };
    /**
     * @param {?} e
     * @return {?}
     */
    RsCommentaryComponent.prototype.adjustTextareaHeight = /**
     * @param {?} e
     * @return {?}
     */
    function (e) {
        /** @type {?} */
        var textarea = e.target;
        if (e.type === "focus" && textarea.value) {
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
        }
        else if (e.type === "input") {
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
        }
    };
    RsCommentaryComponent.decorators = [
        { type: Component, args: [{
                    selector: "rs-commentary",
                    template: "<div class=\"rs-commentary-wrap\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n    [ngTemplateOutletContext]=\"{ type: 'comment' }\"\r\n  ></ng-container>\r\n  <div class=\"reply-box\">\r\n    <div *ngFor=\"let item of commentData\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"replyItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'comment', item: item }\"\r\n      ></ng-container>\r\n      <div class=\"sub-reply-list\">\r\n        <ng-container\r\n          *ngFor=\"\r\n            let sub of item.isExpanded\r\n              ? item[filedsKey.commentaries]\r\n              : item[filedsKey.commentaries].slice(0, 3)\r\n          \"\r\n          [ngTemplateOutlet]=\"replyItemTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'sub', item: sub }\"\r\n        ></ng-container>\r\n      </div>\r\n      <button\r\n        class=\"e-btn text\"\r\n        *ngIf=\"item[filedsKey.commentaries].length > 3\"\r\n        (click)=\"item.isExpanded = !item.isExpanded\"\r\n        style=\"margin-bottom: 8px\"\r\n      >\r\n        {{\r\n          item.isExpanded\r\n            ? \"Collapse\"\r\n            : \"View All \" + item[filedsKey.commentaries].length + \" Replies\"\r\n        }}\r\n        <img\r\n          class=\"arrow\"\r\n          [ngClass]=\"{ collapse: item.isExpanded }\"\r\n          src=\"../../assets/img/dropdown-arrow.svg\"\r\n          alt=\"\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #commentBoxTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"comment-box\">\r\n    <div class=\"comment-input-wrap\">\r\n      <div class=\"avatar\" *ngIf=\"type !== 'editComment'\">\r\n        {{ cf.rtn(displayName) }}\r\n      </div>\r\n      <textarea\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"commentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'reply'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"replyVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n      <textarea\r\n        *ngIf=\"type === 'editComment'\"\r\n        class=\"e-input\"\r\n        rows=\"3\"\r\n        [(ngModel)]=\"editCommentVal\"\r\n        (input)=\"adjustTextareaHeight($event)\"\r\n        (focus)=\"adjustTextareaHeight($event)\"\r\n        [placeholder]=\"translation.WRITE_YOUR_COMMENT || '.WRITE_YOUR_COMMENT'\"\r\n      ></textarea>\r\n    </div>\r\n    <div class=\"btn-wrap\">\r\n      <button\r\n        *ngIf=\"type === 'comment'\"\r\n        class=\"e-btn e-primary small\"\r\n        [disabled]=\"commentVal === '' || isReadOnly || !editPermission\"\r\n        (click)=\"addComment()\"\r\n      >\r\n        {{ translation.COMMENT || \".COMMENT\" }}\r\n      </button>\r\n      <ng-container *ngIf=\"type === 'reply'\">\r\n        <button\r\n          class=\"e-btn small\"\r\n          (click)=\"item.showReplyInput = false; replyVal = ''\"\r\n        >\r\n          {{ translation.CANCEL || \".CANCEL\" }}\r\n        </button>\r\n        <button\r\n          class=\"e-btn e-primary small\"\r\n          [disabled]=\"replyVal === ''\"\r\n          (click)=\"addReply(item)\"\r\n        >\r\n          {{ translation.REPLY || \".REPLY\" }}\r\n        </button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"type === 'editComment'\">\r\n        <button class=\"e-btn text\" (click)=\"item.showCommentEdit = false\">\r\n          <img src=\"../../assets/img/comment-cancel.svg\" alt=\"\" />\r\n        </button>\r\n        <button\r\n          class=\"e-btn text\"\r\n          [disabled]=\"editCommentVal === ''\"\r\n          (click)=\"updateComment(item)\"\r\n        >\r\n          <img src=\"../../assets/img/comment-check.svg\" alt=\"\" />\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #replyItemTemplate let-type=\"type\" let-item=\"item\">\r\n  <div class=\"reply-item\" [ngClass]=\"{ comment: type === 'comment' }\">\r\n    <div class=\"avatar\">\r\n      {{ cf.rtn(item[filedsKey.ownerName]) }}\r\n    </div>\r\n    <div class=\"owner-wrap\">\r\n      <div class=\"owner-info\">\r\n        <div class=\"name\">\r\n          {{ item[filedsKey.ownerName] }}\r\n        </div>\r\n        <div class=\"time\">\r\n          {{ item[filedsKey.lastModifiedOn] | date : dateTimePipeFormat }}\r\n        </div>\r\n      </div>\r\n      <div class=\"message-wrap\">\r\n        <div class=\"message\" *ngIf=\"!item.showCommentEdit\">\r\n          <!-- {{ item[filedsKey.messageBody] }} -->\r\n          <truncated-text-toggle\r\n            [maximum]=\"1050\"\r\n            [data]=\"item[filedsKey.messageBody]\"\r\n          >\r\n          </truncated-text-toggle>\r\n        </div>\r\n        <ng-container\r\n          *ngIf=\"item.showCommentEdit\"\r\n          [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n          [ngTemplateOutletContext]=\"{ type: 'editComment', item: item }\"\r\n        ></ng-container>\r\n      </div>\r\n\r\n      <button\r\n        *ngIf=\"\r\n          type === 'comment' && !item.showReplyInput && !item.showCommentEdit\r\n        \"\r\n        class=\"e-btn text\"\r\n        (click)=\"item.showReplyInput = true\"\r\n        [disabled]=\"isReadOnly || !editPermission\"\r\n      >\r\n        {{ translation.REPLY || \".REPLY\" }}\r\n      </button>\r\n      <ng-container\r\n        *ngIf=\"item.showReplyInput\"\r\n        [ngTemplateOutlet]=\"commentBoxTemplate\"\r\n        [ngTemplateOutletContext]=\"{ type: 'reply', item: item }\"\r\n      ></ng-container>\r\n\r\n      <rs-grid-action *ngIf=\"type === 'comment'\">\r\n        <rs-grid-action-item\r\n          image=\"Edit\"\r\n          [text]=\"translation.EDIT\"\r\n          [disabled]=\"isReadOnly || !editPermission\"\r\n          (click)=\"editComment(item)\"\r\n        ></rs-grid-action-item>\r\n        <rs-grid-action-item\r\n          image=\"Delete\"\r\n          [text]=\"translation.DELETE\"\r\n          [disabled]=\"isReadOnly || !deletePermission\"\r\n          (click)=\"deleteComment(item)\"\r\n        ></rs-grid-action-item>\r\n      </rs-grid-action>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                    styles: [".rs-commentary-wrap{width:100%;height:100%;padding:32px;display:flex;flex-direction:column}.rs-commentary-wrap .comment-box{width:100%}.rs-commentary-wrap .comment-box .comment-input-wrap{margin-bottom:12px;display:flex;gap:12px}.rs-commentary-wrap .comment-box .comment-input-wrap .e-input{flex:1;width:0;height:62px}.rs-commentary-wrap .comment-box .btn-wrap{display:flex;justify-content:flex-end;gap:12px}.rs-commentary-wrap .comment-box .btn-wrap .e-btn.text{padding:4px}.rs-commentary-wrap .reply-box{height:0;flex:1;overflow:auto;margin-top:16px;margin-right:-32px;padding-right:32px}.rs-commentary-wrap .reply-box .sub-reply-list{padding-left:40px}.rs-commentary-wrap .reply-box .e-btn.text{padding:0!important;min-width:auto;height:auto;color:#6c7c90!important}.rs-commentary-wrap .reply-box .e-btn.text:hover{background:0 0!important;color:#1364b3!important}.rs-commentary-wrap .reply-box .e-btn.text:focus{background:0 0!important;color:#6c7c90!important}.rs-commentary-wrap .reply-box .arrow.collapse{transform:rotate(180deg)}.rs-commentary-wrap .reply-box .reply-item{display:flex;gap:12px;padding:12px 0}.rs-commentary-wrap .reply-box .reply-item.comment{border-top:1px solid #eaedf0}.rs-commentary-wrap .reply-box .reply-item.comment:hover{background-color:#f6faff}.rs-commentary-wrap .reply-box .reply-item.comment:hover rs-grid-action{display:block}.rs-commentary-wrap .reply-box .reply-item rs-grid-action{display:none;position:absolute;cursor:pointer;top:-4px;right:8px}.rs-commentary-wrap .reply-box .owner-wrap{flex:1;width:0;position:relative}.rs-commentary-wrap .reply-box .owner-wrap .owner-info{display:flex;align-items:center;gap:8px;height:28px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .name{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:700;line-height:14px}.rs-commentary-wrap .reply-box .owner-wrap .owner-info .time{color:#6c7c90;font-family:Arial;font-size:10px;font-style:normal;font-weight:400;line-height:12px}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap{padding:12px 0}.rs-commentary-wrap .reply-box .owner-wrap .message-wrap .message{color:#44566c;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:16px;padding-right:8px;white-space:pre-wrap}.rs-commentary-wrap .avatar{width:32px;height:32px;border-radius:100%;border:1px solid rgba(108,124,144,.4);color:#44566c;display:flex;align-items:center;justify-content:center;font-family:Arial;font-size:12px;font-style:normal;font-weight:400;line-height:14px}"]
                }] }
    ];
    /** @nocollapse */
    RsCommentaryComponent.ctorParameters = function () { return [
        { type: CommonFunctionService },
        { type: DialogService },
        { type: ChangeDetectorRef }
    ]; };
    RsCommentaryComponent.propDecorators = {
        displayName: [{ type: Input }],
        commentData: [{ type: Input }],
        editPermission: [{ type: Input }],
        deletePermission: [{ type: Input }],
        isReadOnly: [{ type: Input }],
        filedsKey: [{ type: Input }],
        dateTimePipeFormat: [{ type: Input }],
        actionComplete: [{ type: Output }]
    };
    tslib_1.__decorate([
        Debounce(300),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", []),
        tslib_1.__metadata("design:returntype", void 0)
    ], RsCommentaryComponent.prototype, "addComment", null);
    tslib_1.__decorate([
        Debounce(300),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], RsCommentaryComponent.prototype, "deleteComment", null);
    tslib_1.__decorate([
        Debounce(300),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], RsCommentaryComponent.prototype, "addReply", null);
    tslib_1.__decorate([
        Debounce(100),
        tslib_1.__metadata("design:type", Function),
        tslib_1.__metadata("design:paramtypes", [Object]),
        tslib_1.__metadata("design:returntype", void 0)
    ], RsCommentaryComponent.prototype, "adjustTextareaHeight", null);
    return RsCommentaryComponent;
}());
export { RsCommentaryComponent };
if (false) {
    /** @type {?} */
    RsCommentaryComponent.prototype.displayName;
    /** @type {?} */
    RsCommentaryComponent.prototype.commentData;
    /** @type {?} */
    RsCommentaryComponent.prototype.editPermission;
    /** @type {?} */
    RsCommentaryComponent.prototype.deletePermission;
    /** @type {?} */
    RsCommentaryComponent.prototype.isReadOnly;
    /** @type {?} */
    RsCommentaryComponent.prototype.filedsKey;
    /** @type {?} */
    RsCommentaryComponent.prototype.dateTimePipeFormat;
    /** @type {?} */
    RsCommentaryComponent.prototype.actionComplete;
    /** @type {?} */
    RsCommentaryComponent.prototype.commentVal;
    /** @type {?} */
    RsCommentaryComponent.prototype.replyVal;
    /** @type {?} */
    RsCommentaryComponent.prototype.editCommentVal;
    /** @type {?} */
    RsCommentaryComponent.prototype.translation;
    /** @type {?} */
    RsCommentaryComponent.prototype.cf;
    /**
     * @type {?}
     * @private
     */
    RsCommentaryComponent.prototype.dialog;
    /**
     * @type {?}
     * @private
     */
    RsCommentaryComponent.prototype.ref;
}
//# sourceMappingURL=data:application/json;base64, 