<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>
            <template v-for="item in dataset" :key="item.to_user_id">
              <van-cell :title="item.to_user_realname"></van-cell>
            </template>
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, onBeforeMount, ref, onMounted} from 'vue';
import { Cell, Search, Toast, Icon, Image, Tag, List, CellGroup, SwipeCell, PullRefresh, Button, Tab, Tabs, Dialog, Field } from 'vant';
import useSupervisor from "~/store/supervisor";
import HtyImage from "~/components/hty-image.vue";


export default defineComponent({
  name: "supervisor-teachers",
  components: {
    [Search.name]: Search,
    [Cell.name]: Cell,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image,
    [SwipeCell.name]: SwipeCell,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [PullRefresh.name]: PullRefresh,
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Field.name]: Field,
    [List.name]: List,
    [HtyImage.name]: HtyImage
  },
  setup() {
    const state = reactive({
      keyword: '',
      loading: false,
      refreshing: false,
      finished: true
    });
    

    const { store, getSubsidiaries } = useSupervisor();

    const dataset = computed(() => store.subsidiaries.filter(x => !state.keyword || x.to_user_realname.includes(state.keyword)))



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

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

    onMounted(() => {
      search();
    })

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

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


    .tab-title {
      display: inline-flex;
      align-items: center;

      :deep(.van-tag) {
        margin-left: 3px;
      }
    }

    :deep(.van-tabs) {
      height: 100%;

      .van-tabs__content {
        height: calc(100% - var(--van-tabs-line-height));

        .van-tab__panel {
          height: 100%;
        }
      }
    }

    .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;
    }
  }
.text-area {
  font-size: 12px;
  width: 90%;
  margin: 0.2rem auto;
  background-clip: padding-box;
  border: 1px solid #dddddd;
}
</style>
