<template>
  <div>
    <div
      class="bg-white absolute row popup-box"
      v-if="chosenText != '' && !showUrl"
      :style="{ left: popup.x + 'px', top: popup.y + 'px' }"
    >
      <div style="padding:0 8px" @click="execComand('bold', null)">
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Text/Bold.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">加粗</q-tooltip>
      </div>
      <div style="padding:0 8px" @click="execComand('strikethrough', null)">
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Text/Strikethrough.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">删除线</q-tooltip>
      </div>
      <div style="padding:0 8px">
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Text/Edit-text.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-popup-proxy :offset="[68, -80]">
          <div class="bg-white flex row popup-box" style="padding:4px 0">
            <div class="mark-item"  @click="execComand('backcolor', 'rgb(255,188,178)')">
              <div class="cricel-box" style="border-color:rgb(255,188,178)">
                <div class="cricel" style="background-color:rgb(255,188,178)"></div>
              </div>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'rgb(251,209,128)')">
              <div class="cricel-box" style="border-color:rgb(251,209,128)">
                <div class="cricel" style="background-color:rgb(251,209,128)"></div>
              </div>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'rgb(255,243,98)')">
              <div class="cricel-box" style="border-color:rgb(255,243,98)">
                <div class="cricel" style="background-color:rgb(255,243,98)"></div>
              </div>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'rgb(176,253,167)')">
              <div class="cricel-box" style="border-color:rgb(176,253,167)">
                <div class="cricel" style="background-color:rgb(176,253,167)"></div>
              </div>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'rgb(167,206,255)')">
              <div class="cricel-box" style="border-color:rgb(167,206,255)">
                <div class="cricel" style="background-color:rgb(167,206,255)"></div>
              </div>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'rgb(223,176,255)')">
              <div class="cricel-box" style="border-color:rgb(223,176,255)">
                <div class="cricel" style="background-color:rgb(223,176,255)"></div>
              </div>
            </div>
            <div class="mark-item" style="width:1px;padding:0 5px;">
              <q-separator vertical color="grey-4" style="height:30px"></q-separator>
            </div>
            <div class="mark-item" @click="execComand('backcolor', 'white')">
               <inline-svg
                class="svg-icon svg-icon-b-p"
                style="margin-top:4px"
                src="icons/svg/Code/Stop.svg"
                width="22px"
                height="22px"
              ></inline-svg>
            </div>
          </div>
        </q-popup-proxy>
        <q-tooltip content-class="bg-black text-white">马克笔</q-tooltip>
      </div>
      <div
        style="padding:0 8px"
        @click="execComand('insertorderedlist', 'decimal')"
      >
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Text/Bullet-list.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">有序列表</q-tooltip>
      </div>
      <div
        style="padding:0 8px"
        @click="execComand('insertunorderedlist', 'big-dot')"
      >
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Text/Bullet-list.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">无序列表</q-tooltip>
      </div>
      <div
        style="padding:0 8px"
        @click="
          showUrl = true;
          chosenText = '';
        "
      >
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/General/Attachment1.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">链接</q-tooltip>
      </div>
      <div style="padding:0 8px">
        <q-separator vertical style="height:18px" color="grey-4"></q-separator>
      </div>
      <div style="padding:0 8px">
        <inline-svg
          class="svg-icon svg-icon-b-p"
          src="icons/svg/Communication/Chat6.svg"
          width="18px"
          height="18px"
        ></inline-svg>
        <q-tooltip content-class="bg-black text-white">评论</q-tooltip>
      </div>
    </div>
    <div
      class="bg-white absolute row popup-box q-px-md"
      :style="{ left: popup.x + 'px', top: popup.y + 50 + 'px' }"
      style="width:auto;height:auto;padding:5px"
      v-if="showUrl"
    >
      <q-input
        dense
        outlined
        v-model="urlAddress"
        placeholder="请输入链接地址"
        class="q-mr-md"
      ></q-input>
      <q-btn
        dense
        color="primary"
        style="width:60px;"
        label="确定"
        @click="addLink"
      ></q-btn>
    </div>
    <div class="progressRemark relative-position">
      <Ueditor
        :value="ueditor.value"
        :config="ueditor.config"
        @input="setVal"
        @focus="editorFocus"
        ref="ue"
        @blur="blur"
        no-margin
        :isShowInsertImage="false"
        :isShowAttachment="false"
        :isShowVoice="false"
        @ready="ueReady"
      ></Ueditor>
      <div
        class="absolute-top-left text-body2 text-grey-5"
        v-if="txt == ''"
        style="z-index:0;top:3px;"
      >
        保持更新，让小伙伴们看到你的进度
      </div>
    </div>
  </div>
</template>

<script>
import Ueditor from "../editor/UeEditor";
export default {
  props: ["value"],
  components: { Ueditor },
  data() {
    return {
      txt: "",
      chosenText: "",
      dat: {
        content: ""
      },
      ueditor: {
        value: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 20,
          autoHeightEnabled: true,
          enableContextMenu: false
        }
      },
      popup: {},
      componentPosition: {},
      urlAddress: "",
      showUrl: false
    };
  },
  mounted() {
    this.setVal(this.value);
    setTimeout(() => {
      this.componentPosition = this.$refs.ue.$el.getBoundingClientRect();
    }, 5000);
  },
  methods: {
    addLink() {
      if (this.urlAddress != "") {
        this.$refs.ue.ue.execCommand("link", {
          url: this.urlAddress,
          title: this.urlAddress,
          target: "_blank",
          textValue: this.chosenText
        });
        this.urlAddress = "";
        this.chosenText = "";
        this.showUrl = false;
      } else {
        this.showUrl = false;
        this.urlAddress = "";
        this.chosenText = "";
      }
    },
    execComand(cmd, param) {
      if (param) {
        this.$refs.ue.ue.execCommand(cmd, param);
      } else {
        this.$refs.ue.ue.execCommand(cmd);
      }
      this.chosenText = "";
    },
    ueReady() {
      let that = this;
      this.componentPosition = this.$refs.ue.$el.getBoundingClientRect();
      this.$refs.ue.ue.document.addEventListener(
        "dblclick",
        e => {
          that.listenersSelection(e);
        },
        false
      );
      this.$refs.ue.ue.document.addEventListener(
        "mouseup",
        e => {
          that.listenersSelection(e);
        },
        false
      );
      this.$refs.ue.ue.document.addEventListener(
        "mousedown",
        e => {
          this.popup.x = e.x + this.componentPosition.x - 248;
          this.popup.y = e.y + this.componentPosition.y - 240;
          this.chosenText = "";
        },
        false
      );
    },
    returnContent() {
      this.dat.content = this.$refs.ue.getUEContent();
    },
    showContent() {
      this.show = !this.show;
    },
    setVal(val) {
      this.txt = val;
      this.ueditor.value = decodeURIComponent(val);
      this.chosenText = "";
    },
    changeText(val) {
      this.txt = val;
    },
    blur(html) {
      this.$emit("update:value", html);
      this.$emit("blur",html);
    },
    focus() {
      //this.$refs.div.focus();
      this.$refs.ue.focus();
    },
    editorFocus() {
      this.$emit("focus");
    },
    listenersSelection(e) {
      let text = "";
      let u = this.$refs.ue.ue;
      if (u.window.getSelection) {
        text = u.window.getSelection().toString();
      } else if (
        u.document.selection &&
        u.document.selection.type != "Control"
      ) {
        text = u.document.selection.createRange().text;
      }
      this.chosenText = text;
    }
  },
  // watch: {
  //   value(val) {
  //     this.setVal(this.value);
  //   }
  // }
};
</script>

<style>
.progressRemark .edui-default .edui-editor-toolbarbox {
  display: none;
}
.progressRemark .edui-default .edui-editor-bottomContainer {
  display: none;
}
.progressRemark .edui-default .edui-editor {
  border: none !important;
  background-color: transparent !important;
}
.popup-box {
  border-radius: 5px;
  border: 1px solid #eee;
  height: 40px;
  z-index: 999999;
  padding: 11px 0;
}
.mark-item{
  width: 34px;
  padding:0 2px;
}
.mark-item .cricel-box{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:0px solid transparent;
  padding: 6px;
}
.mark-item:hover .cricel-box{
  border-width: 2px;
  padding: 4px;
}
.mark-item .cricel{
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
</style>
