<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="card">
            <div
                :class="
                    [
                        'card_item',
                        tabsName == v.value ? 'item_check' : 'item_nocheck',
                    ].join(' ')
                "
                v-for="(v, i) in typelist"
                :key="i"
                @click="tabsChange(v)"
            >
                {{ v.label }}
            </div>
        </div>
        <div class="line"></div>

        <div :class="[schoolList.length != 0 ? '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: 1,
            schoolList: [],
            typelist: [
                { label: "幼儿园", value: 4 },
                { label: "小学", value: 1 },
                { label: "初中", value: 2 },
                { label: "高中", value: 3 },
            ],
        };
    },
    watch: {
        tabsName(val) {
            this.schoolList = [];
            this.getList();
        },
    },
    methods: {
        toActive(v) {
            this.$router.push({
                name: "achievementsOne",
                query: { schoolId: v.num },
            });
        },
        //切换
        tabsChange(v) {
            this.tabsName = v.value;
        },
        getList() {
            this.yxAxios
                .get(
                    `${this.kqUrl}/schoolConsult/schoolList?schoolType=` +
                        this.tabsName
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.schoolList = res.data.data;
                        console.log(this.schoolList);
                    } else {
                        this.$toast.fail(res.data.message);
                    }
                });
        },
    },
    mounted() {
        this.getList();
    },
};
</script>

<style lang="scss" scoped>
.cardBox {
    padding: 2vw 0;
    box-sizing: border-box;
    background: url("~@/assets/Travel/cardBox.png");
    min-height: 100vh;

    .card {
        display: flex;
        justify-content: space-between;
        padding: 10px 5vw 20px;
        box-sizing: border-box;

        .card_item {
            font-size: 4.3vw;
        }
        .item_check {
            font-size: 4.4vw;
            color: #fff;
        }
        .item_nocheck {
            opacity: 0.5;
            color: #fff;
        }
    }
    .line {
        width: 90vw;
        border-bottom: 1px dashed #fff;
        margin: 20px 5vw;
    }

    .schoolCss {
        font-size: 4.5vw;
        margin: 5vw;
        padding: 0.5vw 4vw;
        box-sizing: border-box;
        border-radius: 20px;
        background-color: #fff;

        .school-one {
            width: 100%;
            margin: 6vw 0;
            padding: 22px 0 22px 60px;
            box-sizing: border-box;
            letter-spacing: 0.3vw;
            color: #666;
            font-size: 4.3vw;
            background: url("~@/assets/Travel/schoolBox.png");
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; //限制行数
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //用一个省略号代替超出的内容
        }
    }
}
</style>