<template>
  <div class="ps-tags" v-if="inputValue">
    <el-tag :class="item.type" :type="item.type" v-for="(item, index) in inputValue" :key="item.key">
      <i :class="item.icon"></i>
      {{ item.desc }}
      <i class="ps-x" @click="operaClose(item, index)" v-if="!item.isHideClose && closable"></i>
    </el-tag>
  </div>
  <div class="ps-tags" v-else>
    <el-tag :class="type" :type="type">
      <slot></slot>
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "PsTag",
  props: {
    value: null,
    dataSource: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: "defalut",
    },
    closable: {
      type: Boolean,
      default: false
    }
  },
   //处理v-model语法糖的emit事件
   model: {
    prop: 'value',
    event: 'handler'
  },
  watch: {
    value: {
      handler(val) {
        this.inputValue = val
      },
      immediate: true
    }
  },
  data() {
    return {
      inputValue: null,
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    operaClose(item, index) {
      console.log(item)
      this.inputValue.splice(index, 1);
      this.$emit('handler', this.inputValue)
      this.$emit('change', this.inputValue)
    },
  },
};
</script>

<style></style>
