<template>

  <div class="switch-tag">
    <el-tag v-for="(item,index) in ds" @click="onSwitchTagClick(item)" :class="{active: item.val === selectTag.val}"
            :key="`switchtag_${index}`">
      {{ item.text }}
    </el-tag>
  </div>
</template>

<script>

export default {
  name: 'SwitchTag',
  props: {
    ds: {
      type: Array,
      default: [],
    },
    defTag: {
      type: Object,
      default: () => {
        return {
          val: 'all',
          text: '全部',
        };
      },
    },
    tagClick: {
      type: Function,
      default: () => {
      },
    },
  },
  watch: {
    defTag(newVal, oldVal) {
      this.selectTag = newVal;
    },
  },
  data() {
    return {
      selectTag: this.defTag,
    };
  },
  created() {
  },
  methods: {
    onSwitchTagClick(item) {
      this.selectTag = item;
      this.tagClick(item);
    },
  },
};
</script>
<style src="./index.scss" lang="scss" />
