<template>
  <ContainerTit>
    <ContainerQuery>
      <div slot="tip" class="page-tip-div">
        <i class="el-icon-info"></i>
        温馨提示：1.获取前请先确认您已获得订阅消息的实用权限，并且订阅消息中没有任何数据。获取后请不要到微信小程序后台
        删除相应的订阅消息，否则会影响订阅消息正常使用。
        2.请在小程序后台添加类目:"生活服务---->百货/线下超市/便利店"
      </div>
    </ContainerQuery>
    <div slot="headr">
      <el-button type="primary" @click="editSystemPushMessage">
        提交保存
      </el-button>
    </div>
    <el-form label-width="100px">
      <div class="detail-tab-item">
        <div class="detail-tab-title">小程序订阅消息</div>
        <el-form-item label="模板名称:" class="item">
          {{ base_form.name }}
        </el-form-item>
        <el-form-item label="是否开启:" class="item">
          <el-switch
            v-model="base_form.weixinEnabledStatus"
            active-color="#36B365"
            inactive-color="#ff4949"
            :active-value="5"
            :inactive-value="4"
          ></el-switch>
        </el-form-item>
        <el-form-item label="模板ID:" class="item">
          <el-input
            v-model="base_form.weixinTemplateId"
            style="width: 400px"
            placeholder="请点击一键获取"
            readonly
          ></el-input>
          <el-button
            v-if="!base_form.weixinTemplateId"
            type="primary"
            @click="autoCreateWeiXinTemplateId"
          >
            一键配置
          </el-button>
        </el-form-item>
        <el-form-item label="模板内容:" class="item">
          <div v-html="base_form.weixinTemplate"></div>
        </el-form-item>
      </div>
      <div v-if="false" class="detail-tab-item">
        <div class="detail-tab-title">短信消息</div>
        <el-form-item label="是否开启:" class="item">
          <el-switch
            v-model="base_form.enableStatus"
            active-color="#36B365"
            inactive-color="#ff4949"
            :active-value="5"
            :inactive-value="4"
          ></el-switch>
        </el-form-item>
        <el-form-item label="短信内容:" class="item">
          <el-input
            v-model="base_form.note"
            type="textarea"
            style="width: 200px"
            :autosize="{ minRows: 5 }"
            readonly
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
  </ContainerTit>
</template>
<script>
  import {
    settingDetail,
    editSystemPushMessage,
    autoCreateWeiXinTemplateId,
  } from "@/api/System";
  export default {
    data() {
      return {
        id: "",
        base_form: {},
      };
    },
    created() {
      this.id = this.$route.params.id;
      this.settingDetail();
    },
    methods: {
      async settingDetail() {
        const { data } = await settingDetail(this.id);
        this.base_form = data[0];
      },
      async editSystemPushMessage() {
        if (!this.base_form.weixinTemplateId.trim()) {
          this.$message({
            type: "warning",
            message: "模板ID不能为空!",
          });
          return;
        }
        const { data } = await editSystemPushMessage({
          id: this.id,
          weixinEnabledStatus: this.base_form.weixinEnabledStatus,
          smsEnabledStatus: 5,
          weixinTemplateId: this.base_form.weixinTemplateId,
        });
        this.$message({
          type: "success",
          message: "提交成功!",
        });
        await this.$router.push(`/SystemSettings/jiaoyiset/PushNotification`);
      },
      async autoCreateWeiXinTemplateId() {
        const { data } = await autoCreateWeiXinTemplateId(this.id);
        this.base_form.weixinTemplateId = data;
        this.$message({
          type: "success",
          message: "模板ID配置成功!",
        });
      },
    },
  };
</script>
<style>
  .item {
    margin-left: 20px;
  }
</style>
