<template>
  <div>
    <!-- 点击考试选择弹出弹出层 -->
    <van-popup class="popup" v-model="showPopup" position="right" :close-on-click-overlay="false">
      <div class="popup-box">
        <div class="popup_title margin-top34">已选考试</div>
        <!-- <Button>{{classes}}</Button> -->
        <van-button
          class="van-btns margin-bottom16"
          type="default"
          v-if="classes=='未选择'"
        >{{classes}}</van-button>
        <van-button class="van-btns margin-bottom16 active" type="default" v-else>{{classes}}</van-button>
        <div v-for="(classes,index) in allClass" :key="index">
          <div class="popup_title">
            <div @click="setClasses(classes.categoryid,classes.categoryname)">{{classes.categoryname}}</div>
            <div class="popup-subBox">
              <div
                v-for="(child,index) in classes.childs"
                :key="index"
                class="margin-right20"
                @click="setClasses(child.categoryid,child.categoryname)"
              >
                <!-- <Button >{{child.categoryname}}</Button> -->
                <van-button
                  class="van-btns"
                  :class="{active:active==child.categoryid}"
                  type="default"
                >{{child.categoryname}}</van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </van-popup>
    <!-- 弹出层底部按钮 -->
    <div class="popup-btn">
      <!-- <div class="popup-btn-left" @click="resetClasses">重置</div> -->
      <div class="popup-btn-left" @click="trueClasses">取消</div>
      <div class="popup-btn-right" @click="trueClasses">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Popup",
  props: ["allClass"],
  data() {
    return {
      showPopup: true,
      active: null,
      classes: "未选择",
      isshow:false
    };
  },
  methods: {
    // 选择课程并存储
    setClasses(id, classes) {
      localStorage.classes = classes;
      this.classes = classes;
      localStorage.id = id;
      this.active = id;
      this.$emit("classes", classes);
    },
    // 重置选中的课程
    resetClasses() {
      this.classes = "未选择";
      this.active = 0;
      localStorage.classes = "未选择";
      localStorage.removeItem("id");
      this.$emit("classes", this.classes);
    },
    // 确定课程返回页面
    trueClasses() {
      this.$router.push({
        query: {
          categoryid: localStorage.id
        }
      });
      this.$emit("close", false);
    }
  },
  created() {
    this.active = localStorage.id;
    if (localStorage.classes) {
      this.classes = localStorage.classes;
    }
  }
};
</script>

<style scoped>
/* 弹出层 */
.van-btns {
  border: 1px solid #ddd;
  color: #777;
  border-radius: 5px;
  height: 33px;
  line-height: 31px;
  min-width: 87px;
}
.active {
  color: #fff;
  background: #ff795c;
  border: 1px solid #ff795c;
}
.popup {
  width: 86%;
  height: 100vh;
}
.popup-box {
  padding: 0 10px 0 10px;
  margin-bottom: 50px;
  min-height: 95vh;
  overflow: hidden;
}
.popup_title {
  color: #333;
  font-size: 15px;
  padding: 0 0 18px 0;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
}
.margin-top34 {
  margin-top: 34px;
}
.margin-bottom16 {
  margin-bottom: 16px;
}
.popup-subBox {
  display: flex;
  margin-top: 5px;
  flex-wrap: wrap;
}
.margin-right20 {
  margin-right: 10px;
  margin-top: 10px;
}
.popup-btn {
  width: 86%;
  height: 45px;
  background: rgba(249, 249, 249, 1);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 3000;
  display: flex;
  font-size: 16px;
}
.popup-btn-left {
  width: 50%;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-btn-right {
  width: 50%;
  background: #ff795c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
