<template>
  <van-popup
    v-model="show"
    safe-area-inset-bottom
    round
    position="bottom"
    style=" height:70%;"
    closeable
  >
    <div class="preview">
      <div class="title">
        考级评分预览
      </div>
      <div class="list" ref="list">
        <rate-info :info="info" :rateInfo="rate" isPreview></rate-info>
      </div>

      <div class="submit">
        <van-button
          @click="submit"
          :color="$colors.prim"
          block
          round
          :loading="saving"
          >确认提交</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script>
import rateInfo from "./rateInfo.vue";
export default {
  props: {
    info: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rate: {
      type: Object,
      default: () => {
        return {};
      }
    },
    saving: {
      type: Boolean,
      default: false
    }
  },
  components: { rateInfo },
  name: "time",
  data() {
    return {
      show: false
    };
  },
  methods: {
    init() {
      this.show = true;
      this.$nextTick(() => {
        this.$refs.list.scrollTop = 0;
      });
    },
    submit() {
      this.$emit("submit");
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
  text-align: center;
  color: #000000;
  line-height: 60px;
}

.list {
  flex-grow: 1;
  overflow: auto;
}

.preview {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.submit {
  padding: 6px 26px;
}

/deep/ .van-popup--bottom {
  .van-popup__close-icon--top-right {
    top: 20px;
  }
}
</style>
