<template>
  <div class="block_radius">
    <div v-if="show_header" class="block_header">
      <div class="block_header_title">{{ title }}</div>
      <div class="block_header_button_group">
        <div
          v-for="(item, index) in buttons_arr"
          :key="index"
          class="block_header_button"
          :class="active_button == index ? 'active' : ''"
          @click="changeButton(index)"
        >{{ item }}</div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    show_header: {
      type: Boolean,
      default: false
    },
    buttons_arr: {
      type: Array,
      default: () => {
        [];
      }
    },
    title: {
      type: String,
      default: ""
    }
  },
  components: {},
  data: () => ({
    active_button: 0
  }),
  computed: {},
  watch: {},
  methods: {
    changeButton(index) {
      if (this.active_button != index) {
        this.active_button = index;
        this.$emit("changeButton", index);
      }
    }
  },
  mounted() {}
};
</script>

<style scoped>
.block_radius {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.block_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block_header_title {
  font-size: 16px;
  color: #707693;
  padding-left: 16px;
  position: relative;
}
.block_header_title::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #515fe7;
  border-radius: 50%;
  left: 0;
  top: 8px;
}
.block_header_button_group {
  background-color: #f4f7fc;
  border-radius: 4px;
}
.block_header_button {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  color: #8890a7;
  cursor: pointer;
}
.block_header_button.active {
  color: #f8f9fd;
  background-color: #3f4f9c;
  border-radius: 4px;
}
</style>

