<template>
  <div class="cardBox">
    <van-tabs v-model="tabsName" @change="tabsChange">
      <van-tab title="小学"></van-tab>
      <van-tab title="初中"></van-tab>
      <van-tab title="高中"></van-tab>
    </van-tabs>

    <div class="schoolCss">
      <div
        class="school-one"
        v-for="(v, i) in schoolList"
        :key="i"
        @click="toActive(v)"
      >
        {{ v.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabsName: 0,
      schoolList: [],
    };
  },
  watch: {
    tabsName(val) {
      this.schoolList = [];
      this.getList();
    },
  },
  methods: {
    toActive(v) {
      this.$router.push({
        name: "achievementsOne",
        query: { schoolId: v.num },
      });
    },
    //切换
    tabsChange() {},
    getList() {
      this.yxAxios
        .get(`${this.kqUrl}/schoolConsult/schoolList?schoolType=`+ (this.tabsName +1))
        .then((res) => {
          if (res.data.code == 200) {
            this.schoolList = res.data.data;
            console.log(this.schoolList)
          } else {
            this.$toast.fail(res.data.message);
          }
        });
      // this.yxAxios
      //   .post(`${this.dataUrl}/sys/yx/schoolList`, {
      //     page: 1,
      //     pageSize: 999,
      //     schoolType: this.tabsName +1
      //   })
      //   .then((res) => {
      //     if (res.data.success) {
      //       this.schoolList = res.data.data.list;
      //     } else {
      //       this.$toast.fail(res.data.message);
      //     }
      //   });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.cardBox {
  padding: 2vw 0;
  box-sizing: border-box;

  .schoolCss {
    font-size: 4.5vw;
    margin: 5vw;

    .school-one {
      margin: 4vw 0;
      letter-spacing: 0.3vw;
      color: #666;
      font-size: 4.3vw;
    }
  }
}
</style>