<template>
  <view class="info-view white-bg-content">
    <view class="info-detail">
      <view class="avatar">
        <image :src="getAvatarUrl(studentInfo.avatarUrl)" />
        <text v-if="studentInfo.state === 1" class="tag">督学中</text>
      </view>
      <view>
        <view class="name-operators">
          <view class="name-operators-name"> {{ studentInfo.name }}</view>
          <view class="name-operators-ope">
            <button class="initiate-btn" @click="initiate">发起沟通</button>
            <button class="contact-btn" @click="contactVisible = true">联系家长</button>
          </view>
        </view>
        <view class="account">{{ maskPhone(studentInfo.account) }}</view>
      </view>
    </view>
    <view>
      <view class="info-item">
        <text>地区：</text>
        <view>{{ studentInfo.area }}</view>
      </view>
      <view class="info-item">
        <text>年级：</text>
        <view>{{ studentInfo.gradeName }}</view>
      </view>
      <view v-if="!expandOrCloseValue" class="info-item">
        <text>薄弱科目：</text>
        <view>{{ (studentInfo.weakSubjectNames ?? []).join(',') }}</view>
      </view>
      <view v-if="!expandOrCloseValue" class="info-item">
        <text>督学周期：</text>
        <view>
          <view v-if="studentInfo.inspectorTimeStart && studentInfo.inspectorTimeEnd">
            {{ dayjs(studentInfo.inspectorTimeStart).format('YYYY.MM.DD') }} -
            {{ dayjs(studentInfo.inspectorTimeEnd).format('YYYY.MM.DD') }}
          </view>
          <!--          <view v-for="item in studentOtherInfo.supervisionCycle" :key="item">{{ item }}</view>-->
        </view>
      </view>
    </view>
    <view class="expand-close-view" @click="expandOrClose">
      <text>{{ expandOrCloseValue ? '展开' : '收起' }}</text>
      <wd-icon v-if="expandOrCloseValue" name="arrow-down" size="24rpx"></wd-icon>
      <wd-icon v-else name="arrow-up" size="24rpx"></wd-icon>
    </view>

    <wd-popup v-model="contactVisible" lock-scroll position="bottom" custom-class="custom-popup">
      <view class="contact-view">
        <view class="contact-view-title">点击拨打电话</view>
        <view class="contact-view-list">
          <view
            v-for="item in studentInfo.patriarchs"
            :key="item.phone"
            class="contact-view-list-item"
            @click="callPhone(item.phone)"
          >
            <template v-for="i in useRelation" :key="i.id">
              <view v-if="item?.identityType && i.id === item?.identityType" class="main">
                <text class="tag" :style="{ backgroundColor: i.color }">{{ i.name }}</text>
                {{ item.phone.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3') }}
              </view>
            </template>
          </view>
        </view>
        <view class="buttonCont">
          <button class="butClos" @click="contactVisible = false">取消</button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { inject, type Ref, ref } from 'vue';
import dayjs from 'dayjs';
import { getAvatarUrl } from '@/utils';
import { useRelation, maskPhone } from '@/hooks';

const expandOrCloseValue = ref(false);
const expandOrClose = () => {
  expandOrCloseValue.value = !expandOrCloseValue.value;
};

const studentInfo = inject<Ref<any>>('studentInfo');
const contactVisible = ref(false);

const callPhone = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};

const initiate = () => {
  uni.setStorageSync('stu', {
    sender: 1,
    receiverId: studentInfo.value.userId,
    avatarUrl: studentInfo.value.avatarUrl,
    nickName: studentInfo.value.name,
  });
  uni.navigateTo({
    url: '/pages/inspector/chat/chatDetails',
  });
};
</script>

<style scoped lang="scss">
.info-view {
  .info-detail {
    display: flex;
    border-bottom: 2rpx solid #f7f8fa;
    padding-bottom: 30rpx;

    .avatar {
      margin-right: 20rpx;
      width: 100rpx;
      height: 100rpx;
      position: relative;

      .tag {
        position: absolute;
        bottom: 0;
        left: 10rpx;
        display: inline-block;
        padding: 0 10rpx;
        background: #21d17a;
        font-size: 20rpx;
        font-weight: 500;
        line-height: 24rpx;
        color: #fff;
        border-radius: 12rpx;
      }
      & > image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }

    .account {
      margin-top: 10rpx;
      font-size: 28rpx;
    }
    .name-operators {
      width: calc(100vw - 240rpx);
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-name {
        margin-right: 30rpx;
        color: #0a1f13;
        font-size: 32rpx;
        font-weight: 500;
        max-width: 214rpx;

        @include single-ellipsis;
      }

      &-ope {
        display: flex;
        gap: 10rpx;
        // width: 270rpx;

        button {
          display: grid;
          width: 128rpx;
          height: 48rpx;
          padding: 0;
          flex: 1 0;
          place-content: center;
          border-radius: 10rpx;
          font-size: 24rpx;
          box-sizing: border-box;

          &.initiate-btn {
            background-color: #ebebff;
            color: #615dff;
          }

          &.contact-btn {
            background-color: #ebebff;
            color: #9c99ff;
          }
        }
      }
    }
  }

  .info-item {
    display: flex;
    font-size: 30rpx;
    margin: 30rpx 0;

    & > text {
      color: #a9aab5;
      font-size: 28rpx;
    }

    & > view {
      color: #0a1f13;
      font-size: 28rpx;
    }
  }

  .expand-close-view {
    text-align: center;
    color: #a9aab5;
    font-size: 24rpx;
  }
}

.contact-view {
  padding: 30rpx;
  border-radius: 20rpx 20rpx 0 0;

  .buttonCont {
    display: flex;
    justify-content: center;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 16upx;
    font-size: 30upx;
    gap: 20upx;
    .butClos {
      width: 440rpx;
      height: 90rpx;
      background-color: #efefff;
      color: #615dff;
      border-radius: 20upx;
    }
  }
  &-title {
    color: #333;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  &-list {
    height: 226rpx;
    overflow: auto;

    &-item {
      display: flex;
      justify-content: center;
      padding: 30rpx 0;

      text-align: center;
      border-bottom: 2rpx solid #ececec;

      .main {
        width: 330rpx;
        text-align: left;

        .tag {
          display: inline-block;
          padding: 2rpx 0;
          text-align: center;
          width: 92rpx;
          border-radius: 10rpx;
          color: #fff;
          font-size: 30rpx;
          line-height: 42rpx;
        }
      }
    }
  }
}
</style>
