<template>
  <div class="container x-class-custom-content">
    <el-card>
      <div class="top-card-box">
        <div class="tabs-box">
          <span v-for="item in listTitle" :key="item.value" @click="tabsBoxBtn(item)" :class="item.value == tabsPitchon ? 'pitch' : ''">{{ item.lable }}</span>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <EntryRecords v-if="tabsPitchon == 1" />
      <RatingOverview v-if="tabsPitchon == 2" />
      <RankingOverview v-if="tabsPitchon == 3" />
    </el-card>
  </div>
</template>

<script>
import EntryRecords from "./EntryRecords.vue"; // 录分
import RatingOverview from "./RatingOverview.vue"; // 评分
import RankingOverview from "./RankingOverview.vue"; // 排名
export default {
  name: "",
  components: { EntryRecords, RatingOverview, RankingOverview },
  props: {},
  data() {
    return {
      listTitle: [
        {
          lable: "录分记录",
          value: "1",
        },
        {
          lable: "评分总览",
          value: "2",
        },
        {
          lable: "排名总览",
          value: "3",
        },
      ],
      tabsPitchon: 1, //tabs 默认选中
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 头部的点击事件
    tabsBoxBtn(item) {
      this.tabsPitchon = item.value;
    },
    // 输入框搜索事件
    handleSearch() {
      // this.$refs.recordRefs
    },
  },
};
</script>
<style scoped lang="scss">
.x-class-custom-content {
  .top-card-box {
    display: flex;
    justify-content: space-between;
    .tabs-box {
      span {
        display: inline-block;
        padding: 9px 24px;
        background-color: #e9f4ff;
        border: 1px solid #b3d8ff;
        border-radius: 4px;
        margin-right: 30px;
        color: #409eff;
        cursor: pointer;
      }
      .pitch {
        background-color: #409eff;
        border: none;
        color: #fff;
      }
    }
  }
}
</style>
