<template>
  <div :style="`${text?'display:inline-block;':''}}`">
    <template v-for="(item, i) in options">
      <template v-if="column === null">
        <template v-if="values.includes(String(item))">
          <span v-if="text">{{ item }}</span>
          <el-tag v-else>{{ item }}</el-tag>
        </template>
      </template>
      <template v-else>
        <template v-if="values.includes(String(item[column]))">
          <template v-if="label === null">
            <span v-if="text">{{ item }}</span>
            <el-tag v-else>{{ item }}</el-tag>
          </template>
          <template v-else>
            <span v-if="text">{{ item[label] }}</span>
            <el-tag v-else>{{ item[label] }}</el-tag>
          </template>
        </template>
      </template>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null,
  },
  // 指定列
  column: {
    type: [String],
    default: null,
  },
  //   指定文本
  label: {
    type: [String],
    default: null,
  },
  // 当前的值
  value: [Number, String, Array],
  // 文本显示
  text: {
    type: [Boolean],
    default: false,
  },
});

const key = computed(() => props.key);

const values = computed(() => {
  if (props.value !== null && typeof props.value !== "undefined") {
    return Array.isArray(props.value) ? props.value : [String(props.value)];
  } else {
    return [];
  }
});
</script>