<template>
  <view class="content">
    <z-nav-bar title="医生主页" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
    <view class="taihu_wrap" v-if="status">
      <view class="taihu_infor">
        <image
          :src="taihuTalent.icon"
          class="infor_image"
          mode="aspectFit"
        ></image>
        <view class="infor_right">
          <view class="infor_top">
            <text class="infor_name">{{ taihuTalent.name }}</text>
            <text class="infor_title">{{ taihuTalent.title }}</text>
          </view>
          <view class="infor_con">
            <text v-for="item in label" :key="item">{{ item }}</text>
          </view>
        </view>
      </view>
      <view class="taihu_common">
        <text>介绍</text>
        {{ taihuTalent.introduce }}
      </view>
      <view class="taihu_common">
        <text>业务专长</text>
        {{ taihuTalent.specialty }}
      </view>
      <view class="taihu_common">
        <text>出诊信息</text>
        <span v-html="taihuTalent.clinic"></span>
      </view>
      <view class="taihu_common">
        <text>预约信息</text>
        <span style="white-space: pre-line">{{
          taihuTalent.reservation.replace("电话预约:", "电话预约:\n")
        }}</span>
      </view>
      <view class="taihu_common">
        <text>所属地域</text>
        {{ taihuTalent.region }}
      </view>
      <view class="taihu_common">
        <text>太湖证书</text>
        <view class="certificate-list" v-if="certificates.length > 0">
          <view
            class="list_block"
            v-for="(item, index) in displayedCertificates"
            :key="index"
            @click="goToUrl(item.userCertificates)"
          >
            {{ item.title }}
          </view>

          <view v-if="shouldShowToggle" class="toggle-btn" @click="toggleShow">
            {{ showAll ? "收起" : "查看更多" }}
          </view>
        </view>
        <view class="certificate-list" v-else>暂无</view>
      </view>
      <view class="taihu_common">
        <text>名医精彩</text>
        <view class="certificate-list" v-if="courseList.length > 0">
          <view
            v-for="(item, index) in courseList"
            :key="index"
            style="text-decoration: underline"
            @click="goToDetail(item)"
            >{{ item.title }}</view
          >
        </view>
        <view class="certificate-list" v-else>暂无</view>
      </view>
      <view class="taihu_common">
        <text>精彩医案</text>
        <view class="certificate-list" v-if="medicalRecords.length > 0">
          <view
            v-for="(item, index) in medicalRecords"
            :key="index"
            style="text-decoration: underline;display: flex;align-items: center;margin-top: 10rpx;"
            @click="goToMedicalRecordsDetail(item)"
            >{{index+1}}. {{ item.title }}
            <image
              v-if="item.state == 6"
              src="../../static/icon/jing2.png"
              style="width: 24px; height: 24px;margin-top: -5rpx;margin-left: 20rpx;"
            ></image>
          </view>
        </view>
        <view class="certificate-list" v-else>暂无</view>
      </view>
    </view>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      id: null,
      taihuTalent: {},
      label: [], //标签
      certificates: [], //证书
      courseList: [], //名医精彩数据
      medicalRecords: [], //精彩数据
      status: false,
      showAll: false, //是否显示全部
      defaultShowCount: 6, //默认显示条数
    };
  },
  computed: {
    displayedCertificates() {
      if (this.showAll) {
        return this.certificates;
      } else {
        return this.certificates.slice(0, this.defaultShowCount);
      }
    },
    shouldShowToggle() {
      return this.certificates.length > this.defaultShowCount;
    },
  },
  onLoad(e) {
    this.id = e.id;
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      uni.showLoading({
        title: "加载中",
      });
      this.$http
        .request({
          url: "common/taihuTalent/taihuTalentInfo",
          method: "POST",
          data: {
            id: this.id,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            uni.hideLoading();
            this.status = true;
            this.taihuTalent = res.taihuTalent;
            this.label = res.label;
            this.certificates = res.certificates;

            if (res.courseList && res.courseList.length > 0) {
              this.courseList = res.courseList;
            }
            if (res.medicalRecords && res.medicalRecords.length > 0) {
              this.medicalRecords = res.medicalRecords;
            }
          }
        });
    },
    //点击展示全部
    toggleShow() {
      this.showAll = !this.showAll;
    },
    //展示图片
    goToUrl(urlArr) {
      if (urlArr && urlArr.length > 0) {
        uni.navigateTo({
          url: "/pages/talents/certificateUrl?data=" + JSON.stringify(urlArr),
        });
      } else {
        this.$commonJS.showToast("暂无证书图片");
      }
    },
    //跳转到课程详情
    goToDetail(item) {
      uni.navigateTo({
        url:
          "/pages/curriculum/index?navTitle=" +
          item.title +
          "&title=" +
          item.title +
          "&id=" +
          item.id,
      });
    },
    //跳转到课程详情
    goToMedicalRecordsDetail(item) {
    console.log('item at line 189:', item)
		var navTitle=''
		if(item.state==6){
			navTitle='精品医案'
		}else{
			navTitle='医案详情'
		}
      uni.navigateTo({
        url:
          `/pages/medicalRecords/medical?navTitle=${navTitle}&title=${navTitle}&id=${item.id}&type=detail&statusId=${item.state}&page=talents`
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";
.content {
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
.taihu_wrap {
  padding: 30rpx 30rpx 50rpx;
}
.taihu_infor {
  display: flex;
  align-items: center;
  padding-bottom: 10rpx;
}
.infor_image {
  display: block;
  width: 200rpx;
  height: 220rpx;
  background-color: #f3f3f3;
}
.infor_right {
  width: calc(100% - 220rpx);
  margin-left: 40rpx;
}
.infor_top {
  display: flex;
  align-items: center;
  line-height: 40rpx;
}
.infor_name {
  font-size: 38rpx;
  color: #333;
  font-weight: bold;
}
.infor_title {
  font-size: 34rpx;
  color: #999;
  padding-left: 20rpx;
}
.infor_con {
  padding-top: 20rpx;

  text {
    display: block;
    font-size: 30rpx;
    line-height: 34rpx;
    padding: 8rpx 0;
    color: $themeColor;
  }
}
.taihu_common {
  margin-top: 30rpx;
  font-size: 30rpx;
  line-height: 46rpx;

  text {
    font-size: 38rpx;
    padding-right: 15rpx;
    font-weight: bold;
    color: $themeColor;
  }
}
.list_block {
  padding-top: 5rpx;
}
.toggle-btn {
  color: $themeColor;
}
</style>
