<template>
  <ReturnHead
    text="发讨论"
    :showpublish="true"
    :publishWork="publishWork"
    v-model:postAdd="postAdd"
  ></ReturnHead>
  <div
    class="discussupload"
    :style="{
      height: screenHeight - 73.5 + 'px',
    }"
  >
    <div class="inputcontainer">
      <div class="inputt">
        <div class="i_title">
          <el-input
            type="text"
            id="input_title"
            placeholder="请输入标题"
            v-model="titleName"
          />
        </div>
        <div class="discusscontent">
          <!-- <el-input
            type="textarea"
            placeholder="请输入正文"
            v-model="textarea"
            autosize
          ></el-input> -->
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="min-height: 300px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>

      <!-- <div class="imgcon">
        <div class="linecon">
          <div class="line"></div>
        </div>
        <div class="allimg">
          <img src="../../assets/image/discuss/images.png" />
          <img src="../../assets/image/discuss/pre.png" />
          <img src="../../assets/image/discuss/next.png" />
          <img src="../../assets/image/discuss/delete.png" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  toRefs,
  shallowRef,
  onBeforeUnmount,
  computed,
} from "vue";
import { request, useRequest } from "@/api/request";
import ReturnHead from "@/components/ReturnHead.vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { fileUp, videoUp } from "../../api/request";
import { PostAdd } from "@/api/api";
import { ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import store from "@/store";
import { ElMessage } from "element-plus";
const router = useRouter();
const {
  query: { discussId, id, type },
} = useRoute();
const state = reactive({
  text: "",
  textarea: "",
  screenHeight: document.body.clientHeight, // 屏幕高度
  disTitle: null,
});
const userInfo = computed(() => store.state.userInfo);
// 使用
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
const closeLoading = () => {
  loading.value.close();
};
//发布讨论
const publishWork = () => {
  console.log("点击了发布");
};

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
const titleName = ref("");
const toolbarConfig = {
  excludeKeys: ["insertVideo", "uploadVideo", "insertImage", "group-video"],
};

const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };

editorConfig.MENU_CONF["uploadImage"] = {
  // 自定义上传
  async customUpload(file, insertFn) {
    openLoading();
    const formData = new FormData();
    formData.append("file", file);
    fileUp(formData).then((res) => {
      closeLoading();
      if (res.data.code === 200) {
        // 最后插入图片  url alt href
        insertFn(
          import.meta.env.VITE_FILE_PATH + res.data.data,
          file.name,
          import.meta.env.VITE_FILE_PATH + res.data.data
        );
      }
    });
  },
};
editorConfig.MENU_CONF["uploadVideo"] = {
  // 自定义上传
  async customUpload(file, insertVideoFn) {
    openLoading();
    const formData = new FormData();
    formData.append("file", file);
    console.log("file", file, insertVideoFn);
    videoUp(formData).then((res) => {
      console.log("res", res);
      if (res.data.code === 200) {
        closeLoading();
        // 最后插入图片  url alt href
        insertVideoFn(res.data.data, file.name, res.data.data);
      }
    });
  },
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 发表帖子发布操作
const postAdd = () => {
  console.log("用户信息", userInfo.value);
  if (titleName.value == "") {
    return ElMessage.warning("评论标题为空");
  }
  let obj = {
    collectionNum: 0,
    commentNum: 0,
    content: valueHtml.value,
    ctime: "",
    discussId: discussId,
    id: 0,
    type: type,
    taskId: id,
    mtime: "",
    praiseNum: 0,
    status: 0,
    title: titleName.value,
    userAvatar: userInfo.value.avatar,
    userId: userInfo.value.userId,
    userJobName: userInfo.value.jobName,
    userName: userInfo.value.realName,
    userOrgName: userInfo.value.orgName,
  };
  console.log("发表帖子传递的参数", obj);
  request(PostAdd, obj)
    .then((res) => {
      console.log(res);
      if (res.code == 200) {
        ElMessage.success("发帖成功");
        titleName.value = "";
        valueHtml.value = "";
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss">
.clearfix:before,
clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.discussupload {
  width: 100%;
  // height: 100%;
  background-color: #fff;
  // margin-top: 73.5px;
  .inputcontainer {
    margin-top: 10px;
    background-color: #fff;
    width: 100%;
    // height: 100px;
    // display: flex;
    // justify-content: center;
    // height: 80%;
    height: 100%;
    .inputt {
      width: 100%;
      height: calc(100% - 79px);
      // height: 100px;
      // padding-bottom: 79px;

      .discusscontent {
        height: 100%;
        overflow-y: scroll;
      }
    }

    .i_title {
      margin-left: 16.5px;
      width: 90%;
      border-bottom: 1px solid #f1f2f3;
      margin-bottom: 5px;
      ::-webkit-input-placeholder {
        font-size: 16px;
        font-weight: 500;
        color: #04243c;
      }
      :-ms-input-placeholder {
        font-size: 16px;
        color: #04243c;
      }
      #input_title {
        width: 100%;
        height: 100%;
        margin: 18.5px auto 21px 0px;
        border: none;
        outline: none;
      }
      .el-input__wrapper {
        background-color: rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
      }
      .el-input__wrapper:hover {
        box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
      }
      .el-input__wrapper:focus {
        box-shadow: 0 0 0 0px var(--el-input-hover-border-color) inset;
      }
    }
    ::v-deep .el-textarea__inner {
      resize: none;
      border-color: transparent;
      height: 100%;
    }
    ::v-deep .el-textarea:focus {
      border-color: transparent;
    }
    ::v-deep .el-textarea {
      height: 100%;
    }
    .el-textarea__inner {
      border: 0 !important;
      resize: none !important; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
      box-shadow: none !important;
      padding: 16px 18px;
    }
    .el-textarea__inner:hover {
      box-shadow: none !important;
      border: 0 !important;
    }
    .el-textarea__inner:focus {
      border: none;
      border: 0 !important;
    }
    .imgcon {
      // margin-top: 24.5px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      background-color: #fff;
      .linecon {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        .line {
          width: 90%;
          height: 0;
          border-top: 1px solid #f1f2f3;
        }
      }
      .allimg {
        width: 70%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 24.5px;
        margin-top: 24.5px;
        img {
          width: 20px;
          height: 19px;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
