<template>
  <div class="teach-points-container">
    <u-card :show-head="false" margin="0">
      <template #body>
        <view class="body">
          <view>
            <!-- <view class="teach-points-header">
            <h3>{{ teachPointsItem.FTERRITORIALITY }}</h3>
            </view> -->
            <view class="item">
              <text>现场教学点：{{ teachPointsItem.FTEACHINGPOINTS }}</text>
            </view>
            <view class="item">
              <text>属地：{{ teachPointsItem.FTERRITORIALITY }}</text>
            </view>
            <view class="item">
              <text>讲解员：{{ teachPointsItem.FINTERPRETER }}</text>
            </view>
            <view class="item">
              <text>联系人：{{ teachPointsItem.FCONTACTS }}</text>
              <u-icon
                name="phone"
                size="32"
                color="#05A8FF"
                style="margin-left: 32rpx"
                @tap="callPhone(teachPointsItem.FPHONE)"
              ></u-icon>
            </view>
            <view class="item">
              <text>票价/门票：{{ teachPointsItem.FAMOUNT }}</text>
            </view>
            <view class="item">
              <text>预约方式：{{ teachPointsItem.FAMOUNT }}</text>
            </view>
            <view class="item">
              <text>备注：{{ teachPointsItem.FREMARKS }}</text>
            </view>
          </view>
          <u-image
            :src="baseUrl + '/' + teachPointsItem.ImagePath"
            width="220rpx"
            height="296rpx"
            border-radius="8"
            style="margin-bottom: 24rpx"
          />
        </view>
      </template>
      <template #foot>
        <view class="foot">
          <text>{{ teachPointsItem.FINTRODUCE }} </text>
        </view>
      </template>
    </u-card>
  </div>
</template>

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

defineProps({
  teachPointsItem: {
    type: Array,
    default: () => [],
  } as any,
});
</script>

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

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

  :deep(.u-card__foot) {
    padding: 32rpx 32rpx 40rpx !important;
  }

  .teach-points-header {
    margin-bottom: 30rpx;
  }
  .body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .item {
      display: flex;
      margin-bottom: 24rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(34, 34, 34, 0.9);
    }
  }
  .foot {
    max-height: 102rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.7);

    text {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
