<template>
  <a-popover>
    <template #content>
      <a-space :size="size">
        <a-tag v-for="(item,index) in textValue" :key="index" :color="getTagColor(index)">
          {{ item }}
        </a-tag>
      </a-space>
    </template>
    <div>
      <a-space :size="size">
        <a-tag v-for="(item,index) in showArr" :key="index" :color="getTagColor(index)">
          {{ item }}
        </a-tag>
      </a-space>
      <template v-if="showArr.length<textValue.length">
        ...
      </template>
    </div>
  </a-popover>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
import { propTypes } from '/@/utils/propTypes';

  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    length: propTypes.number.def(2),
    strLen: propTypes.number.def(10),
    size: propTypes.number.def(2)
  });
  //显示的文本
  const showArr = computed(() => 
    {
      // (props.value.length > props.length ? props.value.slice(0, props.length): props.value) : ["-"]
      if(props.value){
        let len = props.value.length
        let countLen = 0;
        for(let i=0;i<len && i<props.length;i++){
          countLen = countLen + props.value[i].length
          if(i==0 && countLen>props.strLen){
            return [props.value[i].slice(0, props.strLen-3) + '...']
          }else if(countLen >props.strLen){
            return props.value.slice(0, i)
          }
        }
        return props.value.slice(0, props.length)
      }else{
        return ["-"]
      }
    }
  );
  const textValue = computed(() =>
    props.value ? props.value : ["-"]
  );
  function getTagColor(index){
    let colorArr = ['red','orange','green','pink','cyan','blue','purple']
    let i = index%colorArr.length
    return colorArr[i]
  }
</script>
