<template>
  <div class="main">
    <van-search v-model.trim="state.keyword" placeholder="请输入小组名称搜索"></van-search>
    <van-tabs v-model:active="activeTab" @change="onRefresh">
      <van-tab v-for="tab in tabs" :name="tab.name" :title="tab.label"></van-tab>
    </van-tabs>
    <div class="list">
      <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
        <van-list v-model:loading="state.loading" :finished="state.finished"
                  finished-text="No more data." v-model:error="state.error"
                  error-text="请求失败，点击重新加载"
        >
          <template v-for="item in dataset" :key="item.id">
            <van-swipe-cell>
              <van-cell center :title="item.group_name" is-link :to="`/user-group/detail?id=${item.id}`">
                <template #label>
                  <div><strong>学生：</strong>{{ item.users.vals.map(x => x.real_name).join(', ') }}</div>
                  <div v-if="item.owners?.vals?.length"><strong>助教：</strong>{{ item.owners?.vals.map(x => x.real_name).join(', ') }}</div>
                  <div><strong>创建人：</strong>{{item.creator_name}}</div>
                  <div><strong>创建时间：</strong>{{datetime(item.created_at)}}</div>
                </template>
              </van-cell>
            </van-swipe-cell>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-icon name="add" class="btn-add" size="0.96rem" color="#2196f3" @click="$router.push('/user-group/add')" />
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, onBeforeMount, reactive, ref} from 'vue';
import {Button, Cell, Icon, List, PullRefresh, Search, Dialog, Tabs, Tab, SwipeCell} from 'vant';
import useUserGroup from '~/store/user-group';
import {DateFormatter, formatDate} from "~/utils";

export interface GroupState {
  loading: boolean,
  finished: boolean,
  error: boolean,
  keyword: string,
  isPicking: boolean,
  showDialog: boolean,
}

export default defineComponent({
  name: "user-group",
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [Search.name]: Search,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Dialog.name]: Dialog,
    [SwipeCell.name]: SwipeCell,
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab
  },
  props: {params: {} as any},
  setup({}) {
    const state = reactive<GroupState>({
      loading: false,
      finished: false,
      error: false,
      keyword: '',
      showDialog: false
    });


    const {store, query, reset} = useUserGroup();

    reset();

    const activeTab = ref("mine")

    const tabs = [
      {name: "mine", label: "我的小组"},
      {name: "assigned", label: "共享小组"}
    ]

    const onRefresh = async () => {
      state.finished = false;
      state.error = false;
      state.loading = true;
      state.error = !(await query(activeTab.value));
      state.finished = true;
      state.loading = false;
    };

    const dataset = computed(() => {
      return store[activeTab.value].filter(x => !state.keyword || x.group_name.includes(state.keyword));
    })


    onBeforeMount(() => {
      reset();
      onRefresh()
    });

    const datetime = (time: string | Date) => formatDate(time, DateFormatter.DateTime)

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

<style scoped lang="less">

.main {
  width: 100vw;
  overflow: hidden;
  background: #f7f7f7;
  position: relative;

  :deep(.van-tabs) {
    height: 1.2rem;

    .van-tabs__content {
      display: none;
    }
  }

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

    margin: 0 0.16rem 0.32rem;

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

  .btn-add {
    position: absolute;
    right: 0.24rem;
    bottom: 0.32rem;
  }

  .btn-edit {
    margin-right: 0.2rem;
  }

  .btn-pick {
    position: absolute;
    bottom: 0.32rem;
    width: 90%;
    left: 5%;
  }

}

.input-content {
  padding: 0.25rem;
  text-align: center;

}
</style>
