<template>
  <div class="address-book-container">
    <u-card :show-head="false" :show-foot="false" margin="0" border-radius="20">
      <template #body>
        <view class="address-book-content">
          <view class="left">
            <u-image
              width="92rpx"
              height="92rpx"
              shape="circle"
              :src="baseUrl + '/' + addressBookItem.proPhoto"
            ></u-image>
            <view class="content">
              <view class="stu-name">{{ addressBookItem.stuName }}</view>
              <text class="tel">{{ addressBookItem.Phone }}</text>
              <text class="tel">单位：{{ addressBookItem.stuUnit }}</text>
            </view>
          </view>
          <u-image
            v-if="!buttonTitle"
            width="96rpx"
            height="52rpx"
            src="../../../static/img/phone2.png"
            @tap="tapButton"
          ></u-image>
          <u-button
            v-else
            hover-class="background-color: #04a7ff; color: #ffffff"
            @tap="tapButton"
          >
            <view>{{ buttonTitle }}</view>
          </u-button>
        </view>
      </template>
    </u-card>
  </div>
</template>

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

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

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

const tapButton = () => {
  // console.log(props.buttonTitle);
  if (props.buttonTitle) {
    emits(
      "tapButton",
      props.addressBookItem.FCLASS,
      props.addressBookItem.studentId
    );
  } else {
    callPhone(undefined, props.addressBookItem.Phone);
    // emits("tapButton", props.addressBookItem.Phone);
  }
};
</script>

<style lang="scss" scoped>
.address-book-container {
  margin-bottom: 32rpx;
  height: 152rpx;

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

  .address-book-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

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

      .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 20rpx;
        color: #909399;
        font-size: 26rpx;

        .stu-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
          margin-bottom: 8rpx;
        }

        .tel {
          margin-bottom: 4rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(34, 34, 34, 0.5);
          height: 34rpx;
          line-height: 28rpx;
        }
      }
    }

    .u-btn {
      margin: 0;
      width: 160rpx;
      height: 72rpx;
      background: #05a8ff;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
