<template>
  <div class="wrap">
    <p>
      <span class="content-tittle-txt">知识属性</span>
    </p>
    <page-add
      @dataChange="getWorkBasicData"
      ref="pageModalRef"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfigRef"
    />
    <p>
      <span class="content-tittle-txt">关联附件</span>
    </p>
    <div>
      <el-upload
        v-model:file-list="fileList"
        :headers="headers"
        class="upload-demo"
        :action="uploadURL"
        :on-remove="handleRemoveSuccess"
        :on-success="handleSuccess"
        :limit="1"
      >
        <!-- <el-upload v-model:file-list="fileList"> -->
        <el-button :icon="Upload">上传</el-button>
      </el-upload>
    </div>
    <p>
      <span class="content-tittle-txt">内容摘要</span>
    </p>
    <div>
      <TEditor ref="editor" v-model="EditorContent" :disabled="disabled" @getContent="getContent" />
    </div>
    <div style="height: 50px; width: 1"></div>
    <div class="creatBtn">
      <el-button type="primary" style="margin: 15px" @click="creatBtn">提交</el-button>
    </div>
  </div>
</template>
<script setup name="AddKonwledge">
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { Upload } from '@element-plus/icons-vue';
  import TEditor from '@/components/TEditor/TEditor.vue';
  import PageAdd from '@/components/page-add';
  import { useRouter } from 'vue-router';

  import { createPageData, editPageData, getPageDetail } from '@/api/main/system/system';

  import { getToken } from '@/utils/auth';
  import { modalConfig } from './config/modal.config';
  import { usePageModal } from '@/hooks/use-page-add';
  import useSelectStore from '@/store/commonSelect/common';
  const router = useRouter();

  import { ref } from 'vue';
  const { proxy } = getCurrentInstance();
  const workBasicData = ref({});
  const formData = ref({});
  const docId = ref('');
  const patnView = useRouter().currentRoute.value;
  const fileId = ref('');
  // onUpdated(() => {
  //   initMethod();
  // });
  onMounted(() => {
    initMethod();
  });
  function initMethod() {
    docId.value = useRouter().currentRoute.value.query.docId;
    if (docId.value) {
      getKnowledgeDetail(docId.value);
    }
  }
  function getKnowledgeDetail(docId) {
    getPageDetail('/km/doc/' + docId).then((data) => {
      if (data.data) {
        defaultInfo.value = data.data;
        EditorContent.value = data.data.content;
        if (data.data.fileId) {
          fileId.value = data.data.fileId;
          getPageDetail('/km/docfile/' + data.data.fileId).then((data) => {
            console.log(data);
            // EditorContent.value += data.data.fileContent;
            fileList.value.push({
              name: data.data.originalName,
              url: import.meta.env.VITE_APP_BASE_API + data.data.physicalPath,
            });
          });
        }
      }
    });
  }
  function creatBtn() {
    console.log(EditorContent.value);
    console.log(encodeURIComponent(EditorContent.value));
    console.log(workBasicData.value);

    formData.value = workBasicData.value;
    // formData.value.content = encodeURIComponent(EditorContent.value);
    formData.value.content = EditorContent.value;
    console.log(formData.value.fileId, docId.value);
    if (!docId.value) {
      formData.value.fileId = getFileID(fileList.value);
    } else {
      if (!fileId.value) {
        formData.value.fileId = getFileID(fileList.value);
      } else {
        formData.value.fileId = fileId.value;
      }
    }

    pageModalRef.value.formRef.ruleFormRef.validate((bool) => {
      if (bool) {
        if (docId.value) {
          formData.value.docId = docId.value;
          editPageData('/km/doc', formData.value).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            proxy.$tab.closePage(patnView).then(({ visitedViews }) => {
              router.push({
                path: '/knowledgeBase/knowledgeList',
              });
            });
          });
        } else {
          createPageData('/km/doc', formData.value).then((data) => {
            proxy.$modal.msgSuccess('新增成功！');
            proxy.$tab.closePage(patnView).then(({ visitedViews }) => {
              router.push({
                path: '/knowledgeBase/knowledgeList',
              });
            });
          });
        }
      }
    });
  }
  function handleSuccess(data) {
    console.log(data.data.fileContent);
    EditorContent.value += data.data.fileContent;
  }
  function handleRemoveSuccess(data) {
    console.log(data);
    fileId.value = '';
  }
  const EditorContent = ref('');
  const getContent = (v) => {};
  const fileList = ref([]);
  const headers = ref({
    Authorization: 'Bearer ' + getToken(),
  });
  const uploadURL = ref(import.meta.env.VITE_APP_BASE_API + '/km/docfile/upload');
  function getFileID(fileData) {
    let idString = '';
    if (fileData.length > 0) {
      idString = fileData[0].response.data.fileId;
    }

    return idString;
  }
  // 工单基础信息
  const getWorkBasicData = (item) => {
    console.log(item);
    workBasicData.value = item;
  };
  defineExpose({
    getWorkBasicData,
  });
  const modalConfigRef = computed(() => {
    const LabelItem = modalConfig.formItems.find((item) => item.field === 'label');
    LabelItem.options = [...useSelectStore().knowledgeLabeTree];
    const categoryItem = modalConfig.formItems.find((item) => item.field === 'category');
    categoryItem.options = [...useSelectStore().knowledgeTypeTree];
    const directoryItem = modalConfig.formItems.find((item) => item.field === 'directory');
    directoryItem.options = [...useSelectStore().knowledgeCatalogTree];
    return modalConfig;
  });
  // 1.处理逻辑
  const newCallback = () => {};
  const editCallback = () => {};
  usePageModal(newCallback, editCallback);
  // 2.动态添加部门和角色列表

  // 3.调用hook获取公共变量和函数
  const [pageModalRef, defaultInfo] = usePageModal(newCallback, editCallback);
</script>

<style lang="scss" scoped>
  .content-tittle-txt {
    margin-top: 12px;
    margin-bottom: 12px;
    color: #000c17;
    border-left: 5px solid #0a84ff;
    font-size: 16px;
    display: inline-block;
    font-weight: bolder;
    padding-left: 15px;
    margin-right: 5px;
  }
  .wrap {
    background: white;
    padding: 20px;
    border-radius: 10px;
    .creatBtn {
      position: fixed;
      bottom: 0px;
      left: 200px;
      width: calc(100% - 200px);
      background: #ffffff;
      box-shadow: 0 3px 10px 1px #dedede;
      -webkit-box-shadow: 0 3px 10px 1px #dedede;
      text-align: right;
    }
  }
</style>
