<style>
  .weixinappmsg{
      position: relative;
  }
  .weixinappmsg .mimitBody {
    padding: 20px;
    background-color: #fff;
    margin: 10px 0 20px 0;
    display: table;
    width: 100%;
  }

  .weixinappmsg .mimitList {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
  }

  .weixinappmsg .mimitBody .el-tag {
    min-width: 120px;
    padding-right: 50px;
  }

  .weixinappmsg .el-button--small {
    padding: 9px 15px;
  }
  .wexin_Header{
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .weixinTopBtn{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }
  .weixin_warmTips{
    margin: 0px 20px 20px;
    background-color: rgb(244, 244, 245);
    padding: 10px 15px;
    color: rgb(144, 147, 153);
    display: inline-block;
    font-size: 15px;
  }
</style>
<template>
  <div class="weixinappmsg">
    <el-button class="weixinTopBtn" type="primary" size="small">一键添加订阅信息</el-button>
    <div class="wexin_Header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="商城订阅信息" name="1"></el-tab-pane>
          <el-tab-pane label="分销订阅信息" name="2"></el-tab-pane>
        </el-tabs>
    </div>
    <template v-if="checkIndex==1">
      <div class="mimitBody">
        <div class="el-col el-col-24">
          <div class="weixin_warmTips">温馨提示：获取前请先确认您已获得订阅消息的使用权限，并且订阅消息中没有任何数据。获取后请不要到小程序后台 删除相应的订阅消息，否则会影响订阅消息正常使用。</div>
          <el-form :model="appMallSubscribeMsg" ref="appMallSubscribeMsg" label-width="300px">
            <el-form-item label="下单成功提醒(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.OrderSuccessTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
            <el-form-item label="订单取消通知(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.OrderCancelTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
            <el-form-item label="订单发货通知(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.OrderDeliverGoodsTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
            <el-form-item label="退款通知(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.RefundTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
            <el-form-item label="活动状态通知(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.ActiveStateTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
            <el-form-item label="审核结果通知(类目: 服装/鞋/箱包)">
              <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallSubscribeMsg.AuditResultTpl">
              </el-input>
              <el-button plain size="small">查看订阅消息示例</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-button size="small" type="primary" @click="UpdateMallSubscribeMsg()">保 存</el-button>
      <el-button size="small" type="primary">生成测试二维码</el-button>
    </template>
    <template v-else>
      <div class="mimitBody">
        <div class="el-col el-col-24">
            <div class="weixin_warmTips">温馨提示：获取前请先确认您已获得订阅消息的使用权限，并且订阅消息中没有任何数据。获取后请不要到小程序后台 删除相应的订阅消息，否则会影响订阅消息正常使用。</div>
            <el-form :model="appMallDistributionMsg" ref="appMallDistributionMsg" label-width="300px">
              <el-form-item label="提现成功通知(类目: 服装/鞋/箱包)">
                <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallDistributionMsg.ReflectSuccessTpl">
                </el-input>
                <el-button plain size="small">查看订阅消息示例</el-button>
              </el-form-item>
              <el-form-item label="提现失败通知(类目: 服装/鞋/箱包)">
                <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallDistributionMsg.ReflectFailTpl">
                </el-input>
                <el-button plain size="small">查看订阅消息示例</el-button>
              </el-form-item>
              <el-form-item label="会员等级变更通知(类目: 服装/鞋/箱包)">
                <el-input type="text" style="width:30%" size="small" maxlength="200" v-model="appMallDistributionMsg.MembersLevelChangeTpl">
                </el-input>
                <el-button plain size="small">查看订阅消息示例</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>
      <el-button size="small" type="primary" @click="UpdateMallDistributionMsg()">保 存</el-button>
      <el-button size="small" type="primary">生成测试二维码</el-button>
    </template>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //商城订阅消息
        appMallSubscribeMsg: {
          MallBaseId: 0, //小程序Id
          OrderSuccessTpl: "", //下单成功提醒(类目:服装/鞋/箱包)
          OrderCancelTpl: "", //订单取消提醒(类目:服装/鞋/箱包)
          OrderDeliverGoodsTpl: "", //订单发货提醒(类目:服装/鞋/箱包)
          RefundTpl: "", //退款提醒(类目:服装/鞋/箱包)
          ActiveStateTpl: "", //活动状态提醒(类目:服装/鞋/箱包)
          AuditResultTpl: "", //审核结果提醒(类目:服装/鞋/箱包)
        },
        //分销订阅消息
        appMallDistributionMsg: {
          MallBaseId: 0, //小程序Id
          ReflectSuccessTpl: "", //提现成功通知(类目: 服装/鞋/箱包 )
          ReflectFailTpl: "", //提现失败通知(类目: 服装/鞋/箱包 )
          MembersLevelChangeTpl: "", //会员等级变更通知(类目: 服装/鞋/箱包 )
        },
        activeName:'1',
        checkIndex:1,
      };
    },
    created() {

    },
    methods: {
      //版权信息
      GetWeiXinAppConfig() {
        this.appMallSubscribeMsg.MallBaseId = this.getLocalStorage().MallBaseId;
        this.appMallDistributionMsg.MallBaseId = this.getLocalStorage().MallBaseId;
        this.apipost("/api/Tenant/GetMiniPrograme", {
          MallBaseId: this.getLocalStorage().MallBaseId,
        }, res => {
          if (res.data.resultCode == 1) {
            //商城订阅消息
            this.appMallSubscribeMsg.OrderSuccessTpl = res.data.data.OrderSuccessTpl;
            this.appMallSubscribeMsg.OrderCancelTpl = res.data.data.OrderCancelTpl;
            this.appMallSubscribeMsg.OrderDeliverGoodsTpl = res.data.data.OrderDeliverGoodsTpl;
            this.appMallSubscribeMsg.RefundTpl = res.data.data.RefundTpl;
            this.appMallSubscribeMsg.ActiveStateTpl = res.data.data.ActiveStateTpl;
            this.appMallSubscribeMsg.AuditResultTpl = res.data.data.AuditResultTpl;
            //分销订阅消息
            this.appMallDistributionMsg.ReflectSuccessTpl = res.data.data.ReflectSuccessTpl;
            this.appMallDistributionMsg.ReflectFailTpl = res.data.data.ReflectFailTpl;
            this.appMallDistributionMsg.MembersLevelChangeTpl = res.data.data.MembersLevelChangeTpl;

          } else {
            this.Info(res.data.message);
          }
        })
      },
      //修改商城订阅消息
      UpdateMallSubscribeMsg() {
        this.apipost("/api/Tenant/SetMiniProgramMallSubscribe", this.appMallSubscribeMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetWeiXinAppConfig();
            this.Success("操作成功!");
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //修改分销订阅配置信息
      UpdateMallDistributionMsg() {
        this.apipost("/api/Tenant/SetMiniProgramMallDistribution", this.appMallDistributionMsg, res => {
          if (res.data.resultCode == 1) {
            this.GetWeiXinAppConfig();
            this.Success("操作成功!");
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //切换
      handleClick(tab){
        this.checkIndex = tab.name;
      }
    },
    mounted() {
      this.GetWeiXinAppConfig();
    }
  };

</script>
