<template>
  <div class="select-panl">
    <div
      v-for="(item,index) in titleLists"
      :key="index"
      :class="['item',{'active':currentName == item.type}]"
      @click="itemClick(item)"
    >{{item.name}}</div>
  </div>
</template>

<script>
export default {
  name: "SelectPanl",
  data() {
    return {
      currentName: "all"
    };
  },
  props: {
    titleLists: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.currentName = this.titleLists[0].type
  },
  methods: {
    //类型单击事件
    itemClick(item) {
      if (this.currentName == item.type) return;
      this.currentName = item.type;
      this.$emit("CurrentSelectType", item.type);
    }
  }
};
</script>

<style scoped>
.select-panl {
  display: flex;
}
.select-panl .item {
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-right: 30px;
  cursor: pointer;
  padding-bottom: 8px;
}
.select-panl .active {
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #3874f6;
  border-bottom: 2px solid #3874f6;
}
</style>
