<template>
  <div class="main">
    <van-search v-model="state.keyword" />
    <div class="checked-line" v-if="state.multiple" ref="checkedLine">
      <van-tag type="primary" v-for="user in state.checked">{{user.real_name}}</van-tag>
    </div>
    <div class="list" :style="listStyle">
      <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 :title="item.real_name + (item.meta?.nickName ? ' (' + item.meta.nickName + ')' : '')"
                      v-for="item in dataset" :key="item.hty_id" @click="onClick(item)">
              <template #icon >
                <van-image v-if="item.meta?.avatarUrl" round class="avatar" :src="item.meta?.avatarUrl" />
                <van-icon class="avatar" v-else size="25" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
              </template>
              <template #right-icon>
                <van-icon v-if="state.checked.some(x => x.user_id === item.hty_id)" size="25" name="checked" color="green" />
                <van-icon v-else size="25" name="circle" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-pull-refresh>
    </div>
      <div class="footer" v-if="state.multiple">
        <van-button @click="$router.back()">返回</van-button>
        <van-button type="primary" @click="onConfirm">确认</van-button>
      </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, onBeforeMount, ref, watch, nextTick } from 'vue';
import { Cell, Search, Toast, Icon, PullRefresh, List, Image, CellGroup, Tag, Button } from 'vant';
import { useRouter } from 'vue-router';
import useUserGroup from '~/store/user-group';
import useUser from "~/store/user";
import {PickTargets, User} from '~/types'


export default defineComponent({
  name: "teacher-index",
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Tag.name]: Tag,
    [Button.name]: Button
  },
  props: ['params'],
  setup({params}) {


    const usingGroup = useUserGroup();
    const {store:{current:{hty_id}}} = useUser()

    const state = reactive<any>({
      keyword: '',
      loading: false,
      refreshing: false,
      finished: true,
      checked: [],
      multiple: !!params.multiple
    });

    if (params.target === PickTargets.USER_GROUP) {
      state.checked = [...(usingGroup.store.current.users.vals || [])]
    }

    const checkedLine = ref()

    const { store, getValidTeachers } = useUser();

    const router = useRouter();

    const listStyle = ref({});

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


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

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

    watch(() => state.checked.length, () => {
      let el = checkedLine.value as unknown as HTMLDivElement;
      if (!el) {
        listStyle.value = {}
      }
      nextTick(() => {
        listStyle.value = {height: `calc(100% - 1.08rem - 1.4rem - ${el.clientHeight}px)`};
      })
    })



    onBeforeMount(() => search())

    const onClick = ({hty_id, real_name}: User) => {
      if (state.multiple) {
        if (state.checked.some(x => x.user_id === hty_id)) {
          state.checked = state.checked.filter(x => x.user_id !== hty_id);
        } else {
          state.checked.push({user_id: hty_id, real_name});
        }
      }
    };

    const onConfirm = () => {
      if (params.target === PickTargets.USER_GROUP) {
        usingGroup.store.current.users.vals = [...state.checked];
      }

      router.back();
    }

    return {
      state, dataset, onClick, onRefresh, onConfirm, checkedLine, listStyle
    };
  }
});
</script>

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

    .checked-line {
      padding: 0.08rem 0.28rem;

      &:empty {
        padding: 0;
      }

      :deep(.van-tag) {
          margin: 0.04rem 0.06rem;
      }
    }

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

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

      .avatar {
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.1rem;
      }

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

    .footer {
      width: 100%;
      position: absolute;
      bottom: 0.4rem;
      padding: 0.32rem;
      height: 1rem;
      display: flex;
      justify-content: space-between;

      :deep(.van-button) {
        width: 45%;
      }
    }
  }
</style>
