<template>
  <view class="myAttendance-item-container">
    <u-card :show-head="false" margin="0" border-radius="20">
      <template #body>
        <view class="myAttendance-header">
          <h3>{{ myAttendanceItem.className }}</h3>
        </view>
        <view class="item">
          <text>课程时间：</text>
          <text
            >{{ myAttendanceItem.startDate }} 至
            {{ myAttendanceItem.endDate }}</text
          >
        </view>
        <view class="item">
          <text>教室地点：</text>
          <text>{{ myAttendanceItem.classArea }}</text>
        </view>
        <view> </view>
        <view class="myAttendance-progress item">
          <text>课程进度：</text>
          <u-line-progress
            active-color="#04a7ff"
            :percent="percent ? percent : 0"
            :show-percent="false"
            :height="20"
            style="margin-top: 10rpx"
          />
          <view class="progress">
            {{
              (props.myAttendanceItem.coursePro[0]?.SumPro
                ? props.myAttendanceItem.coursePro[0]?.SumPro
                : "0") +
              "/" +
              props.myAttendanceItem.courseSum[0]?.Sum
            }}
          </view>
        </view>

        <view class="myAttendance-teacher item">
          <text>班主任：</text>
          <view>
            <view
              v-for="(item, index) in myAttendanceItem.Management"
              :key="index"
              class="btn"
              @tap="callPhone($event, item.teacPhone)"
            >
              <u-image src="../../../static/img/phone.png" />
              <view>{{ item.teachName }}</view>
            </view>
          </view>
        </view>

        <u-collapse>
          <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;{{
                        props.myAttendanceItem.courseSum[0]?.Sum
                      }}</text
                    >次</view
                  >
                  <view class="default-item"
                    >缺勤:<text>&nbsp;{{ lackCount }}</text
                    >次</view
                  >
                </view>
                <view class="item-list">
                  <view class="default-item"
                    >正常出勤:<text
                      >&nbsp;{{
                        myAttendanceItem.State?.normal
                          ? myAttendanceItem.State?.normal
                          : 0
                      }}</text
                    >次</view
                  >
                  <view class="default-item"
                    >请假:<text
                      >&nbsp;{{
                        myAttendanceItem.State?.leave
                          ? myAttendanceItem.State?.leave
                          : 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>
</template>

<script setup lang="ts">
import { callPhone } from "@/utils/util";

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

const collapseShow = ref(false);

const percent = computed(
  () =>
    (props.myAttendanceItem.coursePro[0]?.SumPro /
      props.myAttendanceItem.courseSum[0]?.Sum) *
    100
);

const lackCount = computed(() => {
  const reallyNum = Number(props.myAttendanceItem.courseSum[0]?.Sum || 0);
  const { leave = 0, normal = 0 } = props.myAttendanceItem.State || {};
  return reallyNum - leave - normal;
});

const toAttendanceDetails = () => {
  uni.navigateTo({
    url: "attendanceDetails?classId=" + props.myAttendanceItem.classId,
  });
};

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

<style lang="scss" scoped>
.myAttendance-item-container {
  margin-bottom: 32rpx;

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

  .myAttendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

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

    uni-button {
      margin: 0;
    }
  }

  .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;

    text {
      display: block;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.9);
    }

    text:first-child {
      width: 160rpx;
    }

    text:last-child {
      flex: 1;
    }
  }

  .myAttendance-progress {
    display: flex;
    align-items: center;

    .progress {
      margin-left: 10px;
      margin-top: 8rpx;
    }

    .u-progress {
      margin-left: 20rpx;
    }

    text {
      white-space: nowrap;
    }

    .registered {
      margin-left: 30rpx;
      color: #3b99fc;
    }
  }

  .myAttendance-teacher {
    display: flex;
    align-items: center;
    margin-top: 16rpx;

    .btn {
      height: 56rpx;
      padding: 14rpx 36rpx 14rpx 14rpx;
      background: #04a7ff;
      border-radius: 112rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;

      .u-image {
        margin-right: 6rpx;
        width: 50rpx !important;
        height: 46rpx !important;
      }
    }
  }

  .myAttendance-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 28rpx;
    font-weight: 400;

    .button {
      padding: 8rpx 24rpx;
      background: #04a7ff;
      border-radius: 88rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
    }

    .info-button {
      padding: 8rpx 24rpx;
      border-radius: 112rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      color: rgba(34, 34, 34, 0.9);
      margin-right: 16rpx;
    }
  }
  .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;
    }

    .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);
        }
      }
    }
  }

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

    text {
      font-size: 24rpx;
      color: #05a8ff;
    }
  }
}
</style>
