<script setup lang="ts">
import { useClipboard } from "@/libs/clipboard.lib";
import type { ChapterSearchDocResponse } from "@/types/search.types";
import { message } from "ant-design-vue";
import { ExclamationCircleFilled } from "@ant-design/icons-vue";
import type { PropType } from "vue";

const props = defineProps({
  data: {
    type: Object as PropType<ChapterSearchDocResponse>,
    required: true
  },
  used: {
    type: Boolean,
    required: false,
  },
  serialNumber: {
    type: Number,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "insert", text: string): void;
  (e: "recordUse", sectionId: number): void;
  (e: "recordCancel", sectionid: number): void;
}>();

const clipboard = useClipboard()

function getSelectedText() {
  if (window.getSelection) {
    const range = window.getSelection()
    return range?.toString()
  } else {
    message.warning("暂不支持此版本浏览器选择复制")
  }
  return null
}

/**
 * 清理文本当中的em标签
 * @param {string} text 文本
 * @returns {string} 清理后的文本
 */
function purnText(text: string): string {
  if (!text) {
    return text
  }
  const re = new RegExp("</?em>", "gi");
  return text.replace(re, '')
}

function onRecordUse() {
  emits("recordUse", props.data.id)
}

function onRecordCancel() {
  emits("recordCancel", props.data.id)
}

function onCopy() {
  const selectedText = getSelectedText()
  const text = purnText(selectedText || props.data.content)
  const msg = selectedText && "复制所选内容成功" || "复制内容成功"
  clipboard.copy(text).then(() => {
    message.success(msg)
  })
}

function onInsertion() {
  const text = purnText(getSelectedText() || props.data.content)
  emits("insert", text)
}

function section(content: string, number: number) {
  let tag: string = "</span><br/>";
  let section: string = "<span style='padding-left: 2em;'>";

  let result: string = ""
  let sentenceArr: string[] | null = content.match(/。/g);
  if (sentenceArr && sentenceArr.length > number) {
     let length = sentenceArr.length;
     for (let i = 0; i < length; i++) {
        if (i > 0 && i % number == 0) {
          result += (section + tag);
          section= "<span style='padding-left: 2em;'>";
        }
        let index = content.indexOf("。");
        section += content.slice(0, index+1);
        content = content.slice(index+1);
     }   
     return result;
  }
  return content;
}
</script>

<template>
  <h3>
    <span>{{ serialNumber }}. </span>
    <a v-if="data.docId" :href="'/detail/' + data.docId" target="_blank">{{ data.title }}</a>
    <span v-else>{{ data.title }}</span>
  </h3>
  <div class="meta">
    <a-space style="row-gap: 0px;column-gap: 8px;">
      <span v-if="data.journalName">期刊名称：{{ data.journalName }}</span> <br />
      <span v-if="data.year">时间：{{ data.year }}</span>
      <span v-for="(item, index) in data.unitScholars" :key="index">
        {{ item.scholarName }} {{ item.unitName }}
      </span>
    </a-space>
  </div>
  <h4 class="section-title" v-html="data.section"></h4>
  <div class="content-wrap" :class="{'used': used}">
    <exclamation-circle-filled v-if="used" />
    <span class="content" v-html="section(data.content, 3)"></span>
  </div>
  <div class="btn-group">
    <a-radio-group>
      <a-radio-button value="large" @click="onRecordUse" v-if="!used">标记使用</a-radio-button>
      <a-radio-button value="large" @click="onRecordCancel" v-if="used">取消标记</a-radio-button>
      <a-radio-button value="default" @mousedown="onCopy">复制</a-radio-button>
      <a-radio-button value="small" @mousedown="onInsertion">插入</a-radio-button>
    </a-radio-group>
  </div>
</template>

<style scoped lang="scss">
.meta .ant-space {
  flex-wrap: wrap;
  font-size: 12px;
}
.section-title {
  margin: 4px 0 4px 0;
  :deep em {
    color: red;
    font-style: normal;
  }
}
.content-wrap {
  &.used {
    color: #bebebe;
  }

  :deep .content em {
    color: red;
    font-style: normal;
  }
}
.btn-group {
  margin-top: 0.8em;
}
</style>