<template>
	<view class="content">
		<view class="orderTab">
			<view class="orderTab-item" :class="{active : entrustId == item.entrust_id}" @click="tabClick(item.entrust_id, item.type.value)" v-for="(item, index) in entrustArr" :key="index">
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="module">
			<view class="entrustTop">
				<image class="entrustTop-img" :src="entrustData.cover" mode="widthFix"></image>
				<view class="entrustTop-btn" @click="seekClick">立即购买 ></view>
			</view>
			<view class="entrustCont">
				<block v-if="type == 0">
					<view class="entrustCivil">
						<view class="entrustCivil-top">
							<view class="entrustCivil-top-name">民事诉讼阶段：</view>
							<view class="entrustCivil-top-text">一审、二审、再审（注：劳动争议案件存在劳动仲裁阶段)</view>
						</view>
						<view class="entrustCivil-list" v-for="(item, index) in sonArr" :key="index">
							<view class="entrustCivil-list-title">
								<view class="entrustCivil-list-number">0{{index + 1}}</view>
								<view class="entrustCivil-list-name">{{item.text}}</view>
								<view class="entrustCivil-list-trim"></view>
							</view>
							<view class="entrustCivil-list-item">
								<view class="entrustCivil-list-label" v-for="(items, sonIndex) in item.children" :key="sonIndex">{{items.text}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="type == 1">
					<view class="entrustBrief">
						<view class="entrustBrief-title">
							<image class="entrustBrief-title-img" src="https://cdn.douhuofalv.com/images/2023/04/18/4d57907913a7d9ca5f3c7417421c894d.png" mode="aspectFill"></image>
							<view class="entrustBrief-title-name">{{entrustData.title}}</view>
						</view>
						<view class="entrustBrief-list">
							<view class="entrustBrief-list-item">
								<text>1</text><view class="entrustBrief-list-text">代理受害人（代写报案材料、提供法律咨询、代理刑事附带民事诉讼、代理提出法律意见、代理参加庭审活动、一审、二审）</view>
							</view>
							<view class="entrustBrief-list-item">
								<text>2</text><view class="entrustBrief-list-text">代理犯罪嫌疑人/被告人：（侦查阶段、审查起诉阶段、一审阶段、二审阶段、再审阶段）</view>
							</view>						</view>
						<image class="entrustBrief-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/5037800b0abd01d828890a2b6386c38a.png" mode="widthFix"></image>
					</view>
					<image class="entrustBrief-text" src="https://cdn.douhuofalv.com/images/2023/04/18/e0dbc0ce562b479b9ff3ad3820971612.png" mode="widthFix"></image>
				</block>
				<block v-else-if="type == 2">
					<view class="entrustPolitics">
						<view class="entrustPolitics-item">
							<view class="entrustPolitics-back">
								<view class="entrustPolitics-item-tips">stage</view>
								<view class="entrustPolitics-item-name">诉讼阶段</view>
								<view class="entrustPolitics-item-label">
									<view class="entrustPolitics-item-list">
										<text>1</text>一审
									</view>
									<view class="entrustPolitics-item-list">
										<text>2</text>二审
									</view>
									<view class="entrustPolitics-item-list">
										<text>3</text>再审
									</view>
								</view>
								<image class="entrustPolitics-item-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/f7804d7c91c2389dd62ce10c19e26bec.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="entrustPolitics-item">
							<view class="entrustPolitics-back">
								<view class="entrustPolitics-item-tips">type</view>
								<view class="entrustPolitics-item-name">常见类型</view>
								<view class="entrustPolitics-item-label">
									<view class="entrustPolitics-item-list">
										<text>1</text>强制拆迁
									</view>
									<view class="entrustPolitics-item-list">
										<text>2</text>行政不作为
									</view>
									<view class="entrustPolitics-item-list">
										<text>3</text>征收补偿  等
									</view>
								</view>
								<image class="entrustPolitics-item-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/f7804d7c91c2389dd62ce10c19e26bec.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
			<image class="entrustBottom" src="https://cdn.douhuofalv.com/images/2023/04/18/f08e45875d7dba6c3116690978a8a999.png" mode="widthFix"></image>
		</view>
		
		<!-- 关注公众号 -->
		<view class="tipsBack" v-if="generalShow"></view>
		<view class="tipsCont" v-if="generalShow">
			<view class="tipsWhite">
				<image class="tipsCont-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/6b1485847b45273618f8d922ceee889c.png" mode="widthFix"></image>
				<view class="tipsWhite-top">
					<view class="tipsWhite-name">
						请您先关注抖火法律咨询公众号
					</view>
					<view class="tipsWhite-text">
						关注后，可立即下单
					</view>
				</view>
				<view class="tipsWhite-btn">
					<view class="tipsWhite-btn-go" @click="generalShow = false">
						稍后关注
					</view>
					<view class="tipsWhite-btn-go" @click="judgeGeneral">
						马上关注
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { judgeReal } from '@/apis/interfaces/user'
	import { authFollow } from '@/apis/interfaces/index'
	import { entrustList, entrustInfo, entrustSon } from '@/apis/interfaces/synthesis'
	export default {
		data() {
			return {
				type	   : '',
				entrustId  : '',
				sonArr	   : [],  // 民事子分类
				entrustData: '',  // 案件委托详情
				entrustArr : [],  // 案件委托列表
				generalShow : false // 公众号
			}
		},
		
		created() {
			// 获取-案件委托-列表
			this.yearServe();
		},
		
		methods: {
			// 案件委托-列表
			yearServe(){
				entrustList().then(res => {
					this.entrustArr = res
					if(this.entrustId == '') {
						this.entrustId = res[0].entrust_id
						this.type      = res[0].type.value
					}
					
					// 获取-案件委托-详情
					this.yearInfo();
					if(this.type == 0) {
						// 获取-案件委托子分类
						this.yearSon();
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 案件委托-详情
			yearInfo(){
				entrustInfo(this.entrustId).then(res => {
					this.entrustData = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 获取-案件委托子分类
			yearSon(){
				entrustSon({parent_id: this.entrustId}).then(res => {
					this.sonArr = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 顶级
			tabClick(id, type) {
				this.entrustId = id
				this.type     = type
				if(type == 0) {
					// 获取-案件委托子分类
					this.yearSon();
				}
				
				// 获取-案件委托-详情
				this.yearInfo();
			},
			
			
			// 立即咨询
			seekClick() {
				// 判断是否认证
				judgeReal().then(res => {
					if(res.has_sign) {
						if(!res.has_subscribe) {
							// 弹出公众号
							this.generalShow = true
						} else {
							if(this.type == 0) {
								this.$Router.push({name: 'EntrustCivil', params: {entrustId: this.entrustId}})
								return
							}
							this.$Router.push({name: 'EntrustWrite', params: {entrustId: this.entrustId}})
						}
						return
					}
					// 跳到认证页面
					this.$Router.replace({name: 'sheetIdcard'})
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
				
			},
			
			// 状态
			judgeGeneral(){
				// 获取微信授权信息
				authFollow({
					url: 'https://web.douhuofalv.com/webview/webCode'
				    // url: 'https://web.douhuotest.douhuofalv.com/webview/webCode'
				}).then(res => {
				    window.location.href = res
				}).catch(err => {
				    uni.showToast({
				        title: err.message,
				        icon: "none"
				    })
				})
				
				// 关闭公众号
				this.generalShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #171c54;
	}
	
	.orderTab {
		position: fixed;
		top: 44px;
		left: 0;
		width: 100%;
		z-index: 9;
		height: 100rpx;
		background-color: white;
		display: flex;
		.orderTab-item {
			flex: 3;
			text-align: center;
			margin-top: 20rpx;
			text {
				display: inline-block;
				color: #000000;
				background-image: linear-gradient(to right, #ffffff, #ffffff);
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 80rpx;
				padding: 0 30rpx;
			}
			&.active text {
				color: #ffffff;
				background-image: linear-gradient(to right, #f8a53d, #dd3554);
			}
		}
	}
	
	.module {
		padding-top: 100rpx;
	}
	
	.entrustCont {
		background-color: #171c54;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		width: 100%;
		.entrustCivil {
			.entrustCivil-top {
				background-color: #111f6e;
				border-radius: 15rpx;
				padding: 30rpx 10rpx;
				box-sizing: border-box;
				color: #ffebbf;
				text-align: center;
				.entrustCivil-top-name {
					margin-bottom: 10rpx;
					font-size: 34rpx;
				}
				.entrustCivil-top-text {
					font-size: 26rpx;
				}
			}
			.entrustCivil-list {
				margin-top: 30rpx;
				color: #ffffff;
				.entrustCivil-list-title {
					font-size: 36rpx;
					margin-bottom: 40rpx;
					.entrustCivil-list-trim {
						position: relative;
						left: 290rpx;
						bottom: 20rpx;
						background-color: #2f3aae;
						width: 35%;
						height: 4rpx;
						padding-left: 40rpx;
						box-sizing: border-box;
						&::after {
							position: absolute;
							content: '';
							left: -50rpx;
							top: -10rpx;
							width: 20rpx;
							height: 20rpx;
							transform:rotate(45deg);
							background-color: #2f3aae;
						}
					}
					.entrustCivil-list-number {
						font-weight: 600;
						font-size: 68rpx;
						background-image: -webkit-linear-gradient(top,#ffffff 40%, transparent 70%);
						-webkit-background-clip:text; 
						-webkit-text-fill-color:transparent;
						text-transform: uppercase;
					}
					.entrustCivil-list-name {
						margin-top: -20rpx;
						width: 280rpx;
					}
				}
				.entrustCivil-list-item {
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					margin: 0 -20rpx;
					.entrustCivil-list-label {
						text-align: center;
						flex: 1;
						min-width: calc((100% - 64rpx) / 2);
						margin: 0 15rpx 30rpx;
						background-image: linear-gradient(to right, #3653cf, #1922a0);
						border-radius: 10rpx;
						line-height: 84rpx;
						font-size: 26rpx;
					}
				}
			}
		}
		.entrustPolitics {
			margin-bottom: 40rpx;
			display: flex;
			.entrustPolitics-item {
				flex: 2;
				margin: 0 15rpx;
				background-color: #0e1e58;
				border-radius: 40rpx 15rpx 15rpx 15rpx;
				padding: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				.entrustPolitics-back {
					padding: 30rpx 30rpx 80rpx;
					box-sizing: border-box;
					overflow: hidden;
					border-radius: 40rpx 15rpx 15rpx 15rpx;
					background-color: #002087;
					position: relative;
					.entrustPolitics-item-logo {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 120rpx;
					}
					.entrustPolitics-item-name {
						background-image: -webkit-linear-gradient(top,#fdf7ce, #e29c68);
						-webkit-background-clip:text; 
						-webkit-text-fill-color:transparent;
						font-weight: 600;
						font-size: 36rpx;
						margin-bottom: 30rpx;
					}
					.entrustPolitics-item-tips {
						font-size: 38rpx;
						font-weight: 600;
						background-image: -webkit-linear-gradient(top,#8090c3, transparent 85%);
						-webkit-background-clip:text; 
						-webkit-text-fill-color:transparent;
						text-transform: uppercase;
					}
					.entrustPolitics-item-label {
						color: #ffffff;
						font-size: 28rpx;
						line-height: 80rpx;
						.entrustPolitics-item-list {
							display: flex;
							text {
								font-size: 22rpx;
								display: block;
								width: 28rpx;
								height: 28rpx;
								line-height: 28rpx;
								border: 2rpx solid #ffffff;
								text-align: center;
								border-radius: 50%;
								margin-right: 20rpx;
								margin-top: 26rpx;
							}
						}
					}
				}
			}
		}
		.entrustBrief {
			background-color: #09216e;
			border-radius: 20rpx;
			padding: 0 30rpx 30rpx;
			box-sizing: border-box;
			color: #ffffff;
			position: relative;
			.entrustBrief-title {
				position: relative;
				width: 100%;
				text-align: center;
				.entrustBrief-title-img,
				.entrustBrief-title-name {
					position: absolute;
					top: -16rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
				.entrustBrief-title-img {
					width: 400rpx;
					left: calc(50% - 200rpx);
					display: block;
				}
				.entrustBrief-title-name {
					width: 100%;
					z-index: 9;
					left: 0;
					font-weight: 600;
				}
			}
			.entrustBrief-list {
				padding: 90rpx 10rpx 20rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				.entrustBrief-list-item {
					margin-bottom: 30rpx;
					display: flex;
					text {
						font-size: 22rpx;
						display: block;
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						border: 2rpx solid #ffffff;
						text-align: center;
						border-radius: 50%;
						margin-right: 20rpx;
						margin-top: 10rpx;
					}
					.entrustBrief-list-text {
						width: calc(100% - 48rpx);
						text-align: justify;
					}
				}
			}
			.entrustBrief-logo {
				position: absolute;
				bottom: -30rpx;
				right: 30rpx;
				width: 240rpx;
				z-index: 5;
			}
		}
		.entrustBrief-text {
			width: 100%;
			margin-top: 60rpx;
		}
	}
	
	.entrustTop {
		position: relative;
		width: 100%;
		padding-top: 60%;
		.entrustTop-img,.entrustTop-btn {
			position: absolute;
			left: 0;
		}
		.entrustTop-img {
			width: 100%;
			height: 100%;
			top: 0;
		}
		.entrustTop-btn {
			z-index: 4;
			bottom: 15%;
			left: 45rpx;
			background-image: -webkit-linear-gradient(40deg,#f1c593, #fef9f2);
			color: #12053d;
			display: inline-block;
			line-height: 74rpx;
			padding: 0 40rpx;
			font-size: 34rpx;
			border-radius: 10rpx;
		}
	}
	
	.entrustBottom {
		width: 100%;
	}
	
	// 关注
	.tipsBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, .8);
	}
	.tipsCont {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 10%;
		box-sizing: border-box;
	}
	
	.tipsWhite {
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.tipsWhite-top {
		padding: $padding;
		box-sizing: border-box;
		text-align: center;
	}
	
	.tipsCont-img {
		width: 100%;
	}
	
	.tipsWhite-name {
		text-align: center;
		color: #111111;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
	}
	
	.tipsWhite-text {
		font-size: 30rpx;
		color: #666666;
		line-height: 48rpx;
	}
	
	.tipsWhite-btn {
		display: flex;
		padding: $padding 10rpx;
		box-sizing: border-box;
		.tipsWhite-btn-go {
			flex: 2;
			color: #fff;
			margin: 0 15rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #F6F6F6;
			background-color: #007df5;
			border-radius: $radius-m;
			&:first-child {
				color: #333333;
				background-color: #ffffff;
				border: 2rpx solid #cccccc;
			}
		}
	}
</style>