<template>
  <div :class="['ps-tabs', small && 'small']">
    <div v-for="(item,index) in dataSource" :key="index" :class="['ps-tabs--item', inputValue == item.key && 'active']" @click="operaChange(item)">
      <div class="ps-tabs-role">
        <i :class="item.suffixIcon"></i>
        <label>{{item.name}}</label>
        <i :class="item.prefixIcon"></i>
      </div>
    </div>
  </div>
</template>

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

  },
  mounted() {
  },
  methods: {
    operaChange(item) {
      this.inputValue = item.key
      this.$emit('change', item)
    },
  },
};
</script>

<style></style>
