<template>
  <div>
    <div class="base_form">
      <div class="label">
        <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
        <div class="label-text" :title="label">{{ label }}</div>
      </div>
      <tinymce
        @input="getContent"
        :value="richTextValue"
        class="tinymce22 flex-grow overflow-hidden"
      ></tinymce>
    </div>
  </div>
</template>

<script lang="ts">
import tinymce2Vue from "../../TraceProofEdit/tinymce2.vue";
import Icon from "@/components/Icon/index.vue";
// ??????该组件需要开发
import { defineComponent } from "vue";
export default defineComponent({
  //   引入组件
  components: {
    tinymce: tinymce2Vue,
    Icon,
  },
  props: ["label", "property", "setPropertyValue"],
  data() {
    return {
      richTextValue: "",
    };
  },
  mounted() {
    this.richTextValue = this.property.value;
  },
  computed: {},
  methods: {
    getContent(val: any) {
      this.setPropertyValue(val);
    },
  },
});
</script>
<style scoped lang="scss">
:deep(.mce-resizehandle) {
  display: none;
}
.base_form {
  position: relative;
  padding-left: 18px;

  height: 480px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
}
.tinymce22 {
  height: 400px;
  margin: 0;
  margin-top: 20px;
}
.label {
  display: inline-block;
  width: 100px; /* 104 - 18 */
  flex-shrink: 0;
  height: 44px;
  line-height: 480px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}
.pre-tag {
  position: absolute;
  left: -50px;
  top: 14px;
  display: none;
}
</style>
