<template>
  <!-- 公告编辑 -->
  <div class="showGoodsIdx">
    <s-header :name="$t('announcement.header')" :noback="false"></s-header>
    <div class="showGoodsIdxBox">
      <van-cell-group class="headerMenu" inset>
        <van-field name="radio" label="公司平台">
          <template #input>
            <van-radio-group v-model="companyType" direction="horizontal">
              <van-radio name="0">申泽</van-radio>
              <van-radio name="1">七云</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="title" label="标题" placeholder="请输入标题" />
      </van-cell-group>
      <!-- 替换为WangEditor -->
      <div class="mobile-editor">
        <Toolbar
          class="editor-toolbar"
          :editor="editorRef"
          :mode="'simple'"
          :defaultConfig="toolbarConfig"
        />
        <Editor
          class="editor-content"
          v-model="contentHtml"
          :defaultConfig="editorConfig"
          @onCreated="handleCreated"
        />
      </div>
      <div
        class="o-mt-50"
        style="display: flex; justify-content: center; align-items: center"
      >
        <van-button class="btn" round type="primary" @click="sumbitNotice"
          >提交</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { ref, shallowRef, onBeforeUnmount } from "vue";
import sHeader from "../../components/SimpleHeader";
import { addNotice } from "@/service/user";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { showFailToast, showSuccessToast } from "vant";

// 引入WangEditor
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: {
    sHeader,
    Editor,
    Toolbar,
  },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const title = ref("");
    const companyType = ref("0");

    // WangEditor相关变量
    const editorRef = shallowRef();
    const contentHtml = ref(""); // 替代原来的content

    // 移动端优化配置
    const toolbarConfig = {
      excludeKeys: [
        "group-video",
        "insertTable",
        "codeBlock",
        "blockquote",
        "group-more-style", // 移除更多样式
      ],
      toolbarKeys: [
        "bold",
        "italic",
        "underline",
        "color",
        "fontSize",
        "bulletedList",
        "numberedList",
        "undo",
        "redo",
      ],
      modalAppendToBody: false,
    };

    const editorConfig = {
      placeholder: "请输入公告内容...",
      mode: "simple",
      scroll: true, // 禁用编辑器滚动（由外层容器控制）
      autofocus: true,
      minHeight: "350px",
    };

    const handleCreated = (editor) => {
      editorRef.value = editor;
    };

    const sumbitNotice = async () => {
      let addParams = {
        title: title.value,
        note: contentHtml.value, // 使用contentHtml替代原来的content
        companyType: companyType.value,
      };
      console.log("addParams", addParams);
      const { data } = await addNotice(addParams);
      if (data.code == "00000") {
        showSuccessToast(t("announcement.successfully"));
        setTimeout(() => {
          router.push("/home");
        }, 1500);
      } else {
        showFailToast(`${t("announcement.failed")} ${data.message}`);
      }
    };

    // 组件销毁时及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    return {
      title,
      companyType,
      sumbitNotice,
      // WangEditor相关
      editorRef,
      contentHtml,
      toolbarConfig,
      editorConfig,
      handleCreated,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";

.btn {
  position: relative;
  width: 200px;
}

.showGoodsIdxBox {
  background: #f5f6fa;
  height: calc(100% - 50px);
  overflow: auto;
  overflow-x: hidden;
}

.headerMenu {
  margin: 12px;
}

/* 移动端编辑器样式优化 */
.mobile-editor {
  margin: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.editor-toolbar {
  padding: 8px 4px !important;
  // border-bottom: 1px solid #e0e0e0;
  // flex-wrap: wrap;
  // overflow-x: auto;
  // -webkit-overflow-scrolling: touch;

  /* 适配Vant主题 */
  background-color: var(--van-gray-1);

  // .w-e-bar-item {
  //   margin: 2px !important;
  //   padding: 6px !important;
  //   border-radius: var(--van-border-radius-sm);

  //   &:active {
  //     background-color: var(--van-active-color);
  //   }
  // }
}

/* 解决移动端输入法弹起时高度问题 */
.editor-content {
  height: 50vh; /* 使用视口高度 */
  min-height: 350px;

  // -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
  padding: 12px;
  font-family: var(--van-font-family);
  font-size: var(--van-font-size-md);
  line-height: 1.6;
  color: var(--van-text-color);

  /* 禁用双指缩放（避免与页面缩放冲突） */
  touch-action: pan-y;

  /* 文本选择优化 */
  user-select: text;
  -webkit-user-select: text;
}
</style>
