<template>
  <!-- doc文档的新增或更新笔记-->
  <el-dialog
    :title="formData.docId ? '编辑笔记' : '新增笔记'"
    :visible.sync="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    v-loading="loading"
  >
    <el-form :model="form" label-width="50px" :rules="rules" ref="form" size="mini">
      <el-form-item label="原文">
        <el-input
          type="textarea"
          rows="5"
          v-model="form.bookmarkContent"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="笔记" prop="noteContent">
        <el-input
          placeholder="请输入笔记"
          v-model="form.noteContent"
          type="textarea"
          rows="5"
        ></el-input>
      </el-form-item>
      <el-form-item label="标签" disabled style="width: 100%">
        <el-select
          style="width: 100%"
          v-model="form.tagsArr"
          multiple
          filterable
          remote
          default-first-option
          allow-create
          placeholder="请输入文章标签（可多个）"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="buttons">
          <el-button
            style="width: 100%"
            type="primary"
            size="mini"
            icon="el-icon-check"
            @click="handleSubmitAddNote"
            >提交</el-button
          >
          <el-button
            style="width: 100%"
            size="mini"
            type="text"
            @click="handleCancelSubmit"
            >取消</el-button
          >
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addOrUpdateNoteDoc } from "@/api/doc/bookMark";
import { tagSuggest } from "@/api/doc/tag";

export default {
  props: {
    formData: {
      type: Object,
      default: () => ({
        id: "", //笔记id
        docId: "", //文档Id
        bookmarkContent: "", //笔记内容
        noteContent: "", //标签，提交给后台的时候使用多个用逗号分割
        tagsArr: [], //笔记标签
      }),
    },
  },
  data() {
    return {
      dialogVisible: false, //新建笔记窗口可见性
      form: {
        id: "",
        docId: "",
        docSType: "doc", //文档类型
        bookmarkContent: "", //原文
        noteContent: "", //笔记
        tagsArr: "", //标签，提交给后台的时候使用多个用逗号分割
        type: "note", //	笔记类型，新增时必传，[underline-下划线,note-笔记,highlight-高亮]
        offset: "0", //偏移量，新增时必传
        sectionId: "0", //父节点ID，新增时必传
      },
      options: [], //标签可选项
      rules: {
        noteContent: [
          {
            required: true,
            message: "请输入笔记",
            trigger: "change",
          },
        ],
      },
      loading: false,
    };
  },
  watch: {
    formData: {
      handler(value) {
        this.form = { ...this.form, ...value };
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //提交新增笔记
    handleSubmitAddNote() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const formData = new FormData();
          for (const key in this.form) {
            if (key == "tagsArr") {
              formData.append("tags", this.form.tagsArr.join(","));
            } else {
              formData.append(key, this.form[key]);
            }
          }
          let res = await addOrUpdateNoteDoc(formData);
          this.loading = false;
          if (res.code == 200) {
            this.$message.success("操作成功！");
            this.dialogVisible = false;
            this.$emit("update");
          }
        }
      });
    },

    //取消新增笔记
    handleCancelSubmit() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    // 远程搜索标签
    remoteMethod(keyword) {
      if (keyword !== "") {
        this.loading = true;
        const params = {
          keyword,
        };
        tagSuggest(params).then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.options = res.data.map((item) => {
              return {
                label: item.tagName,
                value: item.id,
              };
            });
          }
        });
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  .el-button + .el-button {
    margin-left: 0;
      margin-top: 10px;
  }
}
</style>
