<template>
  <view class="class-item-container">
    <u-card :show-head="false" margin="0" border-radius="20">
      <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> </view>
        <view class="progress item">
          <text>课程进度：</text>
          <u-line-progress
            active-color="#2979ff"
            :percent="percent ? percent : 0"
            :height="25"
          />
        </view>

        <view class="class-teacher item">
          <text>班主任：</text>
          <u-tag
            v-for="(item, index) in classItem.Management"
            :key="index"
            :text="item.teachName"
            shape="circle"
          />
        </view>
      </template>
      <template #foot>
        <view class="class-footer">
          <u-button size="mini" plain @tap="toAddressBook">班级通讯录</u-button>
          <u-button size="mini" plain @tap="classQrCode">班级二维码</u-button>
          <u-button type="primary" size="mini" plain @tap="toCourseArrange"
            >课程安排</u-button
          >
        </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 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,
  })
}
</script>

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

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

    h3 {
      margin: 0;
    }

    uni-button {
      margin: 0;
    }
  }

  .item {
    display: flex;
    align-items: flex-start;

    text {
      display: block;
      padding: 12rpx 0;
      font-size: 28rpx;
    }

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

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

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

    text {
      white-space: nowrap;
    }

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

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

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

  .class-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    uni-button {
      margin-left: 30rpx;
      margin-right: 0;
    }
  }
}
</style>
