<!-- 角色管理 -->
<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="form_content apaas_scroll_nor">
        <el-form label-width="80px" :model="formData" :rules="rules" ref="ruleForm">
          <el-form-item label="文档类型">
            <el-input disabled v-model="docTypeName"> </el-input>
          </el-form-item>
          <el-form-item label="文档名称" prop="title">
            <el-input v-model="formData.title" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item class="editor" label="文档内容" prop="content">
            <mavon-editor
              class="mark-down-edit"
              ref="editorRef"
              v-model="formData.content"
              :box-shadow="false"
              :autofocus="false"
              placeholder="请输入正文"
              @img-add="(...arg) => $imgAdd(arg, editorRef)" />
          </el-form-item>
        </el-form>
      </div>
      <div class="operate_btns">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="publish">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed, ref, onBeforeMount, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import { $imgAdd } from "../../helper";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";

const route = useRoute();
const router = useRouter();

const ruleForm = ref(null);
const editorRef = ref();
const state = reactive({
  //表单数据
  formData: {
    classify_id: route.query.classify_id,
    title: "",
    content: "",
  },
  //表单校验规则
  rules: {
    title: [
      {
        required: true,
        message: "请输入",
        trigger: "blur",
      },
    ],
  },
  docTypeNameArr: ["平台公开"],
});
const { formData, rules } = toRefs(state);

const docTypeName = computed(() => {
  return state.docTypeNameArr.join("/");
});
onBeforeMount(() => {
  getTypeTree();
});

const getTypeTree = () => {
  axios.get(`/apaas/knowledge/v5/documentmgr/classify/tree`).then((res) => {
    if (res.data.code == 200) {
      const result = res.data.data || [];
      getDocTypeName(result[0].children, route.query.classify_id);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
const getDocTypeName = (data, classifyId) => {
  const findItem = data.find((item) => item.classify_id === classifyId);
  if (findItem) {
    state.docTypeNameArr.push(findItem.classify_name);
    return true;
  }
  data.find((item) => {
    if (item.children && item.children.length) {
      const res = getDocTypeName(item.children, classifyId);
      if (res) {
        state.docTypeNameArr.splice(state.docTypeNameArr.length - 2, 0, item.classify_name);
      }
      return res;
    }
  });
};
//取消
const cancel = () => {
  router.push("/support/document");
};
//发布
const publish = () => {
  ruleForm.value.validate((valid, fields) => {
    let params = {
      ...state.formData,
    };
    if (valid) {
      axios.post(`/apaas/knowledge/v5/documentmgr/document/add`, params).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          router.push("/support/document");
        } else {
          ElMessage.error(res.data.data);
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.page_container {
  .main_container {
    position: relative;
    margin: 0 0 16px;
    width: 100%;
    height: calc(100% - 62px);
    padding: 24px 0 70px;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    .form_content {
      overflow: auto;
      width: 60%;
      min-width: 972px;
      height: 100%;
      padding-left: 35px;
    }
    .mark-down-edit {
      height: 525px;
      border: solid 1px #dadee7;
    }

    .operate_btns {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70px;
      text-align: right;
      line-height: 68px;
      border-top: solid 1px #e6e9ef;
      .el-button {
        width: 92px;
        margin-right: 16px;
      }
    }
  }
}
</style>
