<template>
  <isp-data-load :loading="queryLoading" :empty="!studentList || studentList.length === 0">
    <view class="list-main">
      <wd-tabs v-model="currentTab">
        <wd-tab v-for="tab in grades" :key="tab.value" :title="tab.title" :name="tab.value" />
      </wd-tabs>
      <view style="margin-top: 30rpx">
        <view
          v-for="student in studentListShow"
          :key="student.id"
          class="student-item"
          @click="studentDetail(student)"
        >
          <view class="avatar-name-state">
            <image :src="getAvatarUrl(student.avatarUrl)" />
            <text class="name-view">{{ student.name }}</text>
            <wd-tag
              mark
              plain
              :color="stateObj[student.isOnline].color"
              :bg-color="stateObj[student.isOnline].color"
            >
              {{ stateObj[student.isOnline].text }}
            </wd-tag>
          </view>
          <view :class="['plan-view', { has: student.planNum > 0 }]"
            >{{ student.planNum }}个学习计划
          </view>
        </view>
      </view>
    </view>
  </isp-data-load>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { queryStudentList } from '@/api/inspector/student';
import IspDataLoad from '@/components/inspector/isp-data-load.vue';
import { getAvatarUrl, setCache } from '@/utils';

const currentTab = ref<string>('all');
const queryResult = ref<any>({});
const studentList = ref([]);
const queryLoading = ref(true);

const stateObj = {
  true: {
    text: '在线',
    color: '#21D17A',
  },
  false: {
    text: '离线',
    color: '#cccccc',
  },
};

const queryList = async (courseDate: string) => {
  queryLoading.value = true;
  try {
    const { data } = await queryStudentList({ courseDate });
    queryResult.value = data ?? {};
    studentList.value = data?.studentDetails ?? [];
  } finally {
    queryLoading.value = false;
  }
};

const studentListShow = computed(() => {
  return studentList.value.filter(item => {
    if (currentTab.value === 'all') {
      return true;
    }
    return item.gradeName === currentTab.value;
  });
});

const grades = computed(() => {
  let gradeList = studentList.value
    .filter(item => (item.gradeName ?? '') !== '')
    .map(item => item.gradeName);
  gradeList = [...new Set(gradeList)];
  return [
    {
      title: '全部',
      value: 'all',
    },
    ...gradeList.map(item => {
      return {
        title: item,
        value: item,
      };
    }),
  ];
});

const studentDetail = (_student: any) => {
  setCache('student_detail', {
    orderId: _student.orderId,
    courseDate: queryResult.value.courseDate ? queryResult.value.courseDate : '',
    backType: 2,
  });
  uni.navigateTo({
    url: `/pages/inspector/student-detail/index?orderId=${_student.orderId}&courseDate=${
      queryResult.value.courseDate ? queryResult.value.courseDate : ''
    }`,
  });
};

defineExpose({
  queryList,
});
</script>

<style scoped lang="scss">
.list-main {
  width: 690rpx;
  background-color: white;
  margin: 30rpx auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx 0 30rpx;

  :deep(.wd-tabs__nav-item) {
    padding: 4rpx 20rpx;
    font-size: 28rpx;
    color: #a9aab5;
    border-radius: 10rpx;
    height: 56rpx;
    line-height: 56rpx;

    &.is-active {
      background-color: #615dff !important;
      color: white;
    }
  }

  :deep(.wd-tabs__line) {
    display: none;
  }

  .student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 2rpx solid #f7f8fa;

    &:last-child {
      border-bottom: none;
    }

    .avatar-name-state {
      display: flex;
      gap: 10rpx;
      align-items: center;

      & > image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .name-view {
        color: #000;
        font-size: 30rpx;
      }
    }

    .plan-view {
      font-size: 30rpx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      color: #ff2828;

      &.has {
        color: #21d17a;
      }
    }
  }
}
</style>
