<template>
	<view class="content">
		<view class="orderTab">
			<view class="orderTab-item" :class="{active : entrustId == item.entrust_id}" @click="tabClick(item.entrust_id, item.title)" 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="title == '民事诉讼'">
					<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="title == '刑事辩护'">
					<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="title == '行政诉讼'">
					<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>
</template>

<script>
	import { entrustList, entrustInfo, entrustSon } from '@/apis/interfaces/synthesis'
	export default {
		data() {
			return {
				title	   : '',
				entrustId  : '',
				sonArr	   : [],  // 民事子分类
				entrustData: '',  // 案件委托详情
				entrustArr : [],  // 案件委托列表
			}
		},
		
		created() {
			// 获取-案件委托-列表
			this.yearServe();
		},
		
		methods: {
			// 案件委托-列表
			yearServe(){
				entrustList().then(res => {
					this.entrustArr = res
					if(this.entrustId == '') {
						this.entrustId = res[0].entrust_id
						this.title     = res[0].title
					}
					
					// 获取-案件委托-详情
					this.yearInfo();
					if(this.title == '民事诉讼') {
						// 获取-案件委托子分类
						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, title) {
				this.entrustId = id
				this.title     = title
				if(title == '民事诉讼') {
					// 获取-案件委托子分类
					this.yearSon();
				}
				
				// 获取-案件委托-详情
				this.yearInfo();
			},
			
			// 立即咨询
			seekClick() {
				if(this.title == '民事诉讼') {
					this.$Router.push({name: 'EntrustCivil', params: {entrustId: this.entrustId}})
					return
				}
				this.$Router.push({name: 'EntrustWrite', params: {entrustId: this.entrustId}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #171c54;
	}
	
	.orderTab {
		position: fixed;
		top: 0;
		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: #000p;
				background-image: white;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 80rpx;
				padding: 0 30rpx;
			}
			&.active text {
				color: #ffffff;
				background-color: $main-color;
			}
		}
	}
	
	.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%;
	}
</style>