<template>
	<view
		class="her-scoller"
		:style="{
			'background-color': goodsInfo.backgroundColor,
			'background-image': goodsInfo.backgroundPicUrl,
			'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : ''
		}"
	>
		<view
			class="good-five"
			@click="openGood(item)"
			v-for="(item, gli) in goodList"
			:key="gli"
			:style="{
				border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
				background: goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : ''
			}"
		>
			<view class="list-box" >
				<view class="img-box">
					<image style="width: 100%; height: 100%; border-radius: 50%;" mode="aspectFill" :src="item.picUrl" />
				</view>
				<view class="textone" style="font-size: 14px;font-weight: bold;margin: 5px 0;">{{item.name}}</view>
				<view style="display: flex;align-items: center;margin-top: 5px;margin-bottom: 14px;">
					<image style="width: 23px; height: 15px;margin-right: 5px;" mode="aspectFill" :src="item.foreignersUrl" />
					<text >{{item.nationality}}</text>
				</view>
				<view class="textone">
					<text v-for="(x, y) in item.lableNameList" :key="y" v-if="item.lableNameList!=null && item.lableNameList.length>0">
						{{x}}{{item.lableNameList.length==y+1?'':'、'}}
					</text>
					<text v-if="item.lableNameList==null || item.lableNameList.length==0">
						教育
					</text>
				
				</view>
				
			</view>
			
			
				
		
		</view>
		<good-sku v-if="showSku&&u.TenantId!=27" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku>
		<good-sku2 v-if="showSku&&u.TenantId==27" :option-type="2" borderRadius="20" v-model="showSku" :good="sku"></good-sku2>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>
<script>
import goodSku from '../goods/goodsku';
import goodSku2 from '../goods/goodsku2';
import auth from '@/components/auth/index.vue';
export default {
	components: {
		goodSku,
		goodSku2,
		auth
	},
	props: ['goodList', 'goodsInfo'],
	data() {
		return {
			mainColor: '',
			activeKey: 0,
			showSku: false,
			sku: {},
			showAuth: false,
			u: {}
		};
	},
	created() {
		this.u = uni.getStorageSync('mall_UserInfo');
		this.mainColor = this.$uiConfig.mainColor;
	},
	methods: {
		openGood(item) {
			uni.navigateTo({ url: '/pages/school/teacherDetails?ID=' + item.id });
		},
	
	}
};
</script>

<style>
.her-scoller {
	overflow-x: auto !important;
	padding: 12px;
	/* display: flex; */
	white-space: nowrap;
}
/* .her-scoller::after {
  clear: both;
  content: " ";
  display: block;
} */
.her-scoller .good-five {
	position: relative;
	margin-right: 12px;
	width: 120px;
	border: 1rpx solid transparent;
	border-radius: 10rpx;
	padding: 10px;
	display:inline-block;
	box-shadow: 0 5px 10upx rgba(0, 0, 0, 0.1);
	background: #FFF;
	/* float: left; */
}
.her-scoller .good-five .img-box {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	
}

.list-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;color: #333F53;
}
.textone{
	width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: center;
}
</style>
