<template>
	<view class="safe-area-inset-bottom">
		<navigator :url="`/party/pages/infomation/detail?id=${list[0].id}`" hover-class="none" class="first-card" v-if="enableFirst">
			<image :src="list[0].img"></image>
			<view class="text-cut-1 title">
				<text>{{list[0].name}}</text>
			</view>
		</navigator>
		<navigator :url="`/party/pages/infomation/detail?id=${item.id}`" hover-class="none" class="card " v-for="(item,index) in list" :key="index" v-if="showCard(index)">
			<view class="left" v-if="item.img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="right">
				<view class="title text-cut-2">{{item.name}}</view>
				<view class="sub_title">
					<text v-for="(item1,index1) in partyInfoClass" :key="index1" v-if="item1.value==item.classId">{{item1.label}}</text>
					<text style="padding-top: 4rpx;">{{item.updateTime}}</text>
				</view>
			</view>
			
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				partyInfoClass:[]
			}
		},
		props:{
			enableFirst:Boolean,
			list:Array
		},
		created() {
			this.getDict()
		},
		computed:{
			showCard(){
				return index=>{
					if (this.enableFirst) {
						//开启第一页
						return index!=0
					}else{
						return true
					}
				}
			},
		},
		methods: {
			getDict(){
				let dict=this.$cache.get('dict')
				if (dict&&!this.$isEmpty(dict.partyInfoClass)) {
					//缓存中有字典值
					this.partyInfoClass=dict.partyInfoClass
					return
				}
				this.$api.dict({code:'party_new_class'}).then(res=>{
					res.data.forEach((item)=>{
						let tmp={
							value:item.dictKey,
							label:item.dictValue
						}
						this.partyInfoClass.push(tmp)
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	
	.first-card{
		position: relative;
		
		image{
			width: 100%;
			height: 360rpx;
		}
		
		.title{
			padding: 0 20rpx;
			font-size: 28rpx;
			position: absolute;
			bottom: 10rpx;
			background-color: rgba(0,0,0,0.4);
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			color: #FFFFFF;
		}
	}
	
	
	.card{
		margin:0 20rpx;
		padding: 20rpx 10rpx;
		display: flex;
		border-bottom: 1rpx solid #e8e8e8;
		
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 20rpx;
			image{
				width: 180upx;
				height: 180upx;
				border-radius: 10rpx;
			}
		}
		
		.right{
			width: 100%;
			height: 180rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			padding: 10rpx 0;
			flex-direction: column;
			.title{
				font-size: 30upx;
				overflow: hidden;
				color: #474747;
			}
			
			.sub_title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #9f9f9f;
				font-size: 24rpx;
			}
		}
		
	}
</style>
