<template>
  <van-popup v-model="show" position="bottom" @closed="close">
    <div class="sort-box__title">
      <p>选择做题模式</p>
      <img src="../../../assets/user/close.png" @click="show = false">
    </div>
    <div class="sort-box">
      <router-link :to="{name:name,query:{type:type,paperid:paperid,sectionid:sectionid,knowledgeid:knowledgeid,categoryid:categoryid,isrand:0,title:title}}" tag="a"><span>顺序练习</span></router-link>
      <router-link :to="{name:name,query:{type:type,paperid:paperid,sectionid:sectionid,knowledgeid:knowledgeid,categoryid:categoryid,isrand:1,title:title}}" tag="a"><span>随机练习</span></router-link>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "Sort",
  props: ['name','type','sectionid','knowledgeid','categoryid','paperid','title'],
  data() {
    return {
      show: true
    };
  },
  methods: {
    close() {
      this.$emit("closeSort");
    }
  },
  mounted(){
    console.log(this.knowledgeid,this.type)
  }
};
</script>

<style scoped>
.van-popup {
  width: 100%;
  height: 178px;
  border-radius: 10px 10px 0px 0px;
  background: #fff;
  position: fixed;
  bottom: 0;
  text-align: center;
}
.sort-box__title {
  margin-top: 12px;
  height: 40px;
  border-bottom: 1px solid #eee;
}
.sort-box__title p {
  width: 100px;
  font-size: 16px;
  color: rgba(26, 26, 26, 1);
  float: left;
  padding-left: 50%;
  margin-left: -50px;
  text-align: center;
}
.sort-box__title img {
  width: 18px;
  height: 18px;
  margin-right: 20px;
  float: right;
  margin-top: 2.5px;
}
.sort-box span {
  display: inline-block;
  width: 120px;
  height: 40px;
  background: #fb6e52;
  border-radius: 4px;
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
  text-align: center;
  margin: 45px 30px 0 30px;
}
</style>
