<template>
  <TextEllipsis
    ref="textEllipsisRef"
    :class="`my-text ${textEllipsisClass}`"
    :content="content"
    :rows="rows"
    dots=""
    expand-text="展开"
    collapse-text="收起"
    @click-action="onClickAction"
  />
</template>

<script lang="ts">
export default {
  name: "WlTextEllipsis",
};
</script>

<script setup lang="ts">
import { ref, computed } from "vue";
import { TextEllipsis } from 'vant';
import type { TextEllipsisInstance } from 'vant';

type Props = {
  content: string;
  rows?: number;
  fontSize?: number;
  linearColor?: string;
};

const props = withDefaults(defineProps<Props>(), {
  content: "",
  rows: 1,
  fontSize: 14,
  linearColor: "#fff"
});

const textEllipsisRef = ref<TextEllipsisInstance>();

const ellipsisStatus = ref(false);

const textEllipsisClass = computed(() => ellipsisStatus.value ? '' : 'my-text-ellipsis');

const expandTextWidth = computed(() => props.fontSize * 2 + "px")

const expandTextSize = computed(() => props.fontSize + "px")

const onClickAction = () => {
  ellipsisStatus.value = !ellipsisStatus.value;
}
</script>

<style lang="scss" scoped>
.my-text {
  font-size: v-bind(expandTextSize);

  &.my-text-ellipsis {
    :deep(.van-text-ellipsis__action) {
      line-height: j(24);
      position: relative;
      color: var(--wl-primary-color);

      &:after {
        content: "";
        position: absolute;
        right: v-bind(expandTextWidth);
        top: 0;
        display: block;
        width: j(100);
        height: j(24);
        background: -webkit-linear-gradient(right, v-bind(linearColor) 10%, rgba(255, 255, 255, 0) 80.3%);
        background: linear-gradient(270deg, v-bind(linearColor) 10%, rgba(255, 255, 255, 0) 80.3%);
      }
    }
  }
}
</style>
