<template>
  <div class="apaas_detail_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/message' }">
          {{ $t("lang.message") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/message/message_template' }">
          {{ $t("lang.message_template") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ pageName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main_contaner">
      <el-form
        ref="detail_form"
        class="detail_form"
        label-position="top"
        :model="detail"
        :rules="detail_rules"
      >
        <el-form-item label="消息模板名称：" prop="name">
          <el-input
            v-model="detail.name"
            placeholder="请输入消息模板名称"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="模板类型：" prop="tpl_type">
          <el-select
            v-model="detail.tpl_type"
            placeholder="请选择模板类型"
            :disabled="disabled"
          >
            <el-option
              v-for="item in types"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息详情：" prop="content">
          <el-input
            v-model="detail.content"
            type="textarea"
            placeholder="请输入消息详情，最多可以输入500字。"
            maxlength="500"
            :disabled="disabled"
          ></el-input>
          <p
            class="textarea_count"
            v-text="`还可以输入${500 - detail.content.length}字`"
            v-if="!disabled"
          ></p>
        </el-form-item>
      </el-form>

      <div class="apaas_button detail_action">
        <el-button
          type="default"
          @click="cancelAction"
          :loading="submitLoading"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="primaryAction"
          :loading="submitLoading"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";

export default {
  data: () => ({
    pageType: 0, // 0：新增，1：编辑，2：详情
    detail: {
      name: "",
      tpl_type: "",
      content: "",
    },
    detail_rules: {
      name: [
        {
          required: true,
          message: "请输入消息模板名称",
          trigger: "blur",
        },
        {
          max: 16,
          message: "长度小于16个字符",
          trigger: "blur",
        },
      ],
      tpl_type: [
        {
          required: true,
          message: "请选择模板类型",
          trigger: "blur",
        },
      ],
      content: [
        {
          required: true,
          message: "请输入消息详情，最多可以输入500字。",
          trigger: "blur",
        },
      ],
    },
    types: [
      {
        name: "服务推送",
        value: 1,
      },
      {
        name: "平台维护",
        value: 2,
      },
      {
        name: "版本更新",
        value: 3,
      },
      {
        name: "自动消息",
        value: 4,
      },
    ],
    submitLoading: false,
  }),
  computed: {
    pageName() {
      return ["新增", "编辑", "详情"][this.pageType];
    },
    disabled() {
      return this.pageType === 2;
    },
  },
  created() {
    if (this.$route.name === "message_template_edit") {
      this.pageType = 1;
    } else if (this.$route.name === "message_template_detail") {
      this.pageType = 2;
    }

    if (this.pageType !== 0) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.$http
        .get("/apaas/service/v3/msg/manage/tpl/info", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then(({ data }) => {
          if (data.success == 1) {
            let detail = data.data;

            this.detail.name = detail.name;
            this.detail.tpl_type = detail.tpl_type;
            this.detail.content = detail.content;
          } else {
            this.$message({
              message: data.errMsg || "获取详情失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取详情失败",
            type: "warning",
          });
        });
    },
    addTemplate() {
      this.$http
        .post("/apaas/service/v3/msg/manage/tpl/add", this.detail)
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: "新增消息模板成功",
              type: "success",
            });

            setTimeout(() => {
              this.$router.push("/message/message_template");
            }, 500);
          } else {
            this.$message({
              message: data.errMsg || "新增消息模板失败",
              type: "warning",
            });
          }

          this.submitLoading = true;
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "新增消息模板失败",
            type: "warning",
          });

          this.submitLoading = true;
        });
    },
    editTemplate() {
      this.$http
        .post("/apaas/service/v3/msg/manage/tpl/update", {
          id: this.$route.params.id,
          ...this.detail,
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.$message({
              message: "编辑消息模板成功",
              type: "success",
            });

            setTimeout(() => {
              this.$router.push("/message/message_template");
            }, 200);
          } else {
            this.$message({
              message: data.errMsg || "编辑消息模板失败",
              type: "warning",
            });
          }

          this.submitLoading = true;
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "编辑消息模板失败",
            type: "warning",
          });

          this.submitLoading = true;
        });
    },
    cancelAction() {
      this.$router.push("/message/message_template");
    },
    primaryAction() {
      if (this.pageType === 2) {
        this.$router.push("/message/message_template");
      } else {
        this.$refs.detail_form.validate((valid) => {
          if (valid) {
            this.submitLoading = true;

            this.pageType === 1 ? this.editTemplate() : this.addTemplate();
          } else {
            return false;
          }
        });
      }
    },
  },
};
</script>
