<template>
  <view class="arrange-item-container">
    <h3>
      &nbsp;{{ dayjs(arrangeItem.startDate).format("YYYY-MM-DD") }}&nbsp;&nbsp;
      {{
        dateFormat(arrangeItem.startDate) +
        "~" +
        dateFormat(arrangeItem.endDate)
      }}
    </h3>
    <u-card :show-head="false" margin="0">
      <template #body>
        <view class="arrange-header">
          <h3>{{ arrangeItem.courseName }}</h3>
          <u-button size="mini" plain :type="arrangeStatus.type">{{
            arrangeStatus.detail
          }}</u-button>
        </view>
        <view class="item">
          <u-icon name="account" />
          <text>&nbsp;{{ arrangeItem.teachName }}</text>
        </view>
        <view class="item">
          <u-icon name="map" />
          <text>&nbsp;{{ arrangeItem.classArea }}&nbsp;</text>
        </view>
      </template>
      <template #foot>
        <view class="arrange-footer" @tap="openInfo">
          <u-icon name="order" />
          <text>课件资料</text>
        </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 {
  h3 {
    margin-bottom: 32rpx;
  }

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

    h3 {
      margin: 0;
    }

    uni-button {
      margin: 0;
    }
  }

  .item {
    margin: 20rpx 0;
  }

  .arrange-footer {
    text-align: end;

    text {
      color: #2979ff;
    }
  }
}
</style>
