<script setup>
  import {computed} from "vue";

  const props = defineProps({
    text:{
      type:String,
      default:''
    },
    align:{
      type:String,
      default:'left'
    },
    size:{
      type:[String,Number],
      default:'16px'
    },
    bold:{
      type:[String,Number],
      default:'normal'
    },
    color:{
      type:String,
      default:'#000000'
    },
    lineHeight:{
      type:[String,Number],
      default:'16px'
    },
    display:{
      type:String,
      default:'block'
    },
    lines:{
      type:Number,
    },
    customStyle:{
      type:[String,Object],
      default:{}
    }
  })

  const textStyle = computed(() => {
    return {
      ...uni.$m.addStyle(props.customStyle),
      'text-align':props.align,
      'font-size':props.size,
      'font-weight':props.bold,
      'line-height':props.lineHeight,
      'color':props.color,
      'display':props.display,
    }
  })

  const emit = defineEmits(['click'])
  function handleClick(e){
    emit('click',e);
  }
</script>

<template>
  <view class="m-text-container" :class="[lines && `u-line-${lines}`]" :style="textStyle" @click="handleClick">
    {{text}}
  </view>
</template>

<style scoped lang="scss">

</style>