<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">
          <div class="item" v-for="item in dataset" :key="item.id"
               @click="onSelect(item)">
            <div class="avatar">
              <van-image v-if="item.meta?.avatarUrl" round :src="item.meta?.avatarUrl" />
              <van-icon v-else size="32" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            </div>
            <div class="info">
              <div><strong>{{ item.real_name }}<template v-if="item.meta?.nickName">({{ item.meta?.nickName }})</template></strong></div>
              <div>{{item.union_id}}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, onBeforeMount } from 'vue';
import { Cell, PullRefresh, List, Search, Toast, Image, Icon } from 'vant';
import { useRouter } from 'vue-router';
import useUser from "~/store/user";


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

    const { store, getUnclaimedStudents, claimStudent } = useUser();

    const router = useRouter();

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



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

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


    onBeforeMount(() => search())

    const onSelect = async (student) => {
      await claimStudent(student.hty_id)
      router.back();
    };

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

<style scoped lang="less">
  .main {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .list {
      width: calc(100% - 0.64rem);
      height: calc(100% - 0.54rem - 0.64rem);
      overflow: auto;

      margin: 0.32rem;

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

      .item {
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.03);
        border-radius: 0.1rem;
        margin-bottom: 0.3rem;
        padding: 0.24rem 0.32rem;
        display: flex;
        align-items: center;

        .avatar {
          width: 32px;
          margin-right: 12px;
        }

        .info {
          font-size: 0.28rem;
          color: #333333;
        }

      }
    }
  }
</style>
