<template>
  <view class="arrange-item-container">
    <view class="opening-time">
      &nbsp;{{ dayjs(arrangeItem.startDate).format("YYYY-MM-DD") }}&nbsp;&nbsp;
      {{
        dateFormat(arrangeItem.startDate) +
        "~" +
        dateFormat(arrangeItem.endDate)
      }}
    </view>
    <u-card :show-head="false" margin="0">
      <template #body>
        <view class="body">
          <view>
            <view class="arrange-header">
              <h3>{{ arrangeItem.courseName }}</h3>
            </view>
            <view class="item" style="margin: 32rpx 0 24rpx">
              <u-icon size="32" name="account" />
              &nbsp;{{ arrangeItem.teachName }}&nbsp;
            </view>
            <view class="item">
              <u-icon size="32" name="map" />
              <text>&nbsp;{{ arrangeItem.classArea }}&nbsp;</text>
            </view>
          </view>
          <view class="courseware">
            <view>
              <u-badge
                type="error"
                size="mini"
                :count="arrangeItem.FileCount"
                :offset="[-4, -4]"
              ></u-badge>
              <u-icon
                name="file-text-fill"
                color="#05a8ff"
                size="40"
                class="courseware-icon"
                @tap="openInfo"
              ></u-icon>
            </view>
            <view class="desc">课程资料</view>
          </view>
          <view :class="arrangeStatus.type" class="body-right">
            {{ arrangeStatus.detail }}
          </view>
        </view>
      </template>
    </u-card>
  </view>
  <infoPopup
    ref="infoRef"
    v-model:show="show"
    :courseNumber="props.arrangeItem.courseNumber"
  />
</template>

<script setup lang="ts">
import infoPopup from "@/pages/course/components/infoPopup.vue";
import dayjs from "dayjs";

const props = defineProps({
  arrangeItem: {
    type: Array,
    default: () => [],
  } as any,
});

const show = ref(false);
const infoRef = ref();
const arrangeDetail = ["未开始", "上课中", "已下课"];

const arrangeStatus = computed(() => {
  const statusObj = {
    type: "",
    detail: "",
  };

  switch (props.arrangeItem.courseType) {
    case 0:
      statusObj.type = "warning";
      break;
    case 1:
      statusObj.type = "primary";
      break;
    case 2:
      statusObj.type = "info";
      break;
  }
  statusObj.detail = arrangeDetail[props.arrangeItem.courseType];
  return statusObj;
});
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 openInfo = () => {
  show.value = true;
  infoRef.value.init();
};
</script>

<style lang="scss" scoped>
.arrange-item-container {
  // :deep(.u-card__body) {
  //   padding: 40rpx 32rpx !important;
  // }
  .opening-time {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
  }
  .body {
    position: relative;
    display: flex;
    justify-content: space-between;

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

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

      uni-button {
        margin: 0;
      }
    }

    .body-right {
      position: absolute;
      bottom: -29rpx;
      right: -29rpx;
      text-align: center;
      font-size: 24rpx;
      color: #05a8ff;
      background: #ddf3ff;
      border-radius: 24rpx 0rpx 24rpx 0rpx;
      padding: 4rpx 16rpx;
    }
    .info {
      color: #82848a;
      background-color: #e4e4e4;
    }
    .success {
      color: #19be6b;
      background-color: #deffd9;
    }
  }

  .item {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.9);
  }
}
</style>
