<template>
  <view class="lecturer-item">
    <u-card :show-head="false" margin="0" border-radius="24">
      <template #body>
        <view class="body">
          <view class="body-left">
            <view class="body-left-header">
              <u-image
                width="112rpx"
                height="112rpx"
                border-radius="8"
                :src="baseUrl + '/' + lecturerItem.FPHOTO"
              ></u-image>
              <view class="body-left-header-right">
                <view class="body-left-header-right-top">
                  <text>{{ lecturerItem.FNAME }}</text>
                  <text class="line"></text>
                  <text>{{ lecturerItem.FTITLE }}</text>
                </view>
                <view class="body-left-header-right-bottom">{{
                  lecturerItem.FCANCOURSE
                }}</view>
              </view>
            </view>
            <view class="body-left-bottom">
              <view class="item"
                >可授课程：{{ lecturerItem.FCANCOURSE }}
                <view class="item-sub" @tap="showTaughts"
                  >查看全部可授课程</view
                >
              </view>
              <view class="item">课酬参考：{{ lecturerItem.FSALARY }}</view>
              <view
                class="item"
                @tap="callPhone($event, lecturerItem.FPHONENUMBER)"
                >联系电话：{{ lecturerItem.FPHONENUMBER }}</view
              >
              <!-- <view class="item"
                >联系电话：{{
                  hidePhoneNumber(lecturerItem.FPHONENUMBER)
                }}</view
              > -->
            </view>
          </view>
          <view class="body-right">
            <view class="body-right-title">职称证明</view>
            <u-image
              width="182rpx"
              height="250rpx"
              :src="baseUrl + '/' + lecturerItem.FTITLEPROVE"
            ></u-image>
            <view class="body-right-down" @tap="downTitleImage">点击下载</view>
          </view>
        </view>
      </template>
      <template #foot>
        <view class="foot">
          <text>{{ lecturerItem.FINTRODUCE }}</text>
          <text class="see-more" @click="toSeeMore"
            >查看更多<u-icon
              name="arrow-right-double"
              color="#05a8ff"
              size="24"
          /></text>
        </view>
      </template>
    </u-card>
  </view>
  <taughtsPopup ref="taughtsRef" v-model:show="show" />
</template>

<script setup lang="ts">
import { baseUrl } from "@/utils/request";
import { hidePhoneNumber, toast, callPhone } from "@/utils/util";
import { useCourseStore } from "@/stores/modules/courseStore";
import taughtsPopup from "./taughtsPopup.vue";

const props = defineProps({
  lecturerItem: {
    type: Object,
  } as any,
});

const courseStore = useCourseStore();
const show = ref(false);
const taughtsRef = ref();

const downTitleImage = () => {
  try {
    uni.downloadFile({
      url: baseUrl + "/" + props.lecturerItem.FTITLEPROVE, // 这里是你接口地址 若要传参 直接 url拼接参数即可
      success: (res) => {
        console.log(res, "res");
        const tempFilePath = res.tempFilePath; // 这里拿到后端返回的图片路径
        const url = tempFilePath;
        const a = document.createElement("a");
        a.href = url;
        a.download = props.lecturerItem.FNAME + ".jpg";
        a.click();
      },
      fail: () => {
        uni.hideLoading();
      },
    });
  } catch (error) {
    toast("下载失败");
  }
};

const showTaughts = () => {
  taughtsRef.value.taughtList = props.lecturerItem.FCANCOURSES;
  show.value = true;
};

const toSeeMore = () => {
  let data = [
    {
      Url: props.lecturerItem.FPHOTO,
      teachName: props.lecturerItem.FNAME,
      teachMsg: props.lecturerItem.FINTRODUCE,
    },
  ];
  courseStore.setTeachs(data);
  setTimeout(() => {
    uni.navigateTo({
      url: "/pagesTeach/course/seeMore",
    });
  }, 300);
};
</script>

<style lang="scss" scoped>
.lecturer-item {
  margin-bottom: 32rpx;
  :deep(.u-card__body) {
    padding: 40rpx 32rpx 32rpx !important;
  }
  :deep(.u-card__foot) {
    padding: 32rpx 32rpx 40rpx !important;
  }
  .body {
    display: flex;
    height: 348rpx;
    justify-content: space-between;
    .body-left {
      .body-left-header {
        display: flex;
        margin-bottom: 24rpx;
        .body-left-header-right {
          margin-left: 16rpx;
          height: 112rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .body-left-header-right-top {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #000000;
            .line {
              width: 0rpx;
              height: 24rpx;
              border: 2rpx solid rgba(0, 0, 0, 0.1);
              margin: 0 8rpx;
            }
            & text:last-child {
              font-size: 24rpx;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.5);
              line-height: 28rpx;
            }
          }
          .body-left-header-right-bottom {
            font-size: 28rpx;
            font-weight: 400;
            color: #666666;
            margin-right: 10rpx;
          }
        }
      }
      .body-left-bottom {
        .item {
          font-size: 28rpx;
          font-weight: 400;
          color: #222222;
          margin-bottom: 24rpx;
          .item-sub {
            font-size: 24rpx;
            font-weight: 400;
            color: #05a8ff;
            margin-top: 4rpx;
          }
        }
        & .item:last-child {
          margin-bottom: 8rpx;
        }
      }
    }
    .body-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      .body-right-title {
        margin-bottom: 16rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #222222;
      }
      .body-right-down {
        font-size: 24rpx;
        font-weight: 400;
        color: #05a8ff;
        margin-top: 8rpx;
      }
    }
  }
  .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;
    }

    .see-more {
      text-align: end;
      margin-top: 4rpx;
      color: #05a8ff;
    }
  }
}
</style>
