<template>
  <view class="supervisor-teacher">
    <template v-if="!teacher">
      <view class="empty-content">
        <view class="avatar-image">
          <view class="image-box">
            <image :src="`${OSS_URL}/patriarch_header_1.png`"></image>
          </view>
        </view>
        <view class="dot-list">
          <view class="dot-item"></view>
          <view class="dot-item"></view>
          <view class="dot-item"></view>
        </view>
        <view class="teacher-icon">
          <wd-icon name="user" size="22px"></wd-icon>
        </view>
      </view>
      <view class="tip">正在为您精心匹配督学师，请耐心等待～</view>
    </template>
    <template v-else>
      <view class="base-info">
        <view class="avatar">
          <image :src="teacher.avatar"></image>
        </view>
        <view class="info-box">
          <view class="name">{{ teacher.name }}</view>
          <view class="school-edu">
            <text>{{ teacher.school }}</text> ｜
            <text>{{ teacher.edu }}</text>
          </view>
          <view class="label-list">
            <view
              v-for="item in teacher.labelList"
              :key="item.name"
              class="label"
              :style="{ color: item.color, backgroundColor: item.bgColor }"
              >{{ item.name }}</view
            >
          </view>
        </view>
      </view>
      <view v-show="open" class="description">
        <view class="title-label">
          <template v-for="(item, index) in teacher.titleLabel" :key="index">
            <text>{{ item }}</text>
            <text v-if="index !== teacher.titleLabel.length - 1"> ｜ </text>
          </template>
        </view>
        <view class="desc-list">
          {{teacher.desc}}
        </view>
      </view>
      <view class="show-open-row">
        <view class="show-open" @click="changeOpen">
          <view>{{ open ? '收起' : '展开' }}</view>
          <wd-icon v-if="!open" name="arrow-down" size="24rpx"></wd-icon>
          <wd-icon v-else name="arrow-up" size="24rpx"></wd-icon>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
export interface ITeacher {
  name: string;
  school: string;
  edu: string;
  avatar: string;
  labelList: {
    name: string;
    color: string;
    bgColor: string;
  }[];
  titleLabel: string[];
  desc: string;
}
const props = defineProps<{
  teacher: ITeacher | null | undefined;
}>();
const OSS_URL = import.meta.env.VITE_OSS_HOST;

const open = ref(false);

const changeOpen = () => {
  open.value = !open.value;
};
</script>

<style scoped lang="scss">
.supervisor-teacher {
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  .empty-content {
    display: flex;
    align-items: center;
    gap: 50rpx;
    .avatar-image {
      width: 232rpx;
      height: 232rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .image-box {
        border-radius: 50%;
        width: 140rpx;
        height: 140rpx;
        background-color: #ededff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 4;
        image {
          width: 100rpx;
          height: 100rpx;
          border: 2rpx solid #615dff;
          border-radius: 50%;
        }
      }
      &::before,
      &::after {
        content: '';
        position: absolute;
        border-radius: 50%;
      }
      &::before {
        background-color: #fafaff;
        width: 100%;
        height: 100%;
        z-index: 2;
      }
      &::after {
        background-color: #f4f4ff;
        width: 184rpx;
        height: 184rpx;
        z-index: 3;
      }
    }
    .dot-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 62rpx;
      height: 14rpx;
      border-radius: 7rpx;
      position: relative;
      .dot-item {
        width: 14rpx;
        height: 14rpx;
        background-color: transparent;
        border-radius: 50%;
        &:nth-child(1) {
          background-color: #9592ff;
        }

        &:nth-child(2) {
          background-color: #dbdaff;
        }
        &:nth-child(3) {
          background-color: #dbdaff;
        }
      }
    }
    .teacher-icon {
      width: 100rpx;
      height: 100rpx;
      background-color: #ededf0;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .tip {
    text-align: center;
    color: #666;
    font-size: 30rpx;
    line-height: 42rpx;
    margin-top: 30rpx;
  }
  .base-info {
    display: flex;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20rpx;
    .avatar {
      margin-right: 20rpx;
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
    .info-box {
      display: flex;
      flex-direction: column;
      gap: 10rpx;
      .name {
        font-size: 36rpx;
        line-height: 48rpx;
        color: #0a1f13;
        font-weight: 500;
      }
      .school-edu {
        color: #a9aab5;
        font-size: 30rpx;
        line-height: 48rpx;
      }
      .label-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        .label {
          padding: 0 16rpx;
          font-size: 26rpx;
          line-height: 48rpx;
        }
      }
    }
  }
  .description {
    padding-top: 20rpx;
    .title-label {
      margin-bottom: 10rpx;
      font-size: 30rpx;
      line-height: 48rpx;
    }
    .desc-list {
      color: #666;
      font-size: 30rpx;
      line-height: 48rpx;
      .desc-list-item {
        display: flex;
        align-items: flex-start;
        .dot {
          width: 48rpx;
          height: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10rpx;
          &::before {
            content: '';
            display: block;
            width: 14rpx;
            height: 14rpx;
            background-color: #666666;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .show-open-row {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
    .show-open {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      font-size: 24rpx;
      color: #a8aab5;
      user-select: none;
      height: 36rpx;
      padding: 0 20rpx;
    }
  }
}
</style>
