<!--
  标题-值显示组件
  @author: 张文
  @date: 2022-06-16
-->
<template>
  <div
    :class="[
      'ty-global-flex-between',
      isRow && (!isRowStart && !isRowEnd) ? 'ty-global-row' : '',
      isRowStart ? 'ty-global-row-start' : '',
      isRowEnd ? 'ty-global-row-end' : '',
    ]"
    @click="$emit('click')"
  >
    <span
      style="flex-shrink: 0"
      class="ty-global-title"
    >{{ title }}</span>

    <span
      class="ty-global-value"
      :style="{
        fontWeight: valBold ? 'bold' : '',
        color: valRed ? '#D50000' : '',
        fontSize: valSize && typeof valSize === 'number' ? valSize+ 'px' : valSize,
        flex:1,
        textAlign: textAlign || 'left'
      }"
      v-html="value"
    />
  </div>
</template>

<script>

export default {
  name: "tyTitleValueCell",
  props:{
    // 标题
    title: [String, Number],

    // 值
    value: [String, Number],

    // 值是否加粗
    valBold: Boolean,

    // 值字体大小
    valSize: {
      type: [Number, String],
      default: ''
    },

    // 值是显示红色
    valRed: Boolean,

    // 是否显示行样式
    isRow:{
      type: Boolean,
      default: true
    },

    // 是否是行起始
    isRowStart:{
      type: Boolean,
      default: false
    },

    // 是否是行结尾
    isRowEnd:{
      type: Boolean,
      default: false
    },

    // 值对齐方式
    textAlign: String
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">

</style>
