<template>
  <view class="base-text">
    <view :style="textStyle">{{ text }}</view>
  </view>
</template>

<script>
export default {
  name: 'base-text',
  props: {
    text: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '62px',
    },
    height: {
      type: String,
      default: '26px',
    },
    fontSize: {
      type: String,
      default: '14px',
    },
    color: {
      type: String,
      default: '',
    },
    background: {
      type: String,
      default: '',
    },
    borderRadius: {
      type: String,
      default: '4px',
    },
    textAlign: {
      type: String,
      default: 'center',
    },
  },
  data() {
    return {};
  },
  computed: {
    textStyle() {
      const { width, height, fontSize, color, background, borderRadius, textAlign } = this;

      return {
        width,
        height,
        fontSize,
        color,
        background,
        borderRadius,
        textAlign,
        lineHeight: height,
      };
    },
  },
};
</script>