<template>
  <div class="main">
    <van-search v-model="state.keyword" />
    <div class="list">
      <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
        <van-list v-model:loading="state.loading"
                  :finished="state.finished" finished-text="没有更多数据了"
                  @load="onRefresh">
          <van-cell-group inset>
            <van-cell is-link :title="item.real_name + (item.meta?.nickName ? ' (' + item.meta.nickName + ')' : '')"
                      v-for="item in dataset" :key="item.hty_id" :to="`/teacher/detail?id=${item.hty_id}`">
              <template #icon >
                <hty-image :type="'avatar'" :url="item.avatar_url || item.meta?.avatarUrl" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, onBeforeMount } from 'vue';
import { Cell, Search, Toast, Icon, CellGroup, List, PullRefresh } from 'vant';
import useUser from "~/store/user";
import HtyImage from "~/components/hty-image.vue";


export default defineComponent({
  name: "student-teachers",
  components: {
    [Search.name]: Search,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [HtyImage.name]: HtyImage,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  },
  setup() {
    const state = reactive({
      keyword: '',
      loading: false,
      refreshing: false,
      finished: true
    });

    const { store, getMyTeachers } = useUser();

    const dataset = computed(() => {
      let list = store.teachers.mine;
      if (state.keyword) {
        list = list.filter(x => x.real_name.includes(state.keyword))
      }
      return list;
    })

    const search = async () => {
      state.loading = true;
      await getMyTeachers();
      state.finished = true;
      state.loading = false;
    }

    const onRefresh = () => {
      state.refreshing = false;
      search();
    }


    onBeforeMount(() => search())

    return {
      state, dataset, onRefresh
    };
  }
});
</script>

<style scoped lang="less">
  .main {
    width: 100%;
    height: calc(100% - 1rem);

    .list {
      width: 100%;
      height: calc(100% - 1.08rem);
      overflow-y: auto;
      padding: 0.32rem 0;

      &::-webkit-scrollbar {
        display: none;
      }

      :deep(.van-cell) {
        align-items: center;
      }
    }

    .btn-add {
      position: absolute;
      right: 0.3rem;
      bottom: 1rem;
      font-size: 0.9rem;
    }
  }
</style>
