<template>
  <el-container>
    <el-aside width="300px" style="margin: 5px">
      <el-button type="primary" style="margin-bottom: 10px" @click="handleAdd">
        <el-icon><plus /></el-icon>
        添加文档
      </el-button>
      <el-menu default-active="1" class="help-menu" @select="handleSelect">
        <recursive-menu :items="menuItems" :handle-add="handleAddChild" />
      </el-menu>
    </el-aside>
    <el-main v-show="showEditor">
      <el-form
        ref="ruleFormRef"
        :model="docInfo"
        :rules="rules"
        class="help-content"
      >
        <el-form-item>
          <el-button type="primary" @click="handleSave(ruleFormRef)">
            保存
          </el-button>
          <el-button type="danger" @click="handleDel">删除</el-button>
          <span class="split">|</span>
          <el-switch
            v-model="docInfo.status"
            class="ml-2"
            inline-prompt
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="2"
          />
          <span class="split">|</span>
          排序值：<el-input-number
            v-model="docInfo.sort"
            placeholder="排序值"
          />
        </el-form-item>
        <el-form-item prop="label">
          <el-input v-model="docInfo.label" placeholder="标题" />
        </el-form-item>
        <MarkdownEditor :value="docInfo.content" />
      </el-form>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";
import { useHelp } from "@/views/help/index";
import RecursiveMenu from "@/components/RecursiveMenu.vue";
import { computed, ref } from "vue";
import MarkdownEditor from "@/components/MarkdownEditor";
import { updateValue } from "@/components/MarkdownEditor/index";
import { ElMessageBox, FormInstance } from "element-plus";

const { menuItems, loadDocData, docInfo, save, del, resetForm } = useHelp();
const ruleFormRef = ref<FormInstance>();

const rules = {
  label: [
    {
      required: true,
      message: "输入标题",
      trigger: "blur"
    }
  ]
};

// 根据docInfo的label和content是否存在来判断是否显示编辑器
const showEditor = computed(() => {
  return docInfo.value.id !== undefined;
});

const handleAdd = () => {
  resetForm(0);
};

const handleAddChild = item => {
  resetForm(item.id);
};

const handleSelect = async (key: string) => {
  await loadDocData(key);
};

const handleSave = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      docInfo.value.content = updateValue.value;
      save();
    } else {
      console.log("error submit!");
    }
  });
};

const handleDel = () => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning"
  })
    .then(() => {
      del();
    })
    .catch(() => {});
};
</script>

<style scoped>
.help-menu {
  height: 100%;
  border-right: solid 1px var(--el-menu-border-color);
}

.el-aside {
  background-color: var(--el-menu-bg-color);
}

.el-main {
  padding: 20px;
}
</style>
