<template>
  <div class="full-height">
    <div class="row items-center">
      <q-avatar
        size="40px"
        font-size="20px"
        color="primary"
        class="q-mr-md"
        text-color="white"
        rounded
        :icon="`iconfont ${node.icon}`"
      />
      <div class="pingfang text-subtitle1">{{ node.name }}</div>
      <q-icon name="iconfont icon-bangzhu" class="q-ml-md">
        <q-tooltip anchor="bottom middle" :offset="[10, 10]">
          剩余不足20个课时的学员，将会出现在此报表中
        </q-tooltip>
      </q-icon>
    </div>
    <div class="q-my-md row items-center">
      <q-input
        standout
        v-model="msg.KeyWords"
        dense
        type="text"
        style="width:250px;"
        label="关键字（名称/微信/手机号）"
        class="q-mr-md"
      />
      <q-btn
        color="primary"
        class="q-px-md"
        label="查询"
        unelevated
        dense
        @click="searchKeyHandler"
      />
      <div class="col text-right text-grey-6 f12">
        TIPS：此处的信息会作为持续性提醒，暂时无法消除。
      </div>
    </div>
    <div style="height:calc(100% - 158px)">
      <stulist
        :outData="stus"
        :outLoading="loading"
        :pageSize="msg.pageSize"
        :isComponent="true"
      ></stulist>
    </div>
    <div class="row" style="justify-content: flex-end;padding: 5px 20px">
      <q-pagination
        v-model="msg.PageIndex"
        :max="pageCount"
        @input="changePage"
        class="full-width justify-end"
        color="primary"
        :input="true"
      >
      </q-pagination>
    </div>
  </div>
</template>

<script>
import stulist from "../../pages/stuMan/stuList.vue";
import { getGraduateStudent } from "../../api/stuMan/index";
export default {
  components: { stulist },
  props: ["node"],
  data() {
    return {
      stus: [],
      loading: false,
      isJudgeTrans: 1,
      pageCount: 0,
      msg: {
        PageIndex: 1,
        pageSize: 15,
        KeyWords: ""
      }
    };
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    getStudent() {
      if (this.loading) return;
      this.loading = true;
      getGraduateStudent(this.msg)
        .then(r => {
          r.Data.PageData.forEach(x => {
            x.StuName = x.GuestName;
            x.StuId = x.Student_Id;
          });
          this.stus = r.Data.PageData;
          this.pageCount = r.Data.PageCount;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch(e => {
          this.loading = false;
        });
    },
    refreshPage() {
      this.getStudent();
      this.$root.$emit("updateTodoList");
    },
    changePage() {
      this.getStudent();
    },
    searchKeyHandler() {
      this.msg.PageIndex = 1;
      this.getStudent();
    }
  }
};
</script>

<style></style>
