<template>
  <template v-if="isFilter">
    <n-tag
      v-for="(item,index) in getData.data"
      :key="`tag_${index}`"
      v-bind="getProps"
      :color="getFilter(item[getData.rowKey])?.color || getProps?.color"
    >
      {{ getFilter(item[getData.rowKey]).label }}
    </n-tag>
  </template>
  <template v-else>
    <n-tag v-for="(item,index) in getData.data" :key="`tag_${index}`" v-bind="getProps">
      {{ item[getData.rowKey] }}
    </n-tag>
  </template>

</template>

<script>
import { defineComponent, computed, unref } from 'vue'
import { isArray } from '@/utils/is.js'
export default defineComponent({
  name: 'TableTags',
  props: {
    /* 展示的数据 */
    data: {
      type: [Array, String, Number],
      required: true
    },
    /* 展示数据取的字段 */
    rowKey: {
      type: String,
      default: 'name'
    },
    /* 过滤的数据 */
    // filters: [
    //   {
    //     key: '',
    //     label: '',
    //     color: {}
    //   }
    // ],
    filters: {
      type: Array,
      default: null
    },
    /* tag标签的属性 */
    tags: {
      type: Object,
      default: null
    }
  },
  setup(props, { emit }) {
    const isFilter = computed(() => {
      return !!(props.filters)
    })
    const { filters } = unref(props)
    function getFilter(value) {
      const data = filters.find(item => {
        return item.value === value
      })
      return data || {
        value: value,
        label: value
      }
    }
    /* 获取传递的数据 */
    const getData = computed(() => {
      return {
        rowKey: unref(props.rowKey),
        data: isArray(props.data) ? { ...unref(props.data) } : [{ [props.rowKey]: props.data }],
        filters: { ...unref(props.filters) }
      }
    })
    /* 获取tags的属性 */
    const getProps = computed(() => {
      return {
        closable: false,
        bordered: false,
        color: { color: 'transparent' },
        ...unref(props.tags)
      }
    })
    return {
      isFilter,
      getFilter,
      getData,
      getProps
    }
  }
})

</script>

<style scoped lang='scss'>
// .n-tag{
//   background: transparent;
// }
</style>
