<template>
	<view class="cardDetail">
		<uni-menubar :title="title" />
		<view v-if="listInfo.length>0">
			<tm-sheet :padding="[32,10]" v-for="(item,index) in listInfo" :key="index">
				<view class="title pb-30">
					{{item.title}}
				</view>
				<view class="content">
					<tm-images :src="item.pic"></tm-images>
				</view>
				<view class="footer">
					<view class="left">
						<tm-icons color="blue" :size="30" name="icon-eye-fill"></tm-icons>{{item.views}}人读过
					</view>
					<view class="right">
						<tm-button theme="blue" size="s"  @click="goDetail(item.id)">查看</tm-button>
					</view>
				</view>

			</tm-sheet>

		</view>
		<tm-empty v-else icon="icon-cry-fill" label="内容消失了~"></tm-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param: {
					page: 1,
					keyword: '',
					cate_id: '',
					cate_pid: '',
				},
				title: "",
				listInfo: [],
				card_id:""
			}
		},
		onLoad(option) {
			if (option) {
				this.title = option.title
				if(option.id){
					this.getList(option.id)
				}
				if(option.card_id){
					this.card_id= option.card_id
					this.$tm.vx.commit('card/cardId', option.card_id)
				}
				
			}
		},
		methods: {
			// 获取列表
			getList(id) {
				this.param.cate_id = id
				this.$tm.request.post('art/list', this.param).then(res => {
					this.listInfo = res.data
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/list/list?id=' +id+'&card_id='+this.card_id
				})
			}

		},
	}
</script>

<style lang="scss" scoped>
	.cardDetail{
		height: 100vh;
		background-color: #fafafa;
	}
	.title {
		font-size: 35rpx;
		font-weight: bolder
	}

	.footer {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.left {
			display: flex;
			justify-content: flex-start;
			font-size: 24rpx;
		}
		.right {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>
