<template>
	<view class="tel-info">
		<!-- 需求服务 -->
		<view
			class="tel-list"
			v-if="obj.source == 1 || obj.source == 2"
			@tap.stop="handleJumpDiy"
			data-type="navigateTo"
			:data-url="`/pages/index/demandDetails/demandDetails?id=${obj.id}&source=${obj.source}`"
		>
			<view class="tel-list-img" style="height: 380rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
			<view class="tel-list-title">{{ obj.title }}</view>
			<view class="tel-list-price">
				<text class="tel-list-price-one" v-if="obj.price">c$</text>
				<text class="tel-list-price-two" v-if="obj.price">{{ obj.price }}</text>
				<text class="tel-list-price-two" v-else>{{i18n['无偿']}}</text>
			</view>
			<view class="tel-list-infos">
				<view class="tel-list-infos-left">
					<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
					<view class="tel-list-infos-left-name">
						<view class="">{{ obj.user_user_nickname }}</view>
					</view>
				</view>
				<view class="tel-list-infos-citys">
					<view class="">{{ obj.address }}</view>
				</view>
			</view>
		</view>
		<!-- 商品  -->
		<view
			class="tel-list"
			v-else-if="obj.source == 3"
			@tap.stop="handleJumpDiy"
			data-type="navigateTo"
			:data-url="`/pages/lieIdle/commodityDetails/commodityDetails?id=${obj.id}`"
		>
			<view class="tel-list-img" style="height: 380rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
			<view class="tel-list-title">{{ obj.title }}</view>
			<view class="tel-list-price">
				<text class="tel-list-price-one">c$</text>
				<text class="tel-list-price-two">{{ obj.price }}</text>
			</view>
			<view class="tel-list-infos">
				<view class="tel-list-infos-left">
					<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
					<view class="tel-list-infos-left-name">
						<view class="">{{ obj.user_user_nickname }}</view>
					</view>
				</view>
				<view class="tel-list-infos-citys">
					<view class="">{{ obj.address }}</view>
				</view>
			</view>
		</view>

		<!-- 动态 -->
		<view class="tel-list" v-else-if="obj.source == 5" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/circle/dynamicDetails/dynamicDetails?id=${obj.id}`">
			<view class="tel-list-img" style="height: 430rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
			<view class="tel-list-title">{{ obj.title }}</view>
			<view class="tel-list-infos">
				<view class="tel-list-infos-left">
					<view class="tel-list-infos-left-imgs"><image :src="obj.user_head_img" mode="aspectFill"></image></view>
					<view class="tel-list-infos-left-name">
						<view class="">{{ obj.user_user_nickname }}</view>
					</view>
				</view>
				<view class="tel-list-infos-number">
					<image :src="STATIC_URL + '81.png'" mode=""></image>
					<text>{{ obj.like_num }}</text>
				</view>
			</view>
		</view>

		<!-- 圈子 -->
		<view class="tel-list" v-else-if="obj.source == 6" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/circle/circleDetails/circleDetails?id=${obj.id}`">
			<view class="tel-list-img" style="height: 300rpx;" :style="{ backgroundImage: 'url(' + obj.thumb + ')' }"></view>
			<view class="tel-list-titles">{{ obj.title }}</view>
			<view class="tel-list-desc">{{ obj.desc }}</view>
			<view class="tel-list-infos-fun">
				<view class="tel-list-infos-fun-box">
					<text class="tel-list-infos-number-tip">{{ i18n['圈友'] }}</text>
					<text class="tel-list-infos-number-num">{{ obj.friends_num }}</text>
				</view>
				<view class="tel-list-infos-fun-box2">
					<text class="tel-list-infos-number-tip">{{ i18n['动态'] }}</text>
					<text class="tel-list-infos-number-num">{{ obj.article_num }}</text>
				</view>
			</view>
		</view>
		<!-- 个人主页 -->
		<view
			class="tel-home-page"
			v-else-if="obj.source == 4"
			@tap.stop="handleJumpDiy"
			data-type="navigateTo"
			:data-url="`/pages/index/personalHomepage/personalHomepage?id=${obj.id}`"
		>
			<view class="tel-home-page-info">
				<view class="tel-home-page-info-img"><image :src="obj.thumb" mode="aspectFill"></image></view>
				<view class="tel-home-page-info-right">
					<view class="tel-home-page-info-name">{{ obj.title }}</view>
					<view class="tel-home-page-info-funs">
						<view class="tel-home-page-info-funs-box" style="margin-right: 15rpx;" v-if="obj.auto_type && obj.auto_type != 0">
							<image :src="STATIC_URL + '89.png'" mode=""></image>
							<text>{{ i18n['已认证'] }}</text>
						</view>
						<view class="tel-home-page-info-funs-box">
							<image src="https://ljzp-files.oss-cn-hangzhou.aliyuncs.com/wxImage/31.png" mode=""></image>
							<text>{{ obj.age || 0 }} {{ i18n['岁'] }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tel-home-page-info-desc" v-if="obj.desc">{{ obj.desc }}</view>
		</view>
	</view>
</template>

<script>
/**
	 * 
	 * 1、求帮助路径：https://jnd.zztczg.cn/share/#/pages/index/demandDetails/demandDetails?id=1&source=1
2、去帮忙路径：https://jnd.zztczg.cn/share/#/pages/index/demandDetails/demandDetails?id=1&source=2
3、商品详情：https://jnd.zztczg.cn/share/#/pages/lieIdle/commodityDetails/commodityDetails?id=4
4、用户主页：https://jnd.zztczg.cn/share/#/pages/index/personalHomepage/personalHomepage?id=76
5、动态详情：https://jnd.zztczg.cn/share/#/pages/circle/dynamicDetails/dynamicDetails?id=1
6、圈子详情：https://jnd.zztczg.cn/share/#/pages/circle/circleDetails/circleDetails?id=1
	 * 
	 * */

export default {
	props: ['obj'],
	data() {
		return {
			bgcs: 'https://jnd.zztczg.cn/uploads/images/64/c74cf73cc3379b0956c5467bf430b5.jpg'
		};
	}
};
</script>

<style lang="scss">
.tel-info {
	.tel-list {
		width: 360rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		.tel-list-img {
			width: 100%;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.tel-list-infos {
			width: 100%;
			padding: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			.tel-list-infos-left {
				flex: 1;
				display: flex;

				.tel-list-infos-left-imgs {
					width: 40rpx;
					margin-right: 6rpx;
					image {
						width: 100%;
						height: 40rpx;
						border-radius: 50%;
					}
				}
				.tel-list-infos-left-name {
					flex: 1;
					view {
						width: 100%;
						font-size: 22rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						word-break: break-all;
						word-wrap: break-word;
						white-space: normal;
						word-break: break-word;
					}
				}
			}
			.tel-list-infos-citys {
				width: 120rpx;
				view {
					width: 100%;
					text-align: right;
					font-size: 20rpx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					word-break: break-all;
					word-wrap: break-word;
					white-space: normal;
					word-break: break-word;
				}
			}

			.tel-list-infos-number {
				width: 120rpx;
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
				}
				text {
					font-size: 20rpx;
					font-weight: 400;
					margin-left: 7rpx;
					color: #999;
				}
			}
		}

		.tel-list-title {
			width: 100%;
			padding: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 600;
			height: 48px;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-word;
		}

		.tel-list-desc {
			width: 100%;
			padding: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 400;
			height: 47px;
			color: #85879b;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-word;
		}
		.tel-list-titles {
			width: 100%;
			padding: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-word;
		}
		.tel-list-price {
			width: 100%;
			padding: 10rpx 10rpx 10rpx 10rpx;
			box-sizing: border-box;
			color: #ea4f3d;
			font-weight: 600;
			.tel-list-price-one {
				margin-right: 10rpx;
				font-weight: 400;
			}
			.tel-list-price-two {
			}
		}
	}

	.tel-list-infos-fun {
		width: 100%;
		padding: 10rpx 10rpx 15rpx 10rpx;
		box-sizing: border-box;
		view {
			display: inline-block;
			.tel-list-infos-number-tip {
				color: #99a9ad;
				font-size: 24rpx;
			}
			.tel-list-infos-number-num {
				color: #85879b;
				margin-left: 5rpx;
				font-size: 28rpx;
			}
		}
		.tel-list-infos-fun-box2 {
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
			position: relative;
		}
		.tel-list-infos-fun-box2::after {
			content: '';
			width: 1px;
			height: 25rpx;
			background-color: #e5e5e5;
			position: absolute;
			left: 0;
			top: 6rpx;
		}
		.tel-list-infos-fun-box {
		}
	}

	.tel-home-page {
		width: 400rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.tel-home-page-info-desc {
			width: 100%;
			color: #99a9ad;
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 10;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
			word-break: break-word;
		}
		.tel-home-page-info {
			width: 100%;
			display: flex;
			.tel-home-page-info-img {
				width: 80rpx;
				image {
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
				}
			}
			.tel-home-page-info-right {
				flex: 1;
				margin-left: 10rpx;
				.tel-home-page-info-name {
					width: 100%;
					color: #333;
					font-size: 32rpx;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					word-break: break-all;
					word-wrap: break-word;
					white-space: normal;
					word-break: break-word;
				}

				.tel-home-page-info-funs {
					width: 100%;
					margin-top: 10rpx;
					.tel-home-page-info-funs-acer {
						width: 75rpx;
						height: 27rpx;
					}
					.tel-home-page-info-funs-box {
						display: inline-block;
						font-size: 20rpx;

						border-radius: 20rpx;
						background-color: #f0f5f5;
						padding: 4rpx 10rpx;
						box-sizing: border-box;
						color: #6aa39f;
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
}
</style>
