<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #notification-index {
        font-family: Source Han Sans SC;
        color: #666;
        background: #fff;
        border-radius: 6px;
        padding: 0 0px 30px;
        font-size: 14px;
        overflow: auto;
    }

    .common-btn {
        background: #7536D0;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        width: 88px;
        cursor: pointer;
    }

    /* title */
    .title-tip {
        font-weight: 600;
        padding: 18px 0;
    }

    .title-opt {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .title-opt .el-input__inner,
    .title-opt .el-input {
        height: 30px;
        line-height: 30px;
        width: 236px;
    }

    .title-opt .el-input__icon {
        line-height: 30px;
    }

    .sync-btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }

    .view-btn {
        color: #7536D0;
        cursor: pointer;
    }

    .avatar-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid #E6E6E6;
    }

    .sex-img {
        width: 15px;
        height: 15px;
        margin: 0 20px;
    }

    /* footer */
    .fans-footer {
        padding-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    /* table */
    .el-table td,
    .el-table th {
        border-right: none;
    }

    .el-table th {
        background: #F9F9F9;
        height: 40px;
        padding: 8px 0;
    }

    .el-table td {
        padding: 8px 0 9px;
    }

    .el-table .cell {
        padding-left: 20px !important;
        font-size: 13px;
        color: #444;
        font-weight: 500;
        text-align: center;
    }

    .table-head-tip {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-head-tip img {
        margin-right: 12px;
    }

    .tips {
        padding: 16px;
        border-radius: 5px;
        background-color: #F1EBFA;
        position: relative;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .tip-close {
        color: #7536D0;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .notification-btn {
        justify-content: flex-end;
        display: flex;
    }

    .notification-btn-1 {
        color: #7438D5;
        line-height: 36px;
        background: #fff;
    }

    .notification-btn-2 {
        width: 90px;
        height: 36px;
        background: #7438D5;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        line-height: 36px;
        border-radius: 18px;
    }

    .add-button {
        border: 1px solid #7438D5;
        color: #7438D5;
        background: #fff;
        cursor: pointer;
    }

    .notification-items {
        display: flex;
        align-items: center;
    }

    .div-body {
        border-bottom: none;
        margin: 20px 0 14px;
        max-height: 355px;
        overflow: auto;
    }

    .div-body-item {
        display: flex;
        align-items: center;
        height: 59px;
    }

    .first-item {
        width: 102px;
    }

    .table-item-with {
        width: 186px;
    }

    .item-btn {
        border-radius: 4px;
        height: 32px;
        display: flex;
        width: 180px;

    }

    .wx-config {
        width: 80px;
        line-height: 32px;
        background: #04C261;
        text-align: center;
        color: #fff;
        cursor: pointer;
        border-radius: 4px 0 0 4px;
    }

    .wx-send {
        width: 130px;
        line-height: 32px;
        background: #EAFAF2;
        color: #04C261;
        text-align: center;
        font-size: 12px;
        border-radius: 0 4px 4px 0;
    }

    .wxmin-config {
        background: #6D74F0;
    }

    .wxmin-send {
        background: #ECEDFD;
        color: #6D74F0;
    }

    .note-config {
        background: #7536D0;
    }

    .note-send {
        background: #EDE5F9;
        color: #7536D0;
    }

    .email-config {
        background: #328AF7;
    }

    .email-send {
        background: #DEECFE;
        color: #328AF7;
    }

    .notification-titles {
        margin-right: 40px;
    }

    .el-dialog__title {
        font-size: 14px;
    }

    .el-dialog__body {
        font-size: 13px;
    }

    .el-dialog__headerbtn .el-dialog__close {
        font-size: 18px;
    }

    .el-dialog__headerbtn .el-dialog__close:hover {
        color: #7438D5;
    }

    .del-btn-field {
        width: 18px;
        height: 18px;
        margin-left: 14px;
        background: rgb(255, 89, 89);
        color: rgb(255, 255, 255);
        text-align: center;
        font-size: 12px;
        border-radius: 50%;
    }

    .email-bodys {
        overflow: auto;
        max-height: 420px;
        padding: 0 20px 20px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="notification-index" v-cloak>
    <div class="common-header-container">
        <div class="title-tip">
            模板消息
        </div>
    </div>
    <div class="common-bigtip-container" v-if="tipCloseFlag">
        <p><strong>使用说明</strong></p>
        <p>消息通知仅用于向用户发送重要的服务通知，只能用于符合其要求的服务场景中，如商品发货通知等。不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息。
        </p>
        <i class="el-icon-close tip-close" @click="tipClose"></i>
    </div>
    <div class="common-table-container">
        <el-table :data="notificationData" border style="width: 100%">
            <el-table-column prop="name" label="消息类别" min-width="120">
            </el-table-column>
            <el-table-column min-width="340">
                <template slot="header" slot-scope="scope">
                    <div class="table-head-tip">
                        <img src="/assets/addons/groupon/img/notification/wxMiniProgram.png">
                        <span>微信小程序</span>
                    </div>
                </template>
                <template slot-scope="scope">
                    <div class="notification-item-box display-flex-c">
                        <div class="item-btn">
                            <div class="wx-config wxmin-config" @click="edit(scope.$index,'wxMiniProgram')">
                                编辑配置
                            </div>
                            <div class="wx-send wxmin-send">
                                已发送{{scope.row.wxMiniProgram.sendnum}}次
                            </div>
                        </div>
                        <div class="display-flex-c">
                            <el-switch v-model="scope.row.wxMiniProgram.status" active-color="#7536D0"
                                inactive-color="#E6E6E6" :active-value="1" :inactive-value="0"
                                style="margin: 0 14px 0 20px;"
                                @change="changeStatua(scope.row.wxMiniProgram.platform,scope.row.wxMiniProgram.event,scope.row.wxMiniProgram.name,scope.row.wxMiniProgram.status)">
                            </el-switch>
                            <div>
                                启用
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="dialog-isbutton-container">
        <el-dialog title="配置" :visible.sync="notificationDialog" :before-close="notificationClose" width="600"
            :close-on-click-modal="false">
            <div v-if="editPlatform!='email'">
                <div class="notification-items">
                    <div class="notification-titles">模板消息ID：</div>
                    <el-input type="text" style="width:436px" placeholder="请输入模板消息ID"
                        v-model="notificationForm.template_id">
                    </el-input>
                </div>
                <div class="dialog-table-body">
                    <div class="div-body common-container-scrollbar">
                        <div v-for="(item,index) in notificationForm.fields" class="div-body-item">
                            <div class="first-item">
                                <span v-if="item.field">{{item.name}}</span>
                                <el-input v-else v-model="item.name" placeholder="请输入名称"></el-input>
                            </div>
                            <div class="table-item-with" style="margin: 0 28px;">
                                <el-input v-model="item.template_field" placeholder="请输入模板字段"></el-input>
                            </div>
                            <div class="table-item-with">
                                <el-input v-model="item.value" placeholder="请输入默认值"></el-input>
                            </div>
                            <div v-if="!item.field" class="del-btn-field" @click.stop="fieldDel(index)">
                                <i class="fa fa-close"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="notification-items notification-footer">
                    <div class="common-button add-button" @click="addfield">
                        <i class="el-icon-plus"></i>添加
                    </div>
                </div>
            </div>
            <div v-if="editPlatform=='email'" class="email-bodys common-container-scrollbar">
                <div v-for="(item,index) in notificationForm.fields" class="div-body-item">
                    <div class="first-item">
                        <span v-if="item.field">{{item.name}}</span>
                        <el-input v-else v-model="item.name" placeholder="请输入名称"></el-input>
                    </div>
                    <div class="table-item-with flex-1">
                        <el-input v-model="item.field" placeholder="请输入模板字段" readonly></el-input>
                    </div>
                    <div v-if="!item.field" class="del-btn-field" @click.stop="fieldDel(index)">
                        <i class="fa fa-close"></i>
                    </div>
                </div>
                <div style="color:#FF5959;margin-bottom:10px">请按照如下格式在文档中插入要显示的字段 p:{字段名}</div>
                <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST"
                    action="">
                    <div class="display-flex-c" style="align-items: flex-start;">
                        <div class="flex-1">
                            <textarea id="c-content" class="form-control editor" rows="5" name="row[content]"
                                cols="50">
                            </textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="dialog-button-container">
                <div @click="notificationClose" class="dialog-button dialog-button-cancel">取消</div>
                <div @click="notificationClose('yes')" class="dialog-button dialog-button-define">确定</div>
            </div>
        </el-dialog>
    </div>
</div>