<template>
  <!-- doc文档的新增或更新笔记-->
  <el-dialog
    :title="formData.id ? '编辑笔记' : '新增笔记'"
    :visible.sync="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
  >
    <el-form
      :model="form"
      label-width="80px"
      :rules="rules"
      ref="form"
      size="mini"
    >
      <el-form-item label="原文" prop="bookmarkContent">
        <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 label="标记方式">
        <el-radio-group v-model="markingMode">
          <el-radio label="下划线">
            <svg-icon
              icon-class="underline"
              style="margin-right: 4px"
            ></svg-icon
            >下划线
          </el-radio>
          <el-radio label="高亮">
            <svg-icon
              icon-class="highlight2"
              style="margin-right: 4px"
            ></svg-icon
            >高亮
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标记颜色">
        <el-row class="color-container">
          <el-col
            @click.native="handleClickColor(item)"
            :span="6"
            v-for="(item, index) in colorList"
            :key="index"
            :class="[`color-item`, currentColor == item ? 'active' : '']"
            :style="{ background: item }"
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <div class="buttons">
          <el-button
            style="width: 100%"
            type="primary"
            size="mini"
            @click.native="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: () => ({}),
    },
    // formData: {
    //   type: Object,
    //   default: () => ({
    //     id: "", //笔记id
    //     docId: "", //文档Id
    //     bookmarkContent: "", //笔记内容
    //     noteContent: "", //标签，提交给后台的时候使用多个用逗号分割
    //     tagsArr: [], //笔记标签
    //     jsonStr: {
    //       markingMode: "下划线", //标记方式
    //       color: "#ffff00", //标记颜色
    //     },
    //   }),
    // },
  },
  data() {
    return {
      dialogVisible: false, //新建笔记窗口可见性
      form: {
        id: "", //笔记ID，新增时没有
        docId: "", //文档ID
        docSType: "doc", //文档类型
        bookmarkContent: "", //原文
        noteContent: "", //笔记
        tagsArr: "", //标签，提交给后台的时候使用多个用逗号分割
        jsonStr: {
          markingMode: "下划线",
          color: "#ffff00", //标记颜色
        },
        type: "note", //	笔记类型，新增时必传，[underline-下划线,note-笔记,highlight-高亮]
        offset: "0", //偏移量，新增时必传
        sectionId: "0", //父节点ID，新增时必传
      },
      options: [], //标签可选项
      rules: {
        bookmarkContent: [
          {
            required: true,
            message: "请输入原文",
            trigger: "change",
          },
        ],
        noteContent: [
          {
            required: true,
            message: "请输入笔记",
            trigger: "change",
          },
        ],
      },
      loading: false,
      colorList: [
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#ff00ff",
        "#0000ff",
        "#ff0000",
        "#000080",
        "#008080",
        "#008000",
        "#800080",
        "#800000",
        "#808000",
        "#808080",
        "#c0c0c0",
        // "#000000",
      ],
      currentColor: "#ffff00",
      markingMode: "下划线",
    };
  },
  watch: {
    formData: {
      handler(value) {
        this.form = { ...this.form, ...value };
        console.log('this.form',this.form);
        const { jsonStr } = this.form;
        // 解析从后台穿过来的json串，如果没有值则需要给默认值
        if (jsonStr && typeof jsonStr == "string") {
          this.form.jsonStr = JSON.parse(jsonStr);
        }
        this.currentColor = this.form.jsonStr.color; //回显颜色
        this.markingMode = this.form.jsonStr.markingMode; //回显标记方式
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //提交新增笔记
    handleSubmitAddNote() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const formData = new FormData();
          this.form.jsonStr.color = this.currentColor;
          this.form.jsonStr.markingMode = this.markingMode;
          this.form.jsonStr = JSON.stringify(this.form.jsonStr); //字符串化jsonStr,传给后台的是json字符串
          for (const key in this.form) {
            if (key == "tagsArr") {
              formData.append("tags", this.form.tagsArr.join(","));
            } else if (key == "id") {
              // 只有id有值的时候才append
              if (this.form.id != "") {
                formData.append("id", this.form.id);
              }
            } 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");
          }
          // 清空表单项
          this.$refs.form.resetFields();
        }
      });
    },

    //取消新增笔记
    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 = [];
      }
    },
    // 点击选择颜色
    handleClickColor(color) {
      this.currentColor = color;
    },
  },
};
</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;
  }
}
.color-container {
  .color-item {
    width: 20px;
    height: 20px;
    margin: 0 8px 8px 0;
    border: 2px solid transparent;
    cursor: pointer;
    &:hover {
      border: 2px solid #666;
    }
  }
  .active {
    border: 2px solid #666;
  }
}
</style>
