<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules" :disabled="disabled">
  <span v-if="options.labelDes" slot="label">{{label}}
    <el-tooltip  width="200" trigger="hover" placement="top" effect="dark" :content="options.labelDes">
      <i class="el-icon-question"></i>
    </el-tooltip>
  </span>
  <div  :class="[ellipsisCls]" class="honjo-form-render-plain" :title="formattedValue">
    <span :class="[colorCls]" @dblclick="onDbClick">{{formattedValue}}</span>
  </div>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FormDef, FormOptions, PlainDef, PlainOptions } from '../../type'
import FieldMixins from './FieldMixins'
import { bubble, copyToClipboard } from '../../../../utils/copy'

@Component
export default class PlainControl extends mixins(FieldMixins) {
  get options () {
    return Object.assign(new PlainOptions(), this.def?.options)
  }

  get colorCls () {
    return !this.options.color ? '' : `honjo-text-${this.options.color}`
  }

  get formattedValue () {
    const f = this.options?.formatter
    let value
    if (!f) value = this.value
    else value = f(this.value, this.model, this.form)
    return (!value && value !== 0) ? '-' : value
  }

  get ellipsisCls () {
    return this.options?.ellipsis ? 'honjo-form-render-plain--ellipsis' : ''
  }

  onDbClick (evt: any) {
    if (!this.options?.copiable) return
    const source = evt.target || evt.srcElement
    if (!source) return
    const text = source.textContent
    if (!text) return
    copyToClipboard(text)
    bubble(evt, '复制成功')
  }
}
</script>
