<template>
  <view class="course-item-container">
    <u-card :show-head="false" margin="0">
      <template #body>
        <view class="body">
          <view>
            <view class="course-header">
              <h3>{{ courseItem.courseName }}</h3>
              <!-- <u-button
                v-show="current == 2"
                type="primary"
                size="mini"
                @tap="toEvaluate"
                >查看评价</u-button
              > -->
            </view>
            <view class="item">
              <u-icon size="34" name="account" />
              <block v-for="(item, i) in courseItem.Management">
                <text style="color: #05a8ff" @tap="toSeeMore"
                  >&nbsp;{{ item.teachName }}&nbsp;</text
                >
              </block>
            </view>
            <view class="item">
              <u-icon size="34" name="map" />
              <text>&nbsp;{{ courseItem.classArea }}</text>
            </view>
            <view class="item">
              <u-icon size="34" name="clock" />
              <text
                >&nbsp;{{
                  dayjs(courseItem.startDate).format("YYYY-MM-DD")
                }}&nbsp;&nbsp;
                {{
                  dateFormat(courseItem.startDate) +
                  "~" +
                  dateFormat(courseItem.endDate)
                }}</text
              >
            </view>
          </view>
          <view
            style="
              width: 30%;
              display: flex;
              flex-direction: column;
              align-items: end;
              justify-content: space-between;
            "
          >
            <view class="courseware">
              <view>
                <u-badge
                  type="error"
                  size="mini"
                  :count="courseItem.FileCount"
                  :offset="[-4, -4]"
                />
                <u-icon
                  name="file-text-fill"
                  color="#05a8ff"
                  size="40"
                  class="courseware-icon"
                  @tap="openInfo"
                ></u-icon>
              </view>
              <view class="desc">课程资料</view>
            </view>
            <view v-show="!current" class="body-btn" @tap="tapSignOut"
              >开放签退</view
            >
            <view v-show="current == 2" class="body-btn" @tap="toEvaluate"
              >查看评价</view
            >
          </view>
        </view>
      </template>
      <template #foot>
        <view class="course-footer">
          <view>所属班级：{{ courseItem.className }}</view>
          <!-- <view @tap="toSeeMore" style="width: 40%; text-align: end">
            <text>查看更多 </text>
            <u-icon name="arrow-right-double" color="#05A8FF" size="24" />
          </view> -->
        </view>
        <u-collapse v-show="current !== 1">
          <u-collapse-item @change="collapseChange">
            <template #title-all>
              <view class="collapse-item">
                <text>出勤情况</text>
                <u-icon
                  v-show="collapseShow"
                  name="arrow-up"
                  size="24"
                  color="#05A8FF"
                />
                <u-icon
                  v-show="!collapseShow"
                  name="arrow-down"
                  size="24"
                  color="#05A8FF"
                />
              </view>
            </template>
            <template #default>
              <view style="display: flex; justify-content: space-between">
                <view class="item-list">
                  <view class="default-item"
                    >应出勤: <text>&nbsp;{{ courseItem.reallyNum }}</text
                    >人</view
                  >
                  <view class="default-item"
                    >缺勤:<text>&nbsp;{{ lackCount }}</text
                    >人</view
                  >
                </view>
                <view class="item-list">
                  <view class="default-item"
                    >正常出勤:<text
                      >&nbsp;{{
                        courseItem.States[0]?.Value.normal
                          ? courseItem.States[0]?.Value.normal
                          : 0
                      }}</text
                    >人</view
                  >
                  <view class="default-item"
                    >请假:<text
                      >&nbsp;{{
                        courseItem.States[0]?.Value.leave
                          ? courseItem.States[0]?.Value.leave
                          : 0
                      }}</text
                    >人</view
                  >
                  <!-- <view class=""
                  >补签:<text
                    >&nbsp;{{
                      courseItem.States[0]?.Value.repair
                        ? courseItem.States[0]?.Value.repair
                        : 0
                    }}</text
                  >人</view
                > -->
                </view>
              </view>
              <view class="course-collapse-footer">
                <view @tap="toAttendanceDetails">
                  <text>考勤明细 </text>
                  <u-icon name="arrow-right-double" color="#05A8FF" size="24" />
                </view>
              </view>
            </template>
          </u-collapse-item>
        </u-collapse>
      </template>
    </u-card>
  </view>
  <infoPopup
    ref="infoRef"
    v-model:show="infoState.show"
    :courseNumber="props.courseItem.courseNumber"
  />
</template>
<script setup lang="ts">
import { useCourseStore } from "@/stores/modules/courseStore";
import { toast, zconfirm } from "@/utils/util";
import { teacOpenQT } from "@/api/course";
import infoPopup from "./infoPopup.vue";
import dayjs from "dayjs";

const courseStore = useCourseStore();
const props = defineProps({
  courseItem: {
    type: Array,
    default: () => [],
  } as any,
  current: {
    type: Number,
    default: 0,
  },
});

const emits = defineEmits(["init"]);

const infoRef = ref();
const collapseShow = ref(false);

const dateFormat = (dateStr: string) => {
  // 创建一个日期对象，传入特定日期和时间
  const date = new Date(dateStr);
  // 获取小时和分钟
  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);

  // 构建时间字符串
  const time = hours + ":" + minutes;
  return time;
};

const infoState = reactive({
  show: false,
});

const lackCount = computed(() => {
  const reallyNum = Number(props.courseItem.reallyNum || 0);
  const {
    leave = 0,
    repair = 0,
    normal = 0,
  } = props.courseItem.States[0]?.Value || {};
  return reallyNum - leave - normal;
});

const toSeeMore = () => {
  courseStore.setTeachs(props.courseItem.Management);
  setTimeout(() => {
    uni.navigateTo({
      url: "/pagesTeach/course/seeMore",
    });
  }, 300);
};
const toAttendanceDetails = () => {
  uni.navigateTo({
    url:
      "/pagesTeach/course/attendanceDetails?courseId=" +
      props.courseItem.courseId,
  });
};

const toEvaluate = () => {
  uni.navigateTo({
    url:
      "/pagesTeach/course/courseEvaluate?classId=" +
      props.courseItem.classId +
      "&courseId=" +
      props.courseItem.courseId,
  });
};

const tapSignOut = () => {
  zconfirm("确定开放签退？", async (result: boolean) => {
    if (result) {
      const { data: res }: any = await teacOpenQT(props.courseItem.courseId);
      if (res.code == 200) {
        emits("init", props.current);
        toast("开放签退成功");
      }
    }
  });
};

const openInfo = () => {
  infoState.show = true;
  infoRef.value.init();
};

const collapseChange = (e: any) => {
  if (e.show) collapseShow.value = true;
  else collapseShow.value = false;
};
</script>

<style lang="scss" scoped>
.course-item-container {
  margin-top: 20rpx;

  :deep(.u-card__body) {
    padding: 40rpx 32rpx 32rpx !important;
  }

  :deep(.u-card__foot) {
    padding: 32rpx 32rpx 40rpx !important;
  }

  .body {
    position: relative;
    display: flex;
    justify-content: space-between;

    .body-btn {
      border-radius: 72rpx;
      border: 2rpx solid #05a8ff;
      line-height: 32rpx;
      text-align: center;
      padding: 8rpx 24rpx;
      color: #05a8ff;
      font-size: 24rpx;
    }
  }

  h3 {
    margin-bottom: 32rpx;
  }

  .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h3 {
      margin: 0;
      font-size: 34rpx;
      font-weight: 500;
      color: #222222;
      margin-bottom: 8rpx;
    }

    uni-button {
      margin: 0;
    }
  }

  .item {
    margin: 24rpx 0;
    text {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.9);
    }
  }

  & .item:last-child {
    margin-bottom: 0;
  }

  .course-footer,
  .course-collapse-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.5);

    text {
      font-size: 24rpx;
      color: #05a8ff;
    }
  }

  .course-collapse-footer {
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .u-collapse-item {
    background-color: #ddf3ff;
    border-radius: 16rpx;

    :deep(.u-collapse-head) {
      padding: 0;
      margin-top: 30rpx;
    }

    :deep(.u-collapse-content) {
      padding: 0 28rpx 24rpx;
    }
    :deep(.u-collapse-body) {
      // height: 0 !important;
    }

    .collapse-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 32rpx;
      background-color: #ddf3ff;
      border-radius: 16rpx;

      view {
        color: #2979ff;
        font-size: 24rpx;
      }

      text {
        font-size: 24rpx;
        font-weight: 500;
        color: #05a8ff;
      }
    }

    .item-list {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .default-item {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.9);
        margin-bottom: 24rpx;
      }
    }
    .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .line-content {
        display: flex;
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(34, 34, 34, 0.8);
        }
      }
    }
  }

  .class-teacher {
    display: flex;
    align-items: center;

    .u-tag {
      margin-right: 20rpx;
    }
  }

  .prompt {
    font-size: 24rpx;
    color: $u-type-info-dark;
  }
}
</style>
