<template>
  <div class="tab_btns">
    <div
      class="btn"
      v-for="(item, index) in data"
      :key="index + 100"
      @click="clickFunc(item.func)"
      :style="{
        float: item.position,
        backgroundColor: item.type == 'warn' ? '#ad3a4a' : '',
      }"
      :class="item.position == 'right' ? 'left_marg' : ''"
    >
      {{ item.label }}
    </div>
    <span class="selectnum"
      >已选择
      <span style="color: #242c43; font-weight: 600">{{ num }}</span> 项</span
    >
    <span class="clean" @click="clean">清空</span>
  </div>
</template>

<script>
export default {
  props: ["data", "num"],
  components: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    clickFunc(type) {
      this.$emit(type);
    },
    clean() {
      this.$emit("clean");
    },
  },
};
</script>

<style scoped>
.btn {
  height: 40px;
  line-height: 40px;
  background-color: #2b4695;
  border-radius: 8px;
  padding: 0 30px;
  float: left;
  color: #fefefe;
  cursor: pointer;
}
.selectnum {
  /* float: right; */
  line-height: 40px;
  margin: 0 30px;
  color: #8890a7;
}
.clean {
  /* float: right; */
  text-decoration: underline;
  color: #2b4695;
  line-height: 40px;
  margin-right: 20px;
  cursor: pointer;
}
.left_marg {
  margin-left: 10px;
}
.tab_btns {
  position: relative;
  margin-bottom: 25px;
}
.tab_btns::after {
  content: "";
  position: absolute;
  width: calc(100% + 40px);
  height: 1px;
  background-color: #e3e5ef;
  left: -20px;
  bottom: -20px;
}
</style>
