<template>
  <view class="course-item-container">
    <u-card :show-head="false" margin="0">
      <template #body>
        <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 name="account" />
          <block v-for="(item, i) in courseItem.Management">
            <text>&nbsp;{{ item.teachName }}&nbsp;</text>
          </block>
        </view>
        <view class="item">
          <u-icon name="map" />
          <text>&nbsp;{{ courseItem.classArea }}</text>
        </view>
        <view class="item">
          <u-icon name="clock" />
          <text
            >&nbsp;{{
              dayjs(courseItem.startDate).format("YYYY-MM-DD")
            }}&nbsp;&nbsp;
            {{
              dateFormat(courseItem.startDate) +
              "~" +
              dateFormat(courseItem.endDate)
            }}</text
          >
        </view>
        <view @tap="openInfo" class="item">
          <u-icon name="order" size="32" />
          <text class="order">&nbsp;课件资料</text>
        </view>
      </template>
      <template #foot>
        <view class="course-footer">
          <view>所属班级：{{ courseItem.className }}</view>
          <view @tap="toSeeMore">
            <text>查看更多 </text>
            <u-icon name="arrow-right-double" color="#2979ff" size="24" />
          </view>
        </view>
        <u-collapse v-if="current !== 1">
          <u-collapse-item title="赏识在于角度的转换">
            <template #title-all>
              <view class="collapse-item">
                <text>出勤情况</text>
                <view>
                  <!-- arrow-up -->
                  <u-icon name="arrow-down" size="24" />
                </view>
              </view>
            </template>
            <template #default>
              <u-row gutter="18">
                <u-col span="5">
                  <view class=""
                    >应出勤: <text>&nbsp;{{ courseItem.reallyNum }}</text
                    >人</view
                  >
                </u-col>
                <u-col span="7">
                  <view class=""
                    >正常出勤:<text
                      >&nbsp;{{
                        courseItem.States[0]?.Value.normal
                          ? courseItem.States[0]?.Value.normal
                          : 0
                      }}</text
                    >人</view
                  >
                </u-col>
                <u-col span="5">
                  <view class=""
                    >缺勤:<text>&nbsp;{{ lackCount }}</text
                    >人</view
                  >
                </u-col>
                <u-col span="3.5">
                  <view class=""
                    >请假:<text
                      >&nbsp;{{
                        courseItem.States[0]?.Value.leave
                          ? courseItem.States[0]?.Value.leave
                          : 0
                      }}</text
                    >人</view
                  >
                </u-col>
                <u-col span="3.5">
                  <view class=""
                    >补签:<text
                      >&nbsp;{{
                        courseItem.States[0]?.Value.repair
                          ? courseItem.States[0]?.Value.repair
                          : 0
                      }}</text
                    >人</view
                  >
                </u-col>
              </u-row>
              <view class="course-collapse-footer">
                <view @tap="toAttendanceDetails">
                  <text>考勤明细 </text>
                  <u-icon name="arrow-right-double" color="#2979ff" 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 infoPopup from "./infoPopup.vue"
import dayjs from "dayjs"
import { useCourseStore } from "@/store/modules/courseStore"

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

const infoRef = ref()

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 - repair - normal
})

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

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

const openInfo = () => {
  infoState.show = true
  infoRef.value.init()
}
</script>

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

  h3 {
    margin-bottom: 32rpx;
  }

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

    h3 {
      margin: 0;
    }

    uni-button {
      margin: 0;
    }
  }

  .item {
    margin: 20rpx 0;
    .order {
      font-size: 32rpx;
      color: #2979ff;
    }
  }

  .course-footer,
  .course-collapse-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

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

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

  .u-collapse-item {
    background-color: #f3faff;

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

    :deep(.u-collapse-content) {
      padding: 20rpx;
    }

    .collapse-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 20rpx;
      border-radius: 10rpx;

      view,
      text {
        color: #2979ff;
      }
    }

    .u-col {
      margin-bottom: 20rpx;
      color: $u-main-color;

      text {
        font-weight: bolder;
        font-size: 32rpx;
      }
    }

    .line-content {
      display: flex;
    }
  }

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

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

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