<template>
	<view class="upage">
		<navBar :navName="'肝胆相照病例交流园地'" :type="'caseTalk'"></navBar>
		<view class="databox">
			<view class="cell">
				<view class="num">{{  numInfo.exchange_num}}</view>
				<view class="name">病例数</view>
			</view>
			<view class="cell">
				<view class="num">{{numInfo.exchange_collect_num}}</view>
				<view class="name">互动数</view>
			</view>
			<view class="cell">
				<view class="num">{{ numInfo.exchange_read_num }}</view>
				<view class="name">浏览量</view>
			</view>
		</view>
		<view class="bar"></view>
	    <view class="box">
			<view class="special mostread" v-if="most_read_articles.length>0">
				<view class="titlebox">
					<view class="title">精选病例</view>
					<view class="more" @click="goList('read')">
						<view class="morename">查看更多</view>
						<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
					</view>
				</view>
				<view class="list">
					<view class="cell" v-for="item in most_read_articles" :key="item.exchange_id" @click="goDetail(item.exchange_id)">
						<view class="circle"></view>
						<view class="title ellipsis-two-lines">{{ item.exchange_title }}</view>
					</view>
				</view>
			</view>
			<view class="bar"></view>
			<view class="record special">
				<view class="titlebox">
					<view class="title">最新收录</view>
					<view class="more" @click="goList('new')">
						<view class="morename">查看更多</view>
						<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
					</view>
				</view>
				<view class="list">
				<view
				class="cell"
				v-for="(item) in new_articles"
				:key="item.exchange_id"
				
				>
				<view class="title ellipsis-two-lines" @click="goDetail(item.exchange_id)">{{
					item.exchange_title
				}}</view>
				<view class="doctor" @click="goDetail(item.exchange_id)">
					<up--image
					:src="item.avatar ? item.avatar : headImg"
					width="46rpx"
					height="46rpx"
					radius="50%"
					></up--image>
					<view class="name"
					>{{ item.user_name }}（{{ item.hospital_name }}）</view
					>
				</view>
				<view class="content" @click="goDetail(item.exchange_id)"> {{ item.exchange_content }} </view>
				<view
					class="imgbox"
					@click="goDetail(item.exchange_id)"
					v-if="
					item.exchange_content_image &&
					item.exchange_content_image.length > 0
					"
				>
					<view
					class="imgcell"
					v-for="unit in item.exchange_content_image"
					>
					<up--image
						:src="unit"
						radius="10"
						width="220rpx"
						height="220rpx"
					>
						<view slot="error" style="font-size: 24rpx">加载失败</view>
					</up--image>
					</view>
				</view>
				<view class="videocon">
					<view
					class="imgbox"
					v-if="
						item.exchange_content_video &&
						item.exchange_content_video.length > 0
					"
					>
					<video
					:key="index"
						v-for="(videoCell, index) in item.exchange_content_video"
						class="myVideo"
						:src="videoCell"
						@error="videoErrorCallback"
						controls
					></video>
					</view>
				</view>
				<view class="tagbox" @click="goDetail(item.exchange_id)" v-if="item.label && item.label.length > 0">
					<view
					class="tag"
					v-for="cell in item.label"
					:key="cell.exchange_label_id"
					>{{ cell.label_name }}</view
					>
				</view>
				<view class="deal" @click="goDetail(item.exchange_id)">
					<view class="left">
					<view class="eyebox item">
						<up-icon name="eye" color="#4B5563" size="28rpx"></up-icon>
						<view class="num">{{ item.read_num }}</view>
					</view>
					<view class="collect item">
						<up-icon
						name="heart"
						color="#4B5563"
						size="28rpx"
						></up-icon>
						<view class="num">{{ item.collect_num }}</view>
					</view>
					<view class="chat item">
						<up-icon name="chat" color="#4B5563" size="28rpx"></up-icon>
						<view class="num">{{ item.comment_num }}</view>
					</view>
					</view>
					<view class="time">
					<up-icon name="clock" color="#4B5563" size="28rpx"></up-icon>
					<view class="num">{{ formatdate(item.push_date) }}</view>
					</view>
				</view>
				</view>
			</view>
			</view>
		</view> 
	</view>

	<tabBar :value="2"></tabBar>
</template>

<script setup>
	import navBar from "@/components/navBar/navBar.vue";
	import tabBar from "@/components/tabBar/tabBar.vue";
	import headImg from "@/static/headImg.png";
	import dayjs from "dayjs";
	import navTo  from "@/utils/navTo.js";
	import api from "@/api/api";
	import { reactive,ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	const numInfo=reactive({})
	const most_read_articles=ref([]);
	const new_articles=ref([]);


	const formatdate = (date) => {
		return dayjs(date).format('YYYY-MM-DD')
	};
    // const goList = () => {
    //     navTo({
    //         url: '/pages/specialList/specialList'
    //     })
    // };
	const goList=(type)=>{
		if(type=='read'){
		navTo({
				url:'/pages/specialList/specialList?is_selected=1'
			})
		}else{
			  navTo({
					url:'/pages/specialList/specialList'
			})
		}
	
};
	const getStatic=()=>{
		api.getExchangeStatic().then(res=>{
			let result=res.data.data;
            Object.assign(numInfo,result); 
		})
	}
const goDetail = (id) => {
  navTo({
    url: `/pages/detail/detail?id=${id}&type=exchange`,
  });
};
	const videoErrorCallback = (e) => {
		uni.showModal({
			content: e.target.errMsg,
			showCancel: false
		})
	};
	const searchList = async () => {
  let searchForm = {
    page: 1,
    page_size: 10
  };
 
  api.searchExchage({
      ...searchForm
    })
    .then((res) => {
      new_articles.value=res.data.data.data;
    })
    .catch((err) => {
     
    });
};
const goodList=()=>{
	api.searchExchageGood({
		is_selected:1,
		limit:5
	}).then(res=>{
		most_read_articles.value=res.data.data
	})
}
const hotList=()=>{
	api.searchExchageHot({
		is_selected:0,
		limit:5,
		page:1,
		page_size:5
	}).then(res=>{
   })
}
onShow(()=>{
		getStatic();
		goodList();
		searchList();
	})
</script>

<style lang='scss' scoped>
	.upage {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 100rpx);
	}
   .mostread{
	.cell{
		padding: 22rpx 0rpx!important;
		margin:0 30rpx;
		display: flex;
		
	}
   }
	.box {
		flex: 1;
		padding-bottom: 30rpx;
		overflow-y: scroll;
	}

	.myVideo {
		width: 100%;
		border-radius: 15rpx;
	}

	.deal {
		padding-top: 20rpx;
		display: flex;
		color: #4B5563;
		font-size: 24rpx;
		justify-content: space-between;

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

			.item {
				width: 100rpx;
			}
		}

		.collect {
			display: flex;
			align-items: center;
		}

		.eyebox,
		.chat {
			display: flex;
			align-items: center;
		}

		.time {
			display: flex;
			align-items: center;
		}

		.num {
			margin-left: 8rpx;
		}
	}

	.tagbox {
		margin-top: 24rpx;
		display: flex;

		.tag {
			height: 54rpx;
			padding: 0 28rpx;
			background: #ECFAF9;
			border-radius: 30rpx;
			margin-right: 12rpx;
			font-size: 27rpx;
			color: #3CC7C0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.doctor {
		display: flex;
		align-items: center;
	}

	.record {
		padding-top: 30rpx;

		.list {
			margin: 30rpx 30rpx;

			.name {
				padding: 20rpx 0 20rpx 15rpx;
				font-size: 27rpx;
				color: #333333;
			}

			.content {
				font-size: 27rpx;
				color: #666666;
				line-height: 38rpx;
			}

			.imgbox {
				display: flex;
				margin-top: 24rpx;

				.imgcell {
					width: 220rpx;
					height: 220rpx;
					margin-right: 20rpx;
				}

				.imgcell:last-child {
					margin-right: 0;
				}
			}

		}
	}

	.special {
		padding-top: 30rpx;

		.list {
			margin: 8rpx 0rpx 0;
			.cell {
				 padding: 22rpx 30rpx;
				 border-bottom: 2rpx solid #f3f4f6;

				.circle {
					margin-top: 15rpx;
					width: 15rpx;
					height: 15rpx;
					background: #3cc7c0;
					border-radius: 50%;
				}

				.title {
					margin-left: 10rpx;
					font-size: 32rpx;
					color: #000000;
					line-height: 46rpx;
				}
			}

			.cell:last-child {
				border-bottom: none;
			}
		}
	}

	.titlebox {
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;

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

			.morename {
				margin-right: 10rpx;
				font-size: 28rpx;
				color: #3cc7c0;
			}
		}
	}

	.bar {
		height: 16rpx;
		background: #f3f4f6;
	}

	.databox {
		height: 162rpx;
		background: #ffffff;
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;

		.cell {
			flex: 1;
			padding: 35rpx 0;

			text-align: center;

			.num {
				font-size: 38rpx;
				color: #3cc7c0;
			}

			.name {
				margin-top: 18rpx;
				font-size: 28rpx;
				color: #4b5563;
			}
		}
	}
</style>