<template>
  <!-- 公告编辑 -->
  <div class="showGoodsIdx">
    <s-header :name="$t('announcement.header')" :noback="false"></s-header>
    <van-cell-group inset>
      <van-field v-model="title" label="标题" placeholder="请输入标题" />
    </van-cell-group>
    <div style="width: 100%">
      <TinymceEditor v-model="content" @input="inputContent" />
    </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>
</template>

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


export default {
  components: { sHeader, TinymceEditor },
  setup() {
    const { t } = useI18n();
    const router = useRouter();
    const title = ref("");
    const content = ref("");

    const inputContent = (newVal) => {
      // console.log(newVal)
      content.value = newVal;
    }

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

    // 引入语言
    return {
      inputContent,
      title,
      content,
      sumbitNotice
    };
  },
};
</script>

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


.btn {
  position: relative;
  width: 200px;
}
</style>
