<template>
  <div>
    <el-tag v-for="(item, index) in items" :disable-transitions="true" :size="size" :index="index" :key="index"
      :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" :class="item.raw.cssClass" :style="{
        'border-color': item.raw.listClass == 'default'? '#DCDFE6' : '',
        'color': item.raw.listClass == 'default'? '#606266' : '',
        'background-color': item.raw.listClass == 'default'? '#ffffff' : ''
      }">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "DictTag",
  props: {
    options: {
      type: Array,
      default: null,
    },
    value: [Number, String, Array],
    size: {
      type: String,
      default: null,
    }
  },
  computed: {
    values() {
      let myValue = this.value;
      if (myValue === null || myValue === undefined || myValue === '') {
        return [];
      }
      if (Array.isArray(myValue)) {
        return myValue.filter(item => !!item || item === 0);
      }
      if (typeof myValue === 'string') {
        return myValue.split(',').filter(item => !!item || item === 0);
      }
      if (typeof myValue === 'number') {
        return [myValue];
      }
      return [];
    },
    items() {
      // const list = this.options.filter(item => {
      //   return this.values.includes(item.value);
      // });
      if (!this.values) {
        return [];
      }
      const list = this.values.map(item => {
        const findIndex = this.options.findIndex(val => {
          return val.value === item;
        });
        if (findIndex < 0) {
          return {
            label: item,
            value: item,
            raw: {
              listClass: 'default',
              cssClass: '',
              cssStyle: '',
            },
          };
        }
        return this.options[findIndex];
      });
      return list;
    },
  },
};
</script>
<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}
</style>
