<template>
  <div class="page-wrapper role-add">
    <div class="page-container">
      <a-form-model
        ref="addForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-collapse
          v-model="activeName"
          :bordered="false"
          expand-icon-position="right"
          class="collapse-header-divide"
        >
          <a-collapse-panel key="a" :header="$t('BASE_INFO')">
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('MESSAGE_TEMPLATE_CODE')"
                  prop="templateCode"
                >
                  <a-input v-model="form.templateCode" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('MESSAGE_TEMPLATE_NAME')"
                  prop="templateName"
                >
                  <a-input v-model="form.templateName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('MESSAGE_TEMPLATE_TITLE')"
                  prop="templateTitle"
                >
                  <a-input v-model="form.templateTitle" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item :label="$t('LANGUAGE')" prop="lang">
                  <a-select v-model="form.lang">
                    <a-select-option
                      v-for="(item, index) in languageList"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  :label="$t('EXTERNAL_CODE')"
                  prop="externalCode"
                >
                  <a-input v-model="form.externalCode" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 22 }"
                  :label="$t('MESSAGE_TEMPLATE_CONTENT')"
                  prop="content"
                >
                  <editor-bar
                    v-model="form.content"
                    :is-clear="isClear"
                    @returnData="getReturnData"
                  ></editor-bar>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </div>
    <div class="page-bottom-op">
      <a-button type="primary" @click="() => handleSave()">
        <Icon type="icon-cur-save_1" :size="18" /> {{ $t("SAVE") }}
      </a-button>
      <a-button @click="() => handleBack()">
        <Icon type="icon-dir-f-rollback" :size="18" /> {{ $t("CANCEL") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import EditorBar from "./components/editor";

export default {
  components: { EditorBar, Icon },
  data() {
    return {
      activeName: "a",
      form: {
        id: "",
        templateCode: "",
        templateName: "",
        templateTitle: "",
        lang: "",
        externalCode: "",
        content: "",
      },
      rules: {
        templateName: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        templateTitle: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        lang: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
      },
      languageList: [], // 语言列表
      content: "<p>I am Example</p>",
      editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // toggled buttons
              ["blockquote", "code-block"],
              ["link", "image"],

              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript
              [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
              [{ direction: "rtl" }], // text direction

              [{ size: ["small", false, "large", "huge"] }], // custom dropdown
              [{ header: [1, 2, 3, 4, 5, 6, false] }],

              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],

              ["clean"], // remove formatting button
            ],
            handlers: {
              image() {
                this.quill.format("image", false); // 禁用quill内部上传图片方法
                // eslint-disable-next-line no-restricted-globals
                self.imgHandler(this);
              },
            },
          },
        },
      },
      isClear: false,
    };
  },
  computed: {},
  mounted() {
    this.queryDictData();
  },
  methods: {
    // 获取返回得数据
    getReturnData(val) {
      this.form.content = val;
    },
    // 获取数据字典数据
    queryDictData() {
      return Promise.all([
        this.getDictByCode(`DIC:MSG:TEMPLATE_LANG`), // 语言列表
      ]).then(([languageRes]) => {
        this.languageList = languageRes.data.data;
      });
    },
    handleSave() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          const req = {
            ...this.form,
          };
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/msg/template`, req)
            .then((res) => {
              this.$message.success(this.$t("ADD_SUCCESS"));
              this.handleBack();
            });
        }
      });
    },
    handleBack() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/upms/service/message/messageTemplate" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ck-editor__editable {
  height: 350px;
  max-height: 350px !important;
}
/deep/ .el-collapse-item__content p {
  color: #232323 !important;
}
</style>
