<template>
  <div
    class="editor-page"
    v-loading="addLoading"
    :class="{ 'no-scroll': addLoading }"
  >
    <h2 style="margin-bottom: 20px">
      {{ $t("backendSystem.addDocument") || "新增文档" }}
    </h2>

    <!-- 页面头部 -->

    <div class="page-header">
      <div class="header-left">
        <div class="title-section">
          <i class="el-icon-edit-outline title-icon"></i>
          <h1 class="page-title">
            {{
              $t("backendSystem.wangeditor") || "wangeditor 富文本文档编辑器"
            }}
          </h1>
        </div>
      </div>
      <div class="header-actions">
        <el-button
          type="primary"
          icon="el-icon-link"
          @click="handleInsertAnchor"
        >
          {{ $t("backendSystem.insertAnchor") || "插入锚点" }}
        </el-button>
        <el-button type="info" icon="el-icon-view" @click="handlePreview">
          {{ $t("backendSystem.previewDocument") || "预览文档" }}
        </el-button>
        <el-button type="success" icon="el-icon-document" @click="handleSave">
          {{ $t("backendSystem.saveDocument") || "保存文档" }}
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="handleReset">
          {{ $t("backendSystem.reset") || "重置" }}
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-upload2"
          @click="handelAddDocument"
        >
          {{ $t("backendSystem.publishDocument") || "发布文档" }}
        </el-button>
     
      </div>
    </div>

    <!-- 文档配置区域 -->
    <div class="config-section">
      <div class="section-header">
        <i class="el-icon-setting"></i>
        <span>{{
          $t("backendSystem.documentConfiguration") || "文档配置"
        }}</span>
      </div>

      <div class="config-content">
        <div class="config-row">
          <div class="config-item">
            <label>{{
              $t("backendSystem.navigationTitle") || "导航标题"
            }}</label>
            <el-input
              v-model="addParams.title"
              :placeholder="
                $t('backendSystem.pleaseInputDocumentTitle') || '请输入文档标题'
              "
              @input="handleAutoSave"
              size="medium"
               maxlength="30"
               show-word-limit
            />
          </div>
          
          <div class="config-item">
            <label class="required">{{
              $t("backendSystem.documentType") || "文档类型"
            }}</label>
            <el-cascader
              :options="TypeList"
              v-model="typeArray"
              @change="handleAutoSaveType(typeArray)"
            
              :placeholder="
                $t('backendSystem.pleaseSelectDocumentType') || '请选择文档类型'
              "
              :props="{
                label: 'label',
                value: 'value',
                children: 'children',
              }"
            />
          </div>
        </div>
      </div>

      <div class="config-content">
        <div class="config-row">
          <div class="config-item">
            <label>{{
              $t("backendSystem.titleImageAddress") || "标题图片地址"
            }}</label>
            <el-input
              v-model="addParams.titleUrl"
              :placeholder="
                $t('backendSystem.pleaseInputImageAddress') || '请输入图片地址'
              "
              @input="handleAutoSave"
              size="medium"
      
            />
          </div>

          <div class="config-item">
            <label>{{
              $t("backendSystem.articleAccessAddress") || "文章访问地址"
            }}</label>
            <el-input
              v-model="addParams.articleUrl"
              :placeholder="
                $t('backendSystem.pleaseInputAccessAddress') || '请输入访问地址'
              "
              @input="handleAutoSave"
              size="medium"
              maxlength="50"
              show-word-limit
            />
          </div>
        </div>
      </div>
      <div class="config-content">
        <div class="config-row">
          <div class="config-item">
            <label >{{
              $t("backendSystem.coin2") || "币种"
            }}</label>
            <el-select
              class="input"
              size="middle"
              ref="screen"
              @change="changeScreen(screenCurrency)"
              v-model="screenCurrency"
              clearable
              @clear="handleClearScreen"
              :placeholder="$t(`backendSystem.selectCurrency`)"
            >
              <el-option
                v-for="item in currencyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
            
                <div style="display: flex; align-items: center">
                  <img :src="item.imgUrl" style="float: left; width: 20px" />
                  <span style="float: left; margin-left: 5px">
                    {{ item.label }}</span
                  >
                </div>
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑器区域 -->
    <div class="editor-section">
      <div class="section-header">
        <i class="el-icon-edit-outline"></i>
        <span>{{ $t("backendSystem.richTextEditor") || "富文本编辑器" }}</span>
      </div>
      <div class="editor-container">
        <div ref="editor" ></div>
      </div>
    </div>

    <!-- 预览文档对话框 -->
    <el-dialog
      :title="$t('backendSystem.documentPreview') || '文档预览'"
      :visible.sync="previewVisible"
      width="80%"
      :before-close="handlePreviewClose"
      class="preview-dialog wangeditor-preview"
    >
      <div class="preview-content">
        <div v-html="addParams.content" class="dynamic-content"></div>

        <div v-if="!addParams.content" class="preview-empty">
          <i class="el-icon-document"></i>
          <p>{{ $t("backendSystem.noContent") || "暂无内容" }}</p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false">{{
          $t("backendSystem.close") || "关闭"
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import E from "wangeditor";
import { addDocument } from "../../../api/documentManagement";
import Index from "./index";
export default Vue.extend({
  mixins: [Index],
  data() {
    return {
      editor: null,
      html: "", // 编辑器内容
      hasSetEditorContent: false, // 避免重复 set 内容
      mode: "default",
      addParams: {
        title: "",
        content: "",
        type: "",
        lang: "",
        titleUrl: "",
        articleUrl: "",
        childType: "",
        coin: "",
      },
      lastSaveTime: "",
      autoSaveTimer: null,
      isSaving: false, // 新增：控制自动保存提示的显示
      previewVisible: false, // 新增：控制预览对话框的显示
      currentTime: "", // 新增：记录预览时间
      TypeList: [
        // {
        //   value: "1",
        //   label: "服务条款",
        // },
        // {
        //   value: "2",
        //   label: "api文档",
        // },
        // {
        //   value: "3",
        //   label: "挖矿教程",
        // },
        // {
        //   value: "0",
        //   label: "其他",
        // },
      ],

      addLoading: false,
      typeArray: [],
      currencyList: [],
      screenCurrency: "",
    };
  },
  mounted() {
    this.currencyList = JSON.parse(localStorage.getItem("currencyList"));
    window.addEventListener("setItem", () => {
      this.currencyList = JSON.parse(localStorage.getItem("currencyList"));
    });
    try {
      this.TypeList = JSON.parse(localStorage.getItem("TypeList"));
      this.TypeList = this.TypeList.map((item) => ({
        // 翻译label
        ...item,
        label: this.$t(item.label),
        children: item.children
          ? item.children.map((child) => ({
              ...child,
              label: this.$t(child.label),
            }))
          : undefined,
      }));
    } catch (error) {
      console.log(error);
    }

    // 先恢复数据
    this.loadFromLocalStorage();

    // 添加页面卸载前的保存保护
    window.addEventListener("beforeunload", this.handleBeforeUnload);

    // 删除默认内容设置，保持编辑器初始化为空
    // setTimeout(() => {
    //   if (!this.addParams.content) {
    //     this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    //   }
    // }, 1500);

    this.editor = new E(this.$refs.editor);
    this.editor.config.height = 600;
    this.editor.config.onchange = (html) => {
      this.html = html;
      this.addParams.content = html;
    };
    //配置颜色
    this.editor.config.colors = [
      `#651FFF`,
      `#FF4081`,
      `#FF9900`,
      `#FFC107`,
      `#FF5722`,
      `#9C27B0`,
      `#673AB7`,
      `#3F51B5`,
      "#000000", // 黑色
      "#ffffff", // 白色
      "#eeece0", // 浅米色
      "#1c487f", // 深蓝
      "#4d80bf", // 蓝色
      "#c24f4a", // 红色
      "#8baa4a", // 绿色
      "#a96b59", // 棕色
      "#2b2b2b", // 深灰
      "#b6975a", // 金色
      "#5b9bd5", // 天蓝
      "#70ad47", // 草绿
      "#ed7d31", // 橙色
      "#ffc000", // 黄色
      "#7030a0", // 紫色
      "#f4b084", // 浅橙
      "#bdd7ee", // 浅蓝
      "#a9d08e", // 浅绿
      "#ffe699", // 浅黄
      "#d9d9d9", // 浅灰
      "#f8cbad", // 浅棕
      "#e2efda", // 淡绿
      "#fff2cc", // 淡黄
      "#dbe5f1", // 淡蓝
      "#e4dfec", // 淡紫
      "#fbeee6", // 淡橙
      "#f6f6f6", // 极浅灰
      "#ff0000", // 纯红
      "#00b050", // 纯绿
      "#0070c0", // 纯蓝
      "#7030a0", // 纯紫
      "#ff9900", // 纯橙
      "#808080", // 中灰
    ];
    //配置字体
    (this.editor.config.fontNames = [
      // 对象形式 v4.6.16
      { name: "黑体", value: "黑体" },
      { name: "绝绝字体", value: "Times New Roman" },
      // 字符串形式
      "黑体",
      "仿宋",
      "楷体",
      "标楷体",
      "华文仿宋",
      "华文楷体",
      "宋体",
      "微软雅黑",
      "Arial",
      "Tahoma",
      "Verdana",
      "Times New Roman",
      "Courier New",
    ]),
      // 不自定义菜单，使用官方默认菜单栏
      this.editor.create();
    // 只在初始化时 set 一次内容
    if (this.addParams.content && !this.hasSetEditorContent) {
      this.editor.txt.html(this.addParams.content);
      this.html = this.addParams.content;
      this.hasSetEditorContent = true;
    }
  },
  methods: {
    async fetchAddDocument(params) {
      this.setLoading("addLoading", true);
      const res = await addDocument(params);
      if (res && res.code == 200) {
        this.$message.success(this.$t("backendSystem.updateSuccess"));
        // 发布成功后清除本地草稿
        const LOCAL_STORAGE_KEY = "editor_draft_add";
        sessionStorage.removeItem(LOCAL_STORAGE_KEY);
        this.$router.push({ path: `/${this.$i18n.locale}/documentManagement` });
        for (const key in this.addParams) {
          this.addParams[key] = "";
        }
        if (this.editor) {
          this.editor.txt.clear();
        }
      }
      this.setLoading("addLoading", false);
    },

    /**
     * 编辑器创建后回调，确保 this.editor 正确赋值
     * @param {Object} editor wangEditor 实例
     */
    onCreated(editor) {
      this.editor = editor;
      console.log("编辑器已初始化", this.editor);
       
      // 编辑器创建后，如果有恢复的内容，设置到编辑器中
      if (this.addParams.content) {
        this.$nextTick(() => {
          this.editor.txt.html(this.addParams.content);
        });
      }
    },

    handelAddDocument() {
      this.addParams.title = this.addParams.title.trim();
       // 强制同步编辑器内容
       if (this.editor) {
          this.addParams.content = this.editor.txt.html();
        }
        console.log(this.addParams.content, "this.addParams.content");
      if (!this.addParams.content) {
        this.$message({
          message:
            this.$t("backendSystem.pleaseInputContent2") ||
            "请输入内容",
          type: "warning",
          duration: 4000,
          showClose: true,
        });
        return;
      }
      if (!this.addParams.title) {
        this.$message({
          message:
            this.$t("backendSystem.pleaseInputTitle") ||
            "请输入标题",
          type: "warning",
          duration: 4000,
          showClose: true,
        });
        return;
      }
      console.log(this.addParams.type,this.typeArray, "this.addParams.type");
      
      if (!this.addParams.type ) {
        this.$message({
          message:
            this.$t("backendSystem.pleaseSelectDocumentType") ||
            "请填写文档类型",
          type: "warning",
          duration: 4000,
          showClose: true,
        });
        return;
      }

      if (this.addParams.type == `0` && (!this.addParams.childType || this.addParams.childType == `0`) ) {
        this.$message({
          message: this.$t('backendSystem.pleaseInputType') || '请填写文档类型',
          type: "warning",
          duration: 4000,
          showClose: true,
        });
        return;
      }
      
   
      

      if (this.addParams.type == "1" && !this.screenCurrency) {
        this.$message({
          message:
            this.$t("backendSystem.pleaseSelectCurrency2") ||
            "添加挖矿教程,请选择币种",
          type: "warning",
          duration: 4000,
          showClose: true,
        });
        return;
      }

      if (this.addParams.content) {
        //锚点定位的A标签 去掉target="_blank"
        this.addParams.content = this.addParams.content.replace(
          /<a([^>]*href="#[^"]*")[^>]*>/gi,
          function (match) {
            return match.replace(/\s*target="_blank"/gi, "");
          }
        );
      }


      this.addParams.coin = this.screenCurrency
      console.log(this.addParams.content, "this.addParams.content");

      this.fetchAddDocument(this.addParams);
    },

    handlePreview() {
      this.previewVisible = true;
      this.currentTime = new Date().toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
    },

    handlePreviewClose() {
      this.previewVisible = false;
    },

    handleSave() {
      // 保存前彻底去除所有锚点链接的 target="_blank"
      this.addParams.content = this.addParams.content.replace(
        /<a([^>]*href="#([^"]*)")[^>]*>/gi,
        function (match) {
          // 去掉 target="_blank"
          return match.replace(/\s*target="_blank"/gi, "");
        }
      );
      this.manualSave();
      this.$message({
        message:
          this.$t("backendSystem.contentSaved") ||
          "内容已保存到本地，请尽快发布，关闭页面可能丢失内容",
        type: "success",
        duration: 4000,
        showClose: true,
      });
    },

    handleEditorChange() {
      this.handleAutoSave();
    },
    handleAutoSaveType(type) {
      if (type.length == 0) return;
      console.log(`走这里了嘛`,type);
      
      try {
        let item = this.TypeList.find((item) => item.value === type[0]);
        if (item.articleUrl) {
          this.addParams.articleUrl = item.articleUrl;
        } else {
          this.addParams.articleUrl = "";
        }
        this.addParams.type = type[0];
        this.addParams.childType = type[1];
      } catch (error) {
        console.log(error, "error");
      }

      // 显示正在保存状态
      this.isSaving = true;

      if (this.autoSaveTimer) {
        clearTimeout(this.autoSaveTimer);
      }

      this.autoSaveTimer = setTimeout(() => {
        this.saveToLocalStorage();
      }, 1500); // 减少到1.5秒，提高响应速度
    },

    handleAutoSave() {
      // 显示正在保存状态
      this.isSaving = true;

      if (this.autoSaveTimer) {
        clearTimeout(this.autoSaveTimer);
      }

      this.autoSaveTimer = setTimeout(() => {
        this.saveToLocalStorage();
      }, 1500); // 减少到1.5秒，提高响应速度

   
    },

    saveToLocalStorage() {
      try {
        // 确保获取最新的编辑器内容
        if (this.editor) {
          this.addParams.content = this.editor.txt.html();
        }

        const saveData = {
          title: this.addParams.title,
          content: this.addParams.content,
          type: this.addParams.type,
          imageUrl: this.addParams.imageUrl,
          timestamp: new Date().toLocaleString("zh-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
          }),
          lastModified: Date.now(),
        };

        const LOCAL_STORAGE_KEY = "editor_draft_add";
        sessionStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(saveData));
        this.lastSaveTime = saveData.timestamp;
        this.isSaving = false;
      } catch (error) {
        console.error("自动保存失败:", error);
        this.isSaving = false;
      }
    },

    loadFromLocalStorage() {
      try {
        const LOCAL_STORAGE_KEY = "editor_draft_add";
        const savedData = sessionStorage.getItem(LOCAL_STORAGE_KEY);
        if (savedData) {
          const data = JSON.parse(savedData);
          console.log(data, "data");
          
          // 检查数据是否过期（7天）
          const isExpired =
            Date.now() - (data.lastModified || 0) > 7 * 24 * 60 * 60 * 1000;

          if (isExpired) {
            console.log("本地数据已过期，清除缓存");
            sessionStorage.removeItem(LOCAL_STORAGE_KEY);
            return;
          }

          // 使用 $nextTick 确保 DOM 更新后再设置内容
          this.$nextTick(() => {
        
            if (data.type !== `0`) {            
              
                this.addParams.title = data.title || "";
              this.addParams.content = data.content || "";
              this.addParams.type = data.type || "";
              this.addParams.imageUrl = data.imageUrl || "";
              this.lastSaveTime = data.timestamp || "";
              console.log(data.type,this.typeArray, "data.type");
              this.typeArray = [data.type];
              // 如果编辑器已经创建，直接设置内容
              if (this.editor) {
                this.editor.txt.html(data.content || "");
              }
            }
           
          });
        }
      } catch (error) {
        console.error("恢复数据失败:", error);
      }
    },

    clearDraft() {
      const LOCAL_STORAGE_KEY = "editor_draft_add";
      sessionStorage.removeItem(LOCAL_STORAGE_KEY);
      this.lastSaveTime = "";
      this.isSaving = false;
    },

    // 新增：手动保存方法
    manualSave() {
      // 确保获取最新的编辑器内容
      if (this.editor) {
        this.addParams.content = this.editor.txt.html();
      }
      this.saveToLocalStorage();
    },

    // 页面卸载前处理
    handleBeforeUnload(event) {
      // 自动保存，不提示用户
      if (this.addParams.title || this.addParams.content) {
        // 确保获取最新的编辑器内容
        if (this.editor) {
          this.addParams.content = this.editor.txt.html();
        }
        this.saveToLocalStorage();
      }
    },

    // 新增：获取文档类型名称
    getDocumentTypeName(type) {
      switch (type) {
        case "1":
          return "服务条款";
        case "2":
          return "api文档";
        case "3":
          return "挖矿教程";
        case "0":
          return "其他";
        default:
          return "未知类型";
      }
    },

    /**
     * 插入锚点（源码模式下插入HTML）
     */
    handleInsertAnchor() {
      if (!this.editor) {
        this.$message.warning("编辑器尚未初始化");
        return;
      }
      this.$prompt(
        this.$t("backendSystem.pleaseInputAnchorName") ||
          "请输入锚点名称（不能重复）",
        this.$t("backendSystem.insertAnchor") || "插入锚点",
        {
          confirmButtonText: this.$t("backendSystem.confirm") || "确定",
          cancelButtonText: this.$t("backendSystem.cancel") || "取消",
          inputPattern: /^[a-zA-Z0-9_-]+$/,
          inputErrorMessage:
            this.$t("backendSystem.anchorNameErrorMessage") ||
            "锚点名只能包含字母、数字、下划线和中划线",
        }
      )
        .then(({ value }) => {
          this.editor.cmd.do("insertHTML", `<span id="${value}"></span>`);
          this.html = this.editor.txt.html();
          this.addParams.content = this.html;
          this.$message.success(
            this.$t("backendSystem.anchorInserted") || "锚点已插入"
          );
        })
        .catch(() => {});
    },

    /**
     * 给选中的标题添加id属性作为锚点
     */
    handleAddHeadingId() {
      if (!this.editor) {
        this.$message.warning("编辑器尚未初始化");
        return;
      }
      // 获取当前选中的标题节点
      const headers = this.editor.getElemsByTypePrefix("header");
      if (!headers || headers.length === 0) {
        this.$message.warning(
          this.$t("backendSystem.pleaseSelectHeader") ||
            "请先选中一个标题（h1~h6）"
        );
        return;
      }
      const node = headers[0];
      this.$prompt(
        this.$t("backendSystem.pleaseInputAnchorID") ||
          "请输入锚点ID（不能重复）",
        this.$t("backendSystem.titleAnchor") || "标题锚点",
        {
          confirmButtonText: this.$t("backendSystem.confirm") || "确定",
          cancelButtonText: this.$t("backendSystem.cancel") || "取消",
          inputPattern: /^[a-zA-Z0-9_-]+$/,
          inputErrorMessage:
            this.$t("backendSystem.anchorIDErrorMessage") ||
            "ID只能包含字母、数字、下划线和中划线",
        }
      )
        .then(({ value }) => {
          this.editor.setElemAttribute(node, "id", value);
          this.$message.success(
            this.$t("backendSystem.anchorIDAdded") || "锚点ID已添加"
          );
        })
        .catch(() => {});
    },

    /**
     * 重置表单和编辑器内容
     */
    handleReset() {
      // 清空表单数据
      for (const key in this.addParams) {
        this.addParams[key] = "";
      }
      // 清空富文本编辑器内容
      if (this.editor) {
        this.editor.txt.clear();
      }
      // 清除本地草稿
      const LOCAL_STORAGE_KEY = "editor_draft_add";
      sessionStorage.removeItem(LOCAL_STORAGE_KEY);
      this.$message.success(
        this.$t("backendSystem.contentReset") || "内容已重置"
      );
    },
  },

  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  },

  beforeRouteLeave(to, from, next) {
    // 确保获取最新的编辑器内容
    if (this.editor) {
      this.addParams.content = this.editor.txt.html();
    }
    this.saveToLocalStorage();
    next();
  },
});
</script>

<style lang="scss" scoped>
/* 页面整体样式 */
.editor-page {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  min-height: 60vh;
  overflow-y: auto;
}

/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-left {
  flex: 1;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.title-icon {
  font-size: 28px;
  margin-right: 12px;
  color: #ffd700;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-description {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  line-height: 1.6;
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.header-actions .el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.header-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 配置区域样式 */
.config-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f8f9fa;
  color: #2c3e50;
  font-weight: 600;
  font-size: 18px;
}

.section-header i {
  margin-right: 10px;
  color: #667eea;
  font-size: 20px;
}

.config-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 18px;
}

.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.config-item {
  display: flex;
  flex-direction: column;
}

.config-item label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.required::after {
  content: "*";
  color: #e74c3c;
  margin-left: 4px;
  font-weight: bold;
}

/* 编辑器区域样式 */
.editor-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  min-height: 650px;
  position: relative;
  z-index: 1;
}

/* 设置编辑器高度 */
::v-deep .editor-container .w-e-text-container {
  // height: 600px !important;
  min-height: 600px !important;
  z-index: 1 !important;
  position: relative;
}
::v-deep .w-e-toolbar {
  z-index: 10 !important;
  position: relative;
}

/* 编辑器内容区域样式 */
.editor-container .w-e-text {
  height: 600px !important;
  min-height: 600px !important;
}

/* 保存状态样式 */
.save-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #67c23a;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 预览对话框样式 */
.preview-dialog .el-dialog__body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 9999;
}

.preview-dialog .el-dialog__header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

.preview-dialog .el-dialog__header .el-dialog__title {
  color: #333;
  font-weight: 600;
}

.preview-dialog .el-dialog__footer {
  background-color: #f8f9fa;
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

.preview-dialog .el-dialog__footer .dialog-footer {
  text-align: right;
}

.preview-dialog .el-dialog__footer .dialog-footer .el-button {
  border-radius: 6px;
  padding: 8px 15px;
  font-weight: 500;
}

.preview-dialog .el-dialog__footer .dialog-footer .el-button:first-child {
  margin-right: 10px;
}

.preview-dialog .el-dialog__footer .dialog-footer .el-button:last-child {
  background-color: #667eea;
  border-color: #667eea;
}

.preview-dialog .el-dialog__footer .dialog-footer .el-button:last-child:hover {
  background-color: #5a67d8;
  border-color: #5a67d8;
}

/* 预览内容样式 - 简化版本 */
.preview-content {
  background: white;
  padding: 20px;
}

.preview-empty {
  text-align: center;
  padding: 50px 20px;
  color: #95a5a6;
}

.preview-empty i {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
}

.preview-empty p {
  margin: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .editor-page {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .header-actions {
    width: 100%;
    justify-content: center;
  }

  .config-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .save-status {
    bottom: 10px;
    right: 10px;
    left: 10px;
    text-align: center;
    justify-content: center;
  }
}

/* Element UI 组件样式优化 */
.el-input,
.el-select {
  border-radius: 8px;
}

.el-input__inner,
.el-select .el-input__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.el-input__inner:focus,
.el-select .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

/* -------富文本样式-------------- */
.dynamic-content {
  width: 100%;
  margin: 0 auto;

  :deep(table) {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
  }
  :deep(th),
  :deep(td) {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    text-align: left;
  }
  :deep(th) {
    background: #f3f4f6;
    font-weight: bold;
  }
  :deep(strong),
  :deep(b) {
    font-weight: bold !important;
    color: inherit !important;
    font-style: normal !important;
  }
  :deep(em),
  :deep(i) {
    font-style: italic !important;
    color: inherit !important;
  }
  :deep(a) {
    color: #007bff !important;
    text-decoration: none !important;
    &:hover {
      text-decoration: underline !important;
    }
  }
}

.no-scroll {
  overflow: hidden !important;
}
</style>