<template>
  <view>
    <text @click="onClick" :style="textStyle">{{ text }}</text>
  </view>
</template>

<script lang="ts" setup>
import { styleInto } from '../../js/api'
import { computed } from 'vue'
/**
 * text 文本
 * @description 文本组件
 * @tutorial https://dnvue.dengqichang.cn/component/basic_component/n-text.html
 * @property {String, Number} text 文本内容
 * @property {String, Number} size 字号(rpx)
 * @property {String} color 文本颜色
 * @property {String, Number} lines 超出行省略
 * @property {String} align 文本位置
 *  @value left 左侧
 *  @value center 中间
 *  @value right 右侧
 * @property {String, Number} leading 行高
 * @property {Boolean} weight 文本加粗
 * @property {String} decoration 文本修饰
 *  @value none 默认值，定义标准的文本。
 *  @value line-through 定义穿过文本下的一条线
 *  @value underline 定义文本下的一条线
 * @property {String, Number} width 宽度
 * @property {Object} style-custom 组件自定义样式，同 css 样式。注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
 * @event {Function()} click 点击事件
 */

interface propsType {
  text?: string | number
  size?: string | number
  color?: string
  lines?: string | number
  align?: string
  leading?: string | number
  weight?: boolean
  decoration?: string
  width?: string | number
  styleCustom?: any
}
const props = withDefaults(defineProps<propsType>(), {
  text: '',
  size: 30,
  color: '#333333',
  lines: '',
  align: 'left',
  leading: '',
  weight: false,
  decoration: 'none',
  width: '',
  styleCustom: {},
})

const textStyle = computed(() => {
  let oldStyle = {
    fontSize: `${props.size}rpx`,
    textAlign: props.align,
    fontWeight: props.weight ? 'bold' : 'normal',
    textDecoration: props.decoration,
    color: props.color,
  }
  let style = Object.assign(props.styleCustom, oldStyle)
  /* 超出省略 */
  if (!!props.lines) {
    let lines_temp = {
      textOverflow: 'ellipsis',
      lines: props.lines,
      overflow: 'hidden',
      display: '-webkit-box',
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': props.lines,
    }
    style = Object.assign(style, lines_temp)
  }
  /* 行高 */
  if (!!props.leading) {
    style.lineHeight = `${props.leading}rpx`
  }
  /* 宽度 */
  if (props.width !== '') {
    style.width = `${props.width}rpx`
  }
  return styleInto(style)
})
const emit = defineEmits<{
  (e: 'click', data: any): void
}>()
function onClick(e: any) {
  emit('click', e)
}
</script>

<style lang="scss">
</style>
