<template>
	<view class="container">
		<view class="titleContent">
			<view v-for="item in title" :key="item.no" :style="{width:item.width}">{{item.name}}</view>
		</view>
		<view class="listContent">
			<view v-for="listItem in lists" :key="listItem.id" class="line">
				<view v-for="subItem in listItem.children" :key="subItem.no"
					:style="{color:subItem.link ? '#2D56A7' : '#333',width:subItem.width}">
					<view class="" style="overflow: hidden;">
						<view class="" v-if="subItem.value == '阅读明细'"  @click="link(subItem.name,subItem.readCount,listItem)">
							<text v-if=" subItem.readCount > 0">{{subItem.value}}</text>
							<text v-else> - </text>
						</view>
						<view class="" v-else-if="subItem.value == '购买明细'"  @click="link(subItem.name,subItem.buyCount,listItem)">
							<text v-if=" subItem.buyCount > 0">{{subItem.value}}</text>
							<text v-else> - </text>
						</view>
						<view v-else class=""  @click="link(subItem.name,1,listItem)">
							<text
								:style="{borderColor:subItem.link ? '#2D56A7' : 'transparent'}">{{subItem.value}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "listItem",
		props: {
			title: {
				type: Array,
				default: [{
					no: Number,
					name: String,
					width: Number
				}]
			},
			lists: {
				type: Array,
				default: [{
					id: Number,
					children: [{
						no: Number,
						value: String,
						link: String
					}]
				}]
			}
		},
		data() {
			return {
				titleList: ['购买明细', '阅读明细', '购买订单']
			};
		},
		mounted() {
		},
		onLoad() {

		},
		methods: {
			link(val, value, list) {
				let dataList = list.children
				for (var i = 0; i < dataList.length; i++) {
					if (val == dataList[i].name) {
						if (this.titleList.includes(val)) {
							if (value > 0) {
								uni.navigateTo({
									url: dataList[i].link
								})
							}
						} else {
							uni.showModal({
								title: val,
								content: dataList[i].value,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						// if (val == '阅读明细' && dataList[i].readCount > 0) {
						// 	this.jumpdetail(true)
						// }
						// if (val == '购买明细' && dataList[i].buyCount > 0) {
						// 	this.jumpdetail(true)
						// }
						// if (val == '购买订单') {
						// 	this.jumpdetail(true)
						// }
						// uni.navigateTo({
						// 	url: dataList[i].link
						// })

						// [1, 2, 3].includes(2) // true

						// if() {

						// }

					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: #fff;

		.titleContent {
			color: #333;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 36rpx 20rpx 24rpx;
			font-weight: bold;

			view {
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.listContent {
			font-size: 26rpx;

			.line {
				display: flex;
				align-items: center;
				text-align: center;
				padding: 20rpx 20rpx 5rpx 20rpx;
				border-bottom: 1px solid #F2F2F2;

				text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				view {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					padding: 0 5rpx;
				}
			}

		}
	}
</style>
