<template>
  <!-- 本组件参照：https://blog.csdn.net/weixin_41897680/article/details/124925222-->
  <div class="hljs-container">
    <div class="hljs-container_copy" @click="handleCopy">复制</div>
    <div class="hljs-container_cnt" :codetype="props.language">
      <highlightjs :language="props.language" :autodetect="!props.language" :code="props.code" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { unref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';

  defineOptions({
    name: 'Highlight',
  });
  const props = defineProps({
    language: {
      type: String,
      default: () => undefined,
    },
    code: {
      type: String,
      default: () => '无',
    },
  });
  const { createMessage } = useMessage();
  const { clipboardRef, copiedRef } = useCopyToClipboard();

  // 复制代码
  const handleCopy = _e => {
    const value = unref(props.code);
    if (!value) {
      createMessage.warning('复制失败！');
      return;
    }
    clipboardRef.value = value;
    if (unref(copiedRef)) {
      createMessage.success('复制成功！');
    }
  };
</script>

<style scoped lang="less">
  .hljs-container {
    position: relative;
    overflow-y: hidden;
    height: 100%;

    &_copy {
      background: #1c1e24;
      color: #fff;
      text-align: right;
      cursor: pointer;
      padding: 4px 10px;
      box-shadow: 2px 2px 3px rgb(12 12 12 / 60%);
    }

    &_cnt {
      overflow: auto;
      height: 100%;
      padding: 0 0 10px;
    }
  }
  /* 语法高亮 */
  /*.hljs-container {
		position: relative;
		display: block;
		padding: 30px 5px 2px;
		overflow-x: hidden;
		line-height: 20px;
		text-align: left;
		background: #21252b;
		box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
	}*/
  /** 3个点 */
  /*.hljs-container::before {
		position: absolute;
		top: 10px;
		left: 15px;
		width: 12px;
		height: 12px;
		overflow: visible;
		font-weight: 700;
		font-size: 16px;
		line-height: 12px;
		white-space: nowrap;
		text-indent: 75px;
		background-color: #fc625d;
		border-radius: 16px;
		box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
		content: attr(codetype);
	}*/

  /** 滚动条 */
  /*:deep(.hljs,.hljs-container) {
		max-height: 300px!important;
		overflow-x: auto;
	}

	:deep(.hljs::-webkit-scrollbar) {
		width: 12px !important;
		height: 12px !important;
	}

	:deep(.hljs::-webkit-scrollbar-thumb) {
		height: 30px !important;
		background: #d1d8e6;
		background-clip: content-box;
		border: 2px solid transparent;
		border-radius: 19px;
		opacity: 0.8;
	}

	:deep(.hljs::-webkit-scrollbar-thumb:hover) {
		background: #a5b3cf;
		background-clip: content-box;
		border: 2px solid transparent;
	}

	:deep(.hljs::-webkit-scrollbar-track-piece) {
		width: 30px;
		height: 30px;
		background: #333;
	}

	::-webkit-scrollbar-button {
		display: none;
	}*/
</style>
