<template>
	<view class="content">
		<!-- 临时 style="padding-top: 22%;" -->
		<view class="userTop" :class="{active : !userLogin}">
			<img class="userTop-back" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/04e656417170e100efdd3443b0b8a6c8.png">
			<view class="userTop-cont">
				<view class="userTop-height" v-if="userLogin">
					<view class="userTop-head">
						<image :src="userData.avatar ? userData.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png'" mode="aspectFill"></image>
					</view>
					<view class="userTop-text">
						<view class="userTop-name">
							{{userData.nickname}} <image v-if="userData.certification" class="userTop-icon" src="@/static/imgs/user_attestation.png"></image>
						</view>
						<view class="userTop-identity-tips">
							普通用户 <image class="userTop-arrow" src="@/static/imgs/use_arrow.png"></image>
						</view>
					</view>
				</view>
				<view class="userTop-height" v-else @click="$Router.push({name: 'Login'})">
				    <view class="userTop-head">
				    	<image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png" mode="aspectFill"></image>
				    </view>
				    <view class="userTop-text">
				        <view class="userTop-login">
				            请先登录
				        </view>
				    </view>
				</view>
				<!-- 临时 style="display: none;" -->
				<view class="userTop-see" v-if="userLogin">
					<view class="userTop-label" @click="$Router.push({name: 'sheetIndex'})">
						<view class="userSee-name">
							协商调解类
						</view>
						<view class="userSee-number" v-if="userData.business_orders_count">
							{{ userData.business_orders_count.all}}<text>单</text>
						</view>
						<view class="userSee-tips">
							信用卡、贷款业务
						</view>
						<block v-if="userData.business_orders_count">
							<view class="userSee-new" v-if="userData.business_orders_count.all">
								新订单
							</view>
						</block>
						<img class="userSee-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/2823f7c9ed144df424ca8ee6c47b0ff6.png">
					</view>
					
					<view class="userTop-label" @click="$Router.push({name: 'synthesisOrder', params: {type: 'legal'}})">
						<view class="userSee-name">
							法律咨询类
						</view>
						<view class="userSee-number" v-if="userData.business_orders_count">
							{{synthesisAll.legal_consulting}}<text>单</text>
						</view>
						<view class="userSee-tips">
							个人、企业法律
						</view>
						<img class="userSee-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/84e573c04d3dcb7fa1cccefbde9bf851.png">
					</view>
					<view class="userTop-label" @click="$Router.push({name: 'synthesisOrder', params: {type: 'lawsuit'}})">
						<view class="userSee-name">
							诉讼委托类
						</view>
						<view class="userSee-number">
							{{synthesisAll.lawsuit}}<text>单</text>
						</view>
						<view class="userSee-tips">
							案件委托、拓展服务
						</view>
						<img class="userSee-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/19/08e5c39f136d84e9754d4ac4d16af181.png">
					</view>
					<view class="userTop-label">
						<view class="userSee-name">
							增收赋能类
						</view>
						<view class="userSee-number">
							0<text>单</text>
						</view>
						<view class="userSee-tips">
							增收赋能类
						</view>
						<img class="userSee-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/19/a1d7c2b05053dabfeb9ac03e639d3311.png">
					</view>
				</view>
			</view>
		</view>
		
		<!-- 临时 style="display: none;" -->
		<view class="board" v-if="userLogin">
			<view class="board-title">
				数据看板
			</view>
			<view class="board-item" v-if="userData.business_orders_count">
				<view class="board-lable" :class="{active : userData.business_orders_count.confirm_count}" @click="$Router.push({name: 'OrderModify'})">
					<img class="board-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/935384ea494f72085a705087f871e047.png">
					<view class="board-name">待确认方案</view>
					<view class="board-number">{{userData.business_orders_count.confirm_count}}</view>
				</view>
				<view class="board-lable" :class="{active : userData.business_orders_count.modify_count}" @click="$Router.push({name: 'OrderAffirm'})">
					<img class="board-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/548b870435f7396bdeb67fc08535420b.png">
					<view class="board-name active">修改订单资料</view>
					<view class="board-number active">{{userData.business_orders_count.modify_count}}</view>
				</view>
				<view class="board-lable" :class="{active : userData.business_orders_count.diff_count}" @click="$Router.push({name: 'OrderMake'})">
					<img class="board-icon" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/e0b00a53e089c46678b32f94b02b3ec0.png">
					<view class="board-name">补交服务费</view>
					<view class="board-number">{{userData.business_orders_count.diff_count}}</view>
				</view>
			</view>
		</view>
		<view class="tool">
			<view class="tool-title">
				其他工具
			</view>
			<view class="tool-item">
				<view class="tool-lable" @click="$Router.push({name: 'indexCollect'})">
					<img class="tool-icon" src="@/static/imgs/userTool_01.png">
					<view class="tool-name">我的收藏</view>
				</view>
				 <!-- style="display: none;" -->
				<view class="tool-lable" @click="$Router.push({name: 'Manage'})">
					<img class="tool-icon" src="@/static/imgs/userTool_03.png">
					<view class="tool-name">信息管理</view>
				</view>
				<view class="tool-lable" @click="$Router.push({name: 'Coupon'})">
					<img class="tool-icon" src="@/static/imgs/userTool_02.png">
					<view class="tool-name">优惠券</view>
				</view>
				<view class="tool-lable" @click="$Router.push({name: 'Setup'})">
					<img class="tool-icon" src="@/static/imgs/userTool_04.png">
					<view class="tool-name">其他功能</view>
				</view>
				<!-- <view class="tool-lable" @click="$Router.push({name: 'Modify'})">
					<img class="tool-icon" src="@/static/imgs/userTool_03.png">
					<view class="tool-name">修改密码</view>
				</view>
				<view class="tool-lable" @click="$Router.push({name: 'Modify'})">
					<img class="tool-icon" src="@/static/imgs/userTool_05.png">
					<view class="tool-name">基本信息</view>
				</view>
				<view class="tool-lable" @click="outLogin" v-if="userLogin">
					<img class="tool-icon" src="@/static/imgs/userTool_04.png">
					<view class="tool-name">退出登录</view>
				</view> -->
			</view>
		</view>
		<view class="tool" v-if="listArr.length > 0">
			<view class="tool-title">
				常识推荐
			</view>
			<view class="list-item" >
				<view class="list-item-label" v-for="(item, index) in listArr" :key="index" @click="$Router.push({name: 'indexDetails', params: {id: item.article_id}})" v-if="index<4">
					<view class="list-item-img">
						<!-- 5:6 -->
						<image :src="item.cover" mode="widthFix"></image>
					</view>
					<view class="list-item-cont">
						<view class="nowrap list-item-name">
							{{item.title}}
						</view>
						<view class="list-item-see">
							<image class="list-item-icon" src="@/static/imgs/indexSee.png"></image>{{item .clicks}} 游览
						</view>
						<view class="list-item-tips" v-for="(items, itemsIndex) in item.categories" :key="itemsIndex">
							{{items.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { articleList } from '@/apis/interfaces/index'
	import { userIndex } from '@/apis/interfaces/user'
	import { synthesisCount } from '@/apis/interfaces/synthesis'
	export default {
		data() {
			return {
	            userLogin    : '',     //登录状态
				userData	 : {},     //用户数据
				synthesisAll : '',     // 综法数量
				listArr	     : [],     // 文章列表
				page         : {},     // 分页信息
				lodingStats  : false,  // 加载状态
			};
		},
		
		onShow() {
		    if(this.$store.getters.getToken) {
		        this.userLogin = true
				
				// 获取用户信息
				this.userInfo();
				
				// 获取综法订单数据数量
				this.synthesisInfo();
		    }
			
			// 获取文章列表
			this.articleItem();
		},
		
		methods:{
			// 用户信息
			userInfo() {
			    userIndex().then(res => {
					this.userData = res
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 综法订单数据数量
			synthesisInfo() {
			    synthesisCount({channel: 'self'}).then(res => {
					this.synthesisAll = res
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 文章列表
			articleItem(page) {
			    articleList({
					category_id: 1,
					page       : page || 1
				}).then(res => {
					let list = this.listArr,
					    newData = []
					    if(page == 1 || page == undefined) list = []
					    newData = list.concat(res.data)
					this.listArr     = newData
					this.page        = res.page
					this.lodingStats = false
					uni.stopPullDownRefresh()
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userTop {
		position: relative;
		width: 100%;
		height: 620rpx;
		&.active {
			padding-top: 22%;
		}
		.userTop-back,
		.userTop-cont {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.userTop-cont {
			z-index: 2;
			padding: $padding;
			box-sizing: border-box;
			.userTop-height {
				height: 110rpx;
				.userTop-head {
					width: 110rpx;
					height: 110rpx;
					float: left;
					border-radius: 50%;
					overflow: hidden;
					background-color: #fdeff0;
					padding: 10rpx;
					box-sizing: border-box;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.userTop-text {
					width: calc(100% - 150rpx);
					float: left;
					margin-left: 30rpx;
					padding-top: $padding - 20;
					box-sizing: border-box;
					.userTop-login {
						line-height: 90rpx;
						font-weight: 600;
					}
					.userTop-name {
						display: flex;
						font-weight: 600;
						margin-bottom: 8rpx;
						.userTop-icon {
							width: 38rpx;
							height: 38rpx;
							margin: 3rpx 0 0 10rpx;
						}
					}
					.userTop-identity-tips {
						font-size: $title-size-sm - 4;
						display: inline-block;
						box-sizing: border-box;
						background-color: #fbe0e2;
						border-radius: $radius-m;
						padding: 0 10rpx;
						line-height: 34rpx;
						color: $mian-color;
						.userTop-arrow {
							width: 26rpx;
							height: 26rpx;
							vertical-align: -6rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
			.userTop-see {
				margin: $margin -15rpx;
				flex-wrap: wrap;
				justify-content: flex-start;
				.userTop-label {
					display: inline-block;
					background-color: #ffffff;
					border-radius: $radius-lg;
					margin: 10rpx;
					width: calc(50% - 20rpx);
					padding: $padding - 10 $padding - 10 $padding - 5;
					box-sizing: border-box;
					position: relative;
					overflow: hidden;
					.userSee-tips {
						font-size: $title-size-sm - 4;
						background-color: #fff6ea;
						color: $yellow-color;
						display: inline-block;
						padding: 0 15rpx;
						line-height: 40rpx;
						border-radius: $radius-m - 4;
					}
					.userSee-number {
						margin: 10rpx 0;
						font-weight: 600;
						text {
							font-weight: normal;
							font-size: $title-size-sm - 4;
							padding-left: 5rpx;
						}
					}
					&:nth-child(2) .userSee-tips, &:nth-child(3) .userSee-tips{
						background-color: #fff2f2;
						color: $mian-color;
					}
					.userSee-icon {
						width: 110rpx;
						height: 110rpx;
						position: absolute;
						right: -20rpx;
						bottom: -10rpx;
					}
					.userSee-new {
						position: absolute;
						top: -2rpx;
						right: 20rpx;
						font-size: $title-size-sm - 4;
						transform: scale(.9);
						background-color: $mian-color;
						color: #ffffff;
						padding: 0 10rpx;
						line-height: 36rpx;
					}
				}
			}
		}
	}
	
	// 看板
	.board {
		padding: $padding $padding $padding - 15;
		box-sizing: border-box;
		.board-title {
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.board-item {
			display: flex;
			margin: 0 -15rpx;
			.board-lable {
				width: calc(33.33% - 30rpx);
				box-shadow: 0 0 8rpx rgba(0, 0, 0, .05);
				padding: $padding - 10 $padding - 5 $padding + 10;
				box-sizing: border-box;
				overflow: hidden;
				border-radius: $radius-sm;
				position: relative;
				color: #969696;
				margin: 0 15rpx;
				&::after {
					position: absolute;
					content: '';
					right: 15rpx;
					top: 15rpx;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: transparent;
				}
				&.active::after {
					background-color: $mian-color;
				}
				.board-name {
					margin-bottom: 20rpx;
					font-size: $title-size-sm;
					&.active {
						color: #000000;
					}
				}
				.board-number {
					font-weight: 600;
					color: #000000;
					font-size: $title-size + 4;
					&.active {
						color: $mian-color;
					}
				}
				.board-icon {
					width: 74rpx;
					height: 74rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
		
	}
	
	// 工具
	.tool {
		padding: $padding $padding $padding - 15;
		box-sizing: border-box;
		.tool-title {
			font-weight: 600;
			margin-bottom: 20rpx;
			color: $text-color;
		}
		.tool-item {
			padding: $padding 0;
			border-radius: $radius-sm;
			display: flex;
			.tool-lable {
				flex: 4;
				text-align: center;
				font-size: 24rpx;
				.tool-icon {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 5rpx;
				}
			}
		}
	}
	
	// 常识推荐
	.list-item {
		margin-top: $margin;
		.list-item-label {
			margin-bottom: $margin;
			position: relative;
			.list-item-img {
				width: 200rpx;
				height: 150rpx;
				border:1px solid #d2d2d2;
				border-radius: $radius - 10;
				overflow: hidden;
				box-sizing: border-box;
				image {
					width: 100%;
					vertical-align:middle; 
				}
			}
			.list-item-cont {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				padding-left: 220rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				.list-item-name {
					color: $text-color;
					line-height: 44rpx;
					font-size: $title-size-m;
				}
				.list-item-see {
					font-size: $title-size-sm - 4;
					margin-top: 30rpx;
					display: flex;
					line-height: 30rpx;
					.list-item-icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
				.list-item-tips {
					font-size: $title-size-sm - 4;
					display: inline-block;
					color: #a1a1a1;
					padding-left: 40rpx;
				}
			}
		}
	}
</style>