@extends('layouts.app')
@section('title')邮件@endsection
@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.log.menu')@endcomponent
    </div>
    <div class="container-fluid" id="container">
        <div class="card">
            <div id="form_div"></div>
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <table class="table table-sm table-hover table-condensed">
                    <tr>
                        <th>序号</th>
                        <th>事件名</th>
                        <th>通知角色</th>
                        <th>事件描述</th>
                        <th>邮件模板</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(emailEvent,i) in emailEvents" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td width="50">@{{ i+1 }}</td>
                        <td width="50">@{{ emailEvent.name }}</td>
                        <td width="100">
                            <table class="table table-sm">
                                <tr colspan="2">
                                    <td>
                                        <select class="form-control form-control-sm" v-model="emailEvent.role_selected">
                                            <option v-for="role in roles" :value="role.id"> @{{ role.name }}</option>
                                        </select>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" @click="addRole(emailEvent)">添加</button>
                                    </td>
                                </tr>
                                <tr v-for="(role,j) in emailEvent.roles" v-if="j<2 || emailEvent.isShowRole">
                                    <td>@{{ role.name }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger"
                                                @click="deleteRole(role,j,emailEvent)">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="row" @click="showRole(i)" v-if="emailEvent.roles.length > 2">
                                            <label class="text-center mt-0 p-0 cursor-pointer offset-5">
                                        <span class="fa"
                                              :class="emailEvent.isShowRole ? 'fa-angle-double-down' : 'fa-angle-double-right'"></span>
                                                &nbsp;<span v-if="emailEvent.isShowRole">收起</span><span
                                                    v-if="!emailEvent.isShowRole">展开</span>共@{{ emailEvent.roles.length
                                                }} 条角色
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td width="150">
                            <span class="w-auto" v-show="emailEvents[i].remark_show&&emailEvent.remark"
                                  @click="remarkShow(i,$event)">@{{ emailEvent.remark }}</span>
                            <span v-show="emailEvents[i].remark_edit||!emailEvent.remark">
                                <textarea width="150" class="form-control" rows="5" type="text"
                                          @blur="remarkShow(i,$event)">@{{ emailEvent.remark }}</textarea>
                                <button class="btn btn-sm btn-primary"
                                        @click="updateRemark(emailEvent,$event)">修改</button>
                            </span>
                        </td>
                        <td width="150">
                        <span v-show="emailEvents[i].template_show&&emailEvent.template" @click="templateShow(i,$event)"
                              class="w-auto">@{{ emailEvent.template }}</span>
                            <span v-show="emailEvents[i].template_edit||!emailEvent.template">
                            <textarea width="150" class="form-control" rows="5" type="text"
                                      @blur="templateShow(i,$event)">@{{ emailEvent.template }}</textarea>
                            <button class="btn btn-sm btn-primary"
                                    @click="updateTemplate(emailEvent,$event)">修改</button>
                        </span>
                        </td>
                        <td width="50">
                            <button class="btn btn-success" v-if="emailEvent.is_active===0" @click="active(emailEvent)">
                                启用
                            </button>
                            <button class="btn btn-secondary" v-if="emailEvent.is_active===1"
                                    @click="active(emailEvent)">
                                禁用
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
@stop
@section('lastScript')
    <script>
        new Vue({
            el: "#container",
            data: {
                emailEvents: {!!  $emailEvents->toJson() !!}['data'],
                roles: {!!  $roles->toJson() !!},
                addRolesFlag: false,
                selectTr:0,
            },
            methods: {
                /**
                 * 添加角色，并将添加的角色添加到当前时间角色列表的顶部
                 * @param emailEvent
                 */
                addRole(emailEvent) {
                    window.tempTip.postBasicRequest("{{url('maintenance/mail/addRole')}}", {
                        roleId: emailEvent.role_selected,
                        eventMailId: emailEvent.id
                    }, res => {
                        let role = res.role;
                        if (role) {
                            emailEvent.roles.unshift(role);
                            return "添加关联角色：" + role.name + " 成功！";
                        }
                    });
                },
                /**
                 * 删除角色，当前事件的指定角色删除
                 * @param role 要删除的角色
                 * @param index 删除角色的索引
                 * @param emailEvent 事件
                 */
                deleteRole(role, index, emailEvent) {
                    window.tempTip.postBasicRequest("{{url('maintenance/mail/deleteRole')}}", {
                        roleId: role.id,
                        eventMailId: emailEvent.id
                    }, res => {
                        emailEvent.roles.splice(index, 1);
                        return "取消关联角色：" + role.name + " 成功！";
                    });
                },
                /**
                 * 更新模板
                 * 隐藏模板编辑，显示模板展示，更新前端显示
                 * @param emailEvent
                 * @param e
                 */
                updateTemplate(emailEvent, e) {
                    let textarre = $(e.target).prev().val();
                    window.tempTip.postBasicRequest("{{url('maintenance/mail/updateTemplate')}}", {
                        id: emailEvent.id,
                        template: textarre,
                    }, res => {
                        emailEvent.template = textarre;
                        emailEvent.template_show = true;
                        emailEvent.template_edit = false;
                        return "修改模板成功！";
                    });

                },
                /**
                 * 更新备注
                 * 隐藏备注编辑，显示备注展示，更新备注显示
                 * @param emailEvent
                 * @param e
                 */
                updateRemark(emailEvent, e) {
                    let textarre = $(e.target).prev().val();
                    window.tempTip.postBasicRequest("{{url('maintenance/mail/updateRemark')}}", {
                        id: emailEvent.id,
                        remark: textarre,
                    }, res => {
                        emailEvent.remark = textarre;
                        emailEvent.remark_show = true;
                        emailEvent.remark_edit = false;
                        return "修改备注成功！";
                    });

                },
                /**
                 * 启用/禁用指定模板
                 * @param emailEvent
                 */
                active(emailEvent) {
                    window.tempTip.postBasicRequest("{{url('maintenance/mail/active')}}", {
                        id: emailEvent.id,
                    }, res => {
                        if (res) {
                            emailEvent.is_active = 0;
                            return "模板启用禁用！";
                        } else {
                            emailEvent.is_active = 1;
                            return "模板启用成功！";
                        }
                    });
                },
                /**
                 * 展开折叠指定模板的角色列表
                 * @param index
                 */
                showRole(index) {
                    if (this.emailEvents[index].isShowRole) {
                        this.emailEvents[index].isShowRole = false;
                    } else {
                        this.emailEvents[index].isShowRole = true;
                    }
                    this.$forceUpdate();
                },
                /**
                 * 备注编辑/显示切换
                 * 切换为编辑时，自动聚焦到textarea
                 * @param index
                 * @param $event
                 */
                remarkShow(index, $event) {
                    let _this = this;
                    setTimeout(function () {
                        _this.emailEvents[index].remark_show = !_this.emailEvents[index].remark_show;
                        _this.emailEvents[index].remark_edit = !_this.emailEvents[index].remark_edit;
                        setTimeout(function () {
                            let find = $($event.target).parent().find('textarea');
                            find.focus();
                        }, 100)
                    }, 100);
                },
                /**
                 * 模板编辑/显示切换
                 * 切换为编辑时，自动聚焦到textarea
                 * @param index
                 * @param $event
                 */
                templateShow(index,$event) {
                    let _this = this;
                    setTimeout(function () {
                        _this.emailEvents[index].template_show = !_this.emailEvents[index].template_show;
                        _this.emailEvents[index].template_edit = !_this.emailEvents[index].template_edit;
                        setTimeout(function () {
                            let find = $($event.target).parent().find('textarea');
                            find.focus();
                        }, 100)
                    }, 100);
                },
            }
        })
    </script>
@stop