<template>
  <div class="detail-container">
    <header class="action-bar">
      <div class="left">
        <el-button type="text" icon="el-icon-back" @click="goBack" class="back-btn">{{ $t('mailboxMouldDetail.back') }}</el-button>
        <el-divider direction="vertical"></el-divider>
        <span class="page-title">{{ isEditMode ? $t('mailboxMouldDetail.editTemplate') : $t('mailboxMouldDetail.createTemplate') }}</span>
      
      </div>
      <div class="right">
        <el-button size="mini" @click="goBack">{{ $t('mailboxMouldDetail.cancel') }}</el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-document-checked"
          @click="handleSave"
          :loading="saveLoading"
          :disabled="saveLoading || journalLoading"
          :loading-text="$t('mailboxMouldDetail.loading')"
        >
          {{ $t('mailboxMouldDetail.save') }}
        </el-button>
      </div>
    </header>

    <main class="editor-layout" v-loading="journalLoading" :element-loading-text="$t('mailboxMouldDetail.loading')">
      <aside class="config-aside scroll-panel" v-show="!journalLoading">
        <el-form ref="detailForm" label-position="top" :model="form" :rules="rules" size="mini" class="compact-form">
          <div class="section-title"><i class="el-icon-setting"></i> {{ $t('mailboxMouldDetail.basicInfo') }}</div>
          
          <el-form-item prop="title" :label="$t('mailboxMouldDetail.templateTitle')">
            <el-input v-model="form.title" :placeholder="$t('mailboxMouldDetail.templateTitlePlaceholder')"></el-input>
          </el-form-item>

          <el-form-item prop="journalId" :label="$t('mailboxMouldDetail.journal')">
            <el-select v-model="form.journalId" filterable style="width: 100%">
              <el-option v-for="j in journalList" :key="j.journal_id" :label="j.title" :value="String(j.journal_id)" />
            </el-select>
          </el-form-item>

          <el-form-item prop="scene" :label="$t('mailboxMouldDetail.templateType')">
            <el-select v-model="form.scene" style="width: 100%">
              <el-option :label="$t('mailboxMouldDetail.sceneInviteSubmission')" value="invite_submission"></el-option>
              <el-option :label="$t('mailboxMouldDetail.scenePromoteCitation')" value="promote_citation"></el-option>
              <el-option :label="$t('mailboxMouldDetail.sceneGeneralThanks')" value="general_thanks"></el-option>
            </el-select>
          </el-form-item>

          <el-row :gutter="8">
            <el-col :span="14">
              <el-form-item prop="lang" :label="$t('mailboxMouldDetail.languageConfig')">
                <el-radio-group v-model="form.lang" class="full-width-radio">
                  <el-radio-button label="en">EN</el-radio-button>
                  <el-radio-button label="zh">ZH</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="version" :label="$t('mailboxMouldDetail.version')">
                <el-input v-model="form.version" :placeholder="$t('mailboxMouldDetail.versionPlaceholder')"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider></el-divider>

          <div class="section-title"><i class="el-icon-cpu"></i> {{ $t('mailboxMouldDetail.variablesJson') }}</div>
          <el-form-item class="no-m-b">
            <el-input 
              type="textarea" 
              :rows="6" 
              v-model="form.variables" 
              class="dark-json-input" 
              :placeholder="$t('mailboxMouldDetail.variablesPlaceholder')"
            ></el-input>
          </el-form-item>
          
          <div class="status-box">
            <span>{{ $t('mailboxMouldDetail.activeStatus') }}</span>
            <el-switch v-model="form.is_active" :active-value="1" :inactive-value="0"></el-switch>
          </div>
        </el-form>
      </aside>

      <section class="main-editor" v-show="!journalLoading">
        <el-card shadow="never" class="editor-card">
          <div class="subject-input-wrapper">
            <div class="subject-label">{{ $t('mailboxMouldDetail.emailSubject') }}:</div>
            <el-input 
              v-model="form.subject" 
              size="small" 
              :placeholder="$t('mailboxMouldDetail.emailSubjectPlaceholder')"
              class="subject-inner-input"
            ></el-input>
          </div>
          
          <div class="body-editor-container">
            <div class="subject-label" style="margin-bottom: 10px;">{{ $t('mailboxMouldDetail.emailBody') }}:</div>
            <TmrEmailEditor 
      v-model="form.body" 
      placeholder="" 
    />
            <!-- <CkeditorMail v-model="form.body" />  -->
          </div>
        </el-card>
      </section>
    </main>
  </div>
</template>

<script>
import CkeditorMail from '@/components/page/components/email/CkeditorMail.vue';
import TmrEmailEditor from '@/components/page/components/email/TmrEmailEditor.vue';
const API = {
  getAllJournal: 'api/Article/getJournal',
  getTemplate: 'api/mail_template/getTemplate',
  saveTemplate: 'api/mail_template/saveTemplate'
};

export default {
  name: 'mailboxMouldDetail',
  components: { CkeditorMail,TmrEmailEditor },
  data() {
    return {
      journalLoading: true,
      journalList: [],
      saveLoading: false,
      // 防抖：避免重复点击“保存”导致多次请求
      saveDebounceTimer: null,
      rules: {
        journalId: [{ required: true, message: this.$t('mailboxMouldDetail.rulesJournal'), trigger: 'change' }],
        scene: [{ required: true, message: this.$t('mailboxMouldDetail.rulesScene'), trigger: 'change' }],
        lang: [{ required: true, message: this.$t('mailboxMouldDetail.rulesLanguage'), trigger: 'change' }],
        title: [{ required: true, message: this.$t('mailboxMouldDetail.rulesTitle'), trigger: 'blur' }],
        version: [{ required: true, message: this.$t('mailboxMouldDetail.rulesVersion'), trigger: 'blur' }]
      },
      form: {
        journalId: '',
        scene: 'invite_submission',
        lang: 'en',
        version: '1.0.0',
        title: '',
        subject: '',
        body: '',
        variables: '',
        is_active: 1
      }
    };
  },
  computed: {
    isEditMode() {
      const q = this.$route && this.$route.query ? this.$route.query : {};
      return !!(q.template_id || q.id);
    }
  },
  created() {
    this.loadJournals();
  },
  beforeDestroy() {
    if (this.saveDebounceTimer) {
      clearTimeout(this.saveDebounceTimer);
      this.saveDebounceTimer = null;
    }
  },
  methods: {
    loadJournals() {
      this.journalLoading = true;
      const q = this.$route && this.$route.query ? this.$route.query : {};
      const fromRouteJournalId = q.journal_id || q.journalId || '';
      this.$api
        .post(API.getAllJournal, { username: localStorage.getItem('U_name') })
        .then(res => {
          const list = res || [];
          const mapped = (Array.isArray(list) ? list : []).map(j => ({
            journal_id: j.journal_id || j.id,
            title: j.title || j.name || ''
          }));
          this.journalList = mapped;
          if (fromRouteJournalId) {
            const has = mapped.some(j => String(j.journal_id) === String(fromRouteJournalId));
            if (has) this.form.journalId = String(fromRouteJournalId);
          }
          if (!this.form.journalId && mapped.length > 0) this.form.journalId = String(mapped[0].journal_id);
        })
        .catch(() => {
          this.journalList = [];
        })
        .then(() => {
          const q = this.$route && this.$route.query ? this.$route.query : {};
          const templateId = q.template_id || q.id || '';
          if (templateId) {
            return this.loadTemplate(String(templateId));
          }
          return null;
        })
        .finally(() => {
          this.journalLoading = false;
        });
    },
    loadTemplate(templateId) {
      return this.$api.post(API.getTemplate, { template_id: String(templateId) }).then(res => {
        if (!res || res.code !== 0) return;
        const data = (res && res.data) || {};
        const t = data.template || data.detail || data || {};
        if (t.journal_id != null) this.form.journalId = String(t.journal_id);
        if (t.scene != null) this.form.scene = String(t.scene);
        if (t.language != null) this.form.lang = String(t.language).toLowerCase();
        if (t.title != null) this.form.title = String(t.title);
        if (t.subject != null) this.form.subject = String(t.subject);
        if (t.variables_json != null) this.form.variables = String(t.variables_json);
        if (t.version != null) this.form.version = String(t.version);
        if (t.is_active != null) this.form.is_active = Number(t.is_active) === 1 ? 1 : 0;
        const bodyHtml = t.body_html != null ? t.body_html : (t.body != null ? t.body : '');
        this.form.body = String(bodyHtml || '');
      });
    },
    goBack() {
      const q = (this.$route && this.$route.query) || {};
      if (q.from_auto_promotion === '1') {
        this.$router.push({ path: '/autoPromotion' });
        return;
      }
      this.$router.push({ path: '/mailboxMould' });
    },
    handleSave() {
      // 若已在保存中，直接忽略重复点击
      if (this.saveLoading) return;

      // 防抖：连续点击只触发最后一次
      if (this.saveDebounceTimer) {
        clearTimeout(this.saveDebounceTimer);
      }

      this.saveDebounceTimer = setTimeout(() => {
        this.saveDebounceTimer = null;
        this._doSave();
      }, 600);
    }
    ,
    async _doSave() {
      const formRef = this.$refs.detailForm;
      const validatePromise =
        formRef && formRef.validate
          ? new Promise(resolve => formRef.validate(ok => resolve(ok)))
          : Promise.resolve(true);

      const ok = await validatePromise;
      if (!ok) return;

      if (!this.form.subject) {
        this.$message.warning(this.$t('mailboxMouldDetail.rulesSubject'));
        return;
      }
      if (!this.form.body) {
        this.$message.warning(this.$t('mailboxMouldDetail.rulesBody'));
        return;
      }

      this.saveLoading = true;
      try {
        const q = this.$route.query;
        const templateId = q.template_id || q.id || '';
        const bodyHtml = this.form.body || '';
        const bodyText = bodyHtml.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();

        const params = {
          journal_id: String(this.form.journalId || ''),
          scene: String(this.form.scene || 'invite_submission'),
          language: String(this.form.lang || 'en'),
          title: String(this.form.title || ''),
          subject: String(this.form.subject || ''),
          body_html: bodyHtml,
          body_text: bodyText || '',
          variables_json: String(this.form.variables || ''),
          version: String(this.form.version || '1.0.0'),
          is_active: this.form.is_active === 1 ? '1' : '0'
        };

        if (templateId) params.template_id = String(templateId);

        const res = await this.$api.post(API.saveTemplate, params);
        if (res && res.code === 0) {
          this.$message.success(this.$t('mailboxMouldDetail.saveSuccess'));
          this.goBack();
        } else {
          this.$message.error((res && res.msg) || this.$t('mailboxMouldDetail.saveFail'));
        }
      } catch (e) {
        this.$message.error(this.$t('mailboxMouldDetail.saveFail'));
      } finally {
        this.saveLoading = false;
      }
    }
  }
};
</script>

<style scoped>
/* 容器锁定 */
.detail-container { height: 100vh; display: flex; flex-direction: column; background: #f0f2f5; overflow: hidden; }

/* 顶部栏高度压缩 */
.action-bar { 
  height: 40px; 
  background: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 15px; 
  border-bottom: 1px solid #dcdfe6; 
  flex-shrink: 0; 
}
.action-bar .left { display: flex; align-items: center; min-width: 0; }
.page-title { font-size: 13px; font-weight: bold; color: #333; }
.page-subject {
  margin-left: 10px;
  font-size: 12px;
  color: #666;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-layout { flex: 1; display: flex; overflow: hidden; background: #f0f2f5; }

/* 左侧边栏 - 占比 2 (约 20%-25%) */
.config-aside { 
  width: 280px; 
  background: #fff; 
  border-right: 1px solid #dcdfe6; 
  padding: 15px; 
  flex-shrink: 0; 
  display: flex;
  flex-direction: column;
}

.section-title { font-size: 12px; font-weight: bold; color: #409EFF; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.el-divider--horizontal { margin: 15px 0; }

/* 右侧编辑区 - 占比 8 */
.main-editor { 
  flex: 1; 
  padding: 12px; 
  display: flex; 
  flex-direction: column; 
  min-width: 0; 
}

.editor-card { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.editor-card /deep/ .el-card__body { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  padding: 0 !important; 
  overflow: hidden;
}

/* 邮件主题行优化 */
.subject-input-wrapper {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  gap: 10px;
}
.subject-label { font-size: 12px; font-weight: bold; color: #666; white-space: nowrap; }
.subject-inner-input{
border: 1px solid #dcdfe6;
border-radius: 4px;

}
.subject-inner-input /deep/ .el-input__inner { border: transparent; background: transparent; font-weight: 500; font-size: 14px; }
.subject-inner-input /deep/ .el-input__inner:focus { background: #fff; border-color: #dcdfe6; }

/* 编辑器容器撑满 */
.body-editor-container { flex: 1; overflow: hidden; padding: 10px 15px; }
.body-editor-container /deep/ .ck-editor { height: 100%; display: flex; flex-direction: column; }
.body-editor-container /deep/ .ck-editor__main { flex: 1; overflow: auto; }

/* 状态切换栏 */
.status-box { 
  margin-top: auto; 
  padding-top: 15px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 12px; 
  color: #666;
}

/* 黑色背景 JSON 输入框 */
.dark-json-input /deep/ .el-textarea__inner {
  background: #1e1e1e;
  color: #9cdcfe;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #333;
}

/* 滚动条 */
.scroll-panel { overflow-y: auto; }
.scroll-panel::-webkit-scrollbar { width: 4px; }
.scroll-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

/* 表单紧凑微调 */
.detail-container /deep/ .el-form-item--mini.el-form-item { margin-bottom: 12px; }
.detail-container /deep/ .el-form--label-top .el-form-item__label { padding: 0 0 4px; font-size: 12px; color: #999; }
</style>