<template>
  <div
    class="editorCon"
    :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
    ref="editorCon"
    @click="handleClick"
  >
  </div>

  <BasicModal
    @register="registerModal"
    v-bind="$attrs"
    :draggable="false"
    :destroy-on-close="true"
    :width="800"
    title="编辑内容"
    @ok="handleSubmit"
  >
    <div class="p-5">
      <RichTextEditor v-model:value="textValue" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { onMounted, ref, watch } from 'vue';

  import { RichTextEditor } from '/@/components/RichTextEditor';

  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    width: {
      type: [String, Number],
    },
  });
  const [registerModal, { openModal, closeModal }] = useModal();

  const editorCon = ref();
  const textValue = ref(props.value);
  const emits = defineEmits(['update:value', 'change', 'click']);
  watch(
    () => props.value,
    () => {
      editorCon.value.innerHTML = props.value;
    },
  );
  onMounted(() => {
    editorCon.value.innerHTML = props.value || '<div style="color:#999">请点击编辑内容</div>';
  });

  function handleClick() {
    if (props.disabled) return;
    emits('click');
    openModal();
  }
  function handleSubmit() {
    editorCon.value.innerHTML = textValue.value;
    emits('update:value', textValue.value);
    emits('change', textValue.value);
    closeModal();
  }
</script>

<style lang="less" scoped>
  .editorCon {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>
