<template>
  <div class="def-trend">
    <!--有插槽优先使用插槽，否则使用text属性-->
    <span v-if="slots.default" :style="{ color: textColor }"
      ><slot></slot
    ></span>
    <span v-else :style="{ color: textColor }">{{ text }}</span>
    <def-icon :icon="cIconName" :style="{ color: cIconColor }" />
  </div>
</template>

<script lang="ts" setup>
import { computed, withDefaults, useSlots } from 'vue'

/* 类型声明 */
type TType = 'up' | 'down'
interface IProps {
  type?: TType
  text?: string
  textColor?: string
  icon?: string
  iconColor?: string
}
/* 参数相关 */
const props = withDefaults(defineProps<IProps>(), {
  type: 'up', // 类型 up上升/down下降
  text: '', // 文本
  textColor: '', // 文本颜色
  icon: 'CaretTop', // 图标
  iconColor: '' // 图标颜色
})
/* 数据处理 */
const slots = useSlots()
// 是否是下降
const cIsDown = computed(() => {
  return props.type === 'down'
})
// 图标名
const cIconName = computed(() => {
  return props.icon ? props.icon : !cIsDown.value ? 'CaretTop' : 'CaretBottom'
})
// 图标颜色
const cIconColor = computed(() => {
  return props.iconColor
    ? props.iconColor
    : !cIsDown.value
    ? '#52c41a'
    : '#f5222d'
})
</script>

<style scoped lang="scss">
.def-trend {
  .def-icon {
    margin-left: 5px;
  }
}
</style>
