<template>
  <view class="content" style="background-color: #d8e6ff57">
    <z-nav-bar title="我的医案" bgColor="#5188e5" fontColor="#fff">
      <template v-slot:right>
        <view class="top_right" @tap="createFolder">
          <uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
          <text>创建医案</text>
        </view>
      </template>
    </z-nav-bar>
    <view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
      <view class="cateList flexbox" style="background-color: #fff">
        <common-sticky
          itemStyle="width:25%; height: 38px;font-size:24rpx;"
          :list="tabsList"
          label="title"
          :currentCateIndex="currentCateIndex"
          @handleselectCate="ordersTabCLi"
        ></common-sticky>
      </view>
      <!-- <view class="name_search">
				<uni-easyinput
					v-model="courseName"
					prefixIcon="search" 
					placeholder="按医案标题搜索" 
					placeholderClass="name-placeholder"
					class="center-input"
				/>
				<button @click="getListData(taihumedId, true)">查询</button>
			</view> -->
    </view>
    <scroll-view
      scroll-y="true"
      :scroll-top="scrollTop"
      @scrolltolower="loadMore"
      style="
        height: calc(100vh - 220rpx);
        margin-top: 100rpx;
        padding-bottom: 120rpx;
      "
      v-if="show == true"
    >
      <view class="doctors_list" id="top">
        <view
          class="doctors_item"
          v-for="(item, index) in list"
          :key="index"
          @click="goToDetail(item)"
        >
          <view class="flex">
            <view class="flex">
              <!-- <image
                v-if="item.squareImage"
                :src="item.squareImage"
                class="item_image"
                mode="aspectFit"
              ></image>
              <image
                v-else
                src="../../static/logo_zi.png"
                class="item_image"
                mode="aspectFit"
              ></image> -->

              <view class="item_right">
                <view style="display: flex; align-items: center">
                  <text class="card_label" v-if="statusTitle" :style="`background-color:${statusColor} ;`">{{ statusTitle }}</text>
                  <text class="item_time">{{ item.createTime }}</text></view
                >

                <view class="item_top">
                  <view class="item_name">{{ item.title }}</view>
                  <rich-text
                    class="item_content"
                    :nodes="item.information"
                  ></rich-text>
                  <!-- <rich-text
                    class="item_content"
                    :nodes="item.chiefComplaint"
                  ></rich-text> -->
                </view>
                <view style="margin-top: 20rpx" v-if="item.img">
                  <u-upload
                    :fileList="item.fileList1"
                    multiple
                    width="50"
                    height="50"
                    :disabled="true"
                    :previewFullImage="true"
                    @click.stop="handleClick"
                  >
                  </u-upload>
                </view>

                <view class="list_item_bt">
                  <text class="list_item_study" v-if="taihumedId == 0"
                    >编辑医案</text
                  >
                  <text class="list_item_study" v-else>医案详情</text>
                </view>
                <!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
      <text v-show="showText && count > list.length" class="show-more"
        >加载更多</text
      >
      <text v-show="noMore" class="no-more">没有更多了</text>
    </scroll-view>
    <text class="null_text" v-else>{{ null_text }}</text>
    <z-navigation></z-navigation>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      tabsList: [],
      currentCateIndex: 0,
      list: [],
      null_text: "",

      current: 1,
      limit: 10,
      courseName: "",
      taihumedId: null,
      statusTitle: '',
      statusColor: '',

      timer: null,
      showText: false,
      noMore: false,
      show: null,
      count: 0,
      scrollTop: 0, //滚动位置
      isRefreshing: false, //刷新状态
    };
  },
  onPullDownRefresh() {
    this.isRefreshing = true;
    console.log("下拉刷新");

    setTimeout(() => {
      this.current = 1;
      this.list = [];
      this.noMore = false;

      this.getListData(this.tabsList[this.currentCateIndex].id);
      uni.stopPullDownRefresh();
      this.isRefreshing = false;
      console.log("下拉刷新已停止");
    }, 800);
  },
  onLoad() {
    uni.hideTabBar();
    this.getTabData();
  },
  onShow() {
    this.getListData(this.taihumedId);
  },
  methods: {
    createFolder() {
      uni.navigateTo({
        url: `/pages/medicalRecords/medical?navTitle=创建医案&title=创建医案&type=add`,
      });
    },
    //判断显示‘上/中/下’
    formatContent(content) {
      const keywords = ["上部", "中部", "下部"];
      let result = [];

      // 判断是否包含关键字
      keywords.forEach((keyword) => {
        if (content.includes(keyword)) {
          result.push(keyword.substring(0, 1));
        }
      });
      return result.join("");
    },
    //获取tab数据
    getTabData() {
      // this.$http.request({
      // 	url: 'taihumed/course/getCourseTaihumedList',
      // 	method: "POST",
      // 	data: {},
      // 	header: {
      // 		"Content-Type": "application/json",
      // 	},
      // })
      // .then(res=> {
      // if (res.list&&res.list.length>0) {
      this.tabsList = [
        { id: 0, title: "草稿箱", statusTitle: '' },
        { id: 1, title: "待审核",statusTitle: '待审核',color:'#f59442'  },
        { id: 3, title: "已通过",statusTitle: '已通过' ,color:'#22be98' },
        { id: 2, title: "未通过",statusTitle: '未通过',color:"#e78084" },
      ];
      this.taihumedId = this.tabsList[0].id;
      this.statusTitle = '';
      this.statusColor = '';
      this.getListData(this.taihumedId);
      // }
      // });
    },
    //获取列表数据
    getListData(taihumedId, type) {
      if (type) {
        this.current = 1;
        this.list = [];
        this.noMore = false;
      }
      if (this.noMore) {
        return false;
      }
      uni.showLoading({
        title: "加载中",
      });
      this.$http
        .request({
          url: "common/medicalRecords/medicalRecordsList",
          method: "POST",
          data: {
            state: taihumedId,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          uni.hideLoading();
          this.list=[...res.medicalRecordsList].filter(e=>e.data)
          this.list = [...this.list].map((e) => {
            return {
              ...e,
              fileList1: e.img
                ? e.img.split(",").map((image, i) => ({
                    uid: i, // 假设 id 是唯一标识符
                    name: i, // 文件名
                    status: "done", // 状态
                    url: image, // 文件 URL
                  }))
                : [],
            };
          });
          this.count = this.list.length; //总数
          let length = this.list.length;
          if (res.medicalRecordsList && length > 0) {
            this.show = true;
            // 	//如果返回的数据少于每页数量，表示没有更多数据
            // 	if(this.count==length || length < this.limit ||this.count/this.current==this.limit){
            // 		this.noMore = true;
            // 	}
            // 	this.list = [...this.list, ...res.pageRes.records];
            // 	this.current += 1;  //更新页码
            // 	//显示提示语
            // 	this.showText = true;

            // 	if(this.current==2||type){
            // 		this.scrollTop = 0
            // 		this.$nextTick(() => {
            // 			this.scrollTop = 0.1;  // 确保触发滚动
            // 		})
            // 	}
          } else {
            this.show = false;
            this.null_text = "暂无数据";
          }
        });
    },
    //加载更多
    loadMore() {
      this.getListData(this.taihumedId);
    },
    //切换tab状态
    ordersTabCLi(data, index) {
      this.currentCateIndex = index;
      this.courseName = "";
      this.taihumedId = data.id;
      this.statusTitle = data.statusTitle;
      this.statusColor = data.color;
      //重置
      this.list = [];
      this.noMore = false;
      this.show = false;
      this.count = 0;
      this.current = 1;
      this.getListData(this.taihumedId);
    },
    //详情
    goToDetail(item) {
      if (this.isRefreshing) return;
      var navTitle = "";
      var type = "";

      switch (this.taihumedId) {
        case 0:
          navTitle = "编辑医案";
          type = "edit";
          break;
        case 1:
          navTitle = "医案详情";
          type = "detail";
          break;
        case 3:
          navTitle = "医案详情";
          type = "detail";
          break;
        case 2:
          navTitle = "医案详情";
          type = "detail";
          break;
      }
      uni.navigateTo({
        url: `/pages/medicalRecords/medical?navTitle=${navTitle}&title=${navTitle}&id=${item.id}&type=${type}&statusId=${this.taihumedId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/mixin.scss";
.content {
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
.doctors_list {
  margin: 0 20rpx 20rpx;
}
.doctors_item {
  // border: 1rpx solid $themeColor;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  padding: 12rpx 30rpx 60rpx;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 8px #e3e1e1;
}
.item_image {
  display: block;
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0;
  background: #f3f3f3;
}
.item_right {
  width: calc(100%);
  //   margin-left: 30rpx;
  // padding-bottom: 20rpx;
}
.item_top {
  //   display: flex;
  //   align-items: center;
  // line-height: 30rpx;
  margin-top: 8rpx;
}
.item_name {
  font-size: 34rpx;
  white-space: pre-wrap;
  word-wrap: break-word; /* 避免长单词造成溢出 */

  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.item_content {
  h1 {
    font-size: 28rpx;
    line-height: 30px;
  }
}
.item_title {
  font-size: 32rpx;
  color: #333;
}
.item_time {
  font-size: 26rpx;
  color: #aaacab;
}
.item_con {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-top: 10rpx;
  line-height: 40rpx;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.null_text {
  display: block;
  text-align: center;
  font-size: 30rpx;
  color: #999;
  padding-top: 300rpx;
}
.doctors_module {
  width: 100%;
  position: fixed;
  z-index: 99;
  left: 0;
}
.cateList {
  background: #f3f3f3;
}
.flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.name_search {
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;

  /deep/.is-input-border {
    background-color: #f3f3f3;
    border-radius: 50rpx;
    height: 60rpx;
    line-height: 30rpx;
    padding: 15rpx;
    font-size: 28rpx;
    color: #666;
  }
  /deep/.uni-easyinput__content-input {
  }
  .name-placeholder {
    font-size: 28rpx;
    text-align: center;
    color: #666;
  }

  button {
    background-color: $themeBgColor;
    font-size: 26rpx;
    line-height: 36rpx;
    border-radius: 15rpx;
    color: #fff;
    padding: 5rpx 20rpx;
    margin-left: 15rpx;
  }
}
.show-more,
.no-more {
  display: inline-block;
  width: 100%;
  font-size: 24rpx;
  padding-top: 5rpx;
  color: #ccc;
  text-align: center;
}

.list_item_study {
  line-height: 48rpx;
  background: $themeBgColor;
  color: #fff;
  border-radius: 40rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
.list_item_bt {
  display: flex;
  align-items: center;
  position: absolute;
  right: 20rpx;
  bottom: 16rpx;
}
.list_item_price {
  font-size: 30rpx;
  font-weight: 500;
  margin-right: 30rpx;
  color: red;
  line-height: 54rpx;
}
.top_right {
  display: flex;
  align-items: center;
  margin-right: 30rpx;

  text {
    font-size: 28rpx;
    color: #fff;
    padding-left: 2rpx;
  }
}
/deep/.u-upload__deletable {
  display: none !important;
}
/deep/.u-upload__button {
  display: none !important;
}
/* 状态样式 */
.card_label {
  display: inline-block;
  padding: 0px 16rpx;
  background-color: #4caf50; /* 绿色背景 */
  color: white;
  // font-weight: bold;
  font-size: 12px;
  border-radius: 4px; /* 圆角 */
  position: relative; /* 用于斜角效果 */
  text-align: center;
  transform: skew(-20deg); /* 倾斜效果 */
  margin-right: 20rpx; /* 如果有多个标签时，之间保持间距 */
  line-height: 38rpx;
}

/* 斜角效果 */
// .card_label::after {
//   content: '';
//   position: absolute;
//   top: 0;
//   right: -10px;
//   width: 20px;
//   height: 20px;
//   background-color: inherit;
//   transform: rotate(45deg); /* 旋转45度，形成斜角 */
//   z-index: -1;
// }
</style>
