<template>
  <view class="class-item-container">
    <u-card :show-head="false" margin="0" border-radius="24">
      <template #body>
        <view class="calss-header">
          <h3>{{ classItem.className }}</h3>
          <!-- <u-button
            v-show="current == 2"
            size="mini"
            type="primary"
            @tap="toEvaluate"
            >查看评价</u-button
          > -->
        </view>
        <view class="item">
          <text>课程时间：</text>
          <text>{{ classItem.startDate }} 至 {{ classItem.endDate }}</text>
        </view>
        <view class="item">
          <text>教室地点：</text>
          <text>{{ classItem.classArea }}</text>
        </view>
        <view class="class-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.classItem.coursePro[0]?.SumPro
                ? props.classItem.coursePro[0]?.SumPro
                : "0") +
              "/" +
              props.classItem.courseSum[0]?.Sum
            }}
          </view>
        </view>
        <view class="class-teacher item">
          <text>班主任：</text>
          <view>
            <view
              v-for="(item, index) in classItem.Management"
              :key="index"
              class="btn"
              @tap="callPhone(item.teachPhone)"
            >
              <u-image src="../../../static/img/phone.png" />
              <view>{{ item.teachName }}</view>
            </view>
          </view>
        </view>
      </template>
      <template #foot>
        <view class="class-footer">
          <view class="info-button" @tap="classQrCode"> 班级二维码 </view>
          <view class="info-button" @tap="toEvaluate"> 班级通讯录 </view>
          <view class="button" @tap="toCourseArrange"> 课程安排 </view>
        </view>
      </template>
    </u-card>
  </view>

  <saveQrCode
    v-model="show"
    :classId="classItem.classId"
    :Url="classItem.Url"
    @init="emits('init', current)"
  />
</template>

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

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

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

const show = ref(false);

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

const classQrCode = () => {
  show.value = true;
};

const toAddressBook = () => {
  uni.navigateTo({
    url: "/pages/class/addressBook?classId=" + props.classItem.classId,
  });
};

const toCourseArrange = () => {
  uni.navigateTo({
    url: "/pages/class/courseArrange?classId=" + props.classItem.classId,
  });
};

const toEvaluate = () => {
  uni.navigateTo({
    url:
      "/pages/class/classEvaluate?classId=" +
      props.classItem.classId +
      "&current=" +
      props.current,
  });
};
</script>

<style lang="scss" scoped>
.class-item-container {
  margin-bottom: 32rpx;
  :deep(.u-card__body) {
    padding: 40rpx 32rpx 18rpx !important;
  }
  .calss-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;
    }
  }

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

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

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

  .class-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;
    }
  }
}
</style>
