<template>
	<view class="">
		<!-- <view class="tabs">
      <view class="left">
        <view class="item" :class="changeType==0?'active':''" @click="changeType=0">合同列表</view>
        <view class="item" :class="changeType==1?'active':''" @click="changeType=1">已签订合同</view>
      </view>
      <view class="right">
        <text>新增</text>
      </view>
    </view> -->
		<view class="contract_list">
			<view class="item">
				<view class="personnel_list">
					<view class="cards"  v-for="(item,index) in list" :key="item.id" @click="navTo('/subpkg/contractDetail/contractDetail?id='+item.id)">
						<view class="cards_head">
							<text style="font-size: 32rpx">电子合同</text>
						</view>
						<view class="cards_content">
							<view class="right">
								<view class="">
									<text>甲方 :</text>
									<text v-if="item.party_a_info"> {{item.party_a_info.company_name}}</text>
								</view>
								<view class="">
									<text>乙方 :</text>
									<text v-if="item.party_b_info">{{item.party_b_info.company_name}}</text>
									<text
										v-else-if="item.party_b==$store.state.app.userInfo.id">{{$store.state.app.userInfo.nickname}}</text>
								</view>
								<view class="">
									<text>合同类型 :</text>
									<text> {{item.contract_type_name}} </text>
								</view>
								<view class="">
									<text>合同编号 :</text>
									<text> {{item.contract_no}} </text>
								</view>
							</view>


						</view>

						<view class="hr">
						</view>


						<view class="contract_box">

							<view class="left">
								<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
								<view class="text">
									<view class="name">{{item.contract_type_name||'合同'}}</view>
									<view>
										<text>{{item.update_time}}</text>
									</view>
								</view>
							</view>
							<view class="right" @click.stop="navToContract(item.contract_no)">
								<uni-icons type="paperclip" color="#0022C7"></uni-icons>
								<view>查看</view>
							</view>


						</view>







					</view>
				</view>

				<!-- 
				<view class="top">
					<image src="../../static/img/contract/pdf.png" style="height: 140rpx; width: 140rpx;"></image>
					<view class="text">
						<view class="name">
							<view class="title">
								<text v-if="item.company">{{item.company.company_name}}</text>
							</view>
						</view>
						<view class="date">

							<view class="number">
								<view class="num_left">合同编号:</view>
								<text>{{item.contract_no}}</text>
							</view>
							<view class="number">
								<view class="num_left">合同类型:</view>
								<view>{{item.company.contract_type_name}}</view>
							</view>
							<view class="time">
								<view class="num_left">修改时间:</view>
								<view>{{item.update_time}}</view>
							</view>
						</view>
					</view>
				</view>
				<u-line color="#999999FF"></u-line>
				<view class="bottom">
					<view class="left" v-if="item.status">已签订</view>
					<view class="left yellow" v-else-if="item.check_status>=2">签订中</view>
					<view class="left red" v-else>未签订</view>
					<button class="right"
						@click="navTo('/subpkg/contractDetail/contractDetail?id='+item.id)">详情</button>
				</view>

 -->



			</view>
		</view>
		<u-empty v-if="loadConfig.status=='nomore'&& list.length==0" text="暂无合同"
			icon="/static/img/empty/data.png"></u-empty>
		<u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
			:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
	</view>
</template>

<script>
	import {
		contractList
	} from "@/api/contract.js"
	import {
		download_file
	} from "@/api/junziqian.js"
	export default {
		data() {
			return {
				changeType: 0,
				list: [],
				loadConfig: {
					page: 1,
					limit: 15,
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '我也是有底线的~~',
					status: 'loadmore'
				},
			}
		},
		onLoad() {},
		onShow() {
			this.initLoadConfig();
		},
		methods: {
			navTo(url) {
				if(url){
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
          	url: url,
            success() {
              uni.hideLoading()
            }
          })
        }else Toast('暂未开放')
			},
			navToContract (contract_no) {
			  download_file({
			    applyNo: contract_no
			  }).then(res => {
			    if (res.code != 1) {
			      Toast(res.msg||'合同未签订')
			    }
			    uni.navigateTo({
			      url: `/subpkg/pdfView/pdfView?url=${res.data.url}`
			    })
			  })
			},
			initLoadConfig() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.list = [];
				this.initContractList();
				uni.stopPullDownRefresh();
			},
			async initContractList() {
				try {
					if (this.loadConfig.status == "nomore") return;
					this.loadConfig.status = "loading"
					let res = await contractList({
						page: this.loadConfig.page,
						limit: this.loadConfig.limit
					})
					this.loadConfig.status = "loadmore"
					if (res.data.data.length < this.loadConfig.limit) {
						this.loadConfig.status = "nomore"
					} else {
						this.loadConfig.page++;
					}
					this.list = [...this.list, ...res.data?.data]
				} catch (e) {
					this.initLoadConfig();
					this.loadConfig.status = "nomore"
				}
			}
		},
		onPullDownRefresh() {
			this.initLoadConfig();
		}
	}
</script>

<style lang="scss">
	.tabs {
		height: 112rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;

		.left {
			display: flex;

			.item {
				margin-right: 52.5rpx;
				width: 175rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				background-color: #F3F4F8FF;
				border-radius: 35rpx 35rpx 35rpx 35rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}

			.active {
				background-color: #3274F9FF;
				color: #FFFFFFFF;
			}
		}

		.right {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 0rpx;
		}
	}

	.personnel_list {
		padding: 28rpx 0;
		// margin-bottom: 130rpx;

		.cards {
			margin: 0 auto;
			margin-bottom: 28rpx;
			width: 694rpx;
			background: #ffffff;
			border-radius: 30rpx;
			opacity: 1;
			overflow: hidden;
			// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

			.cards_head {
				padding: 28rpx;
				background-color: $theme-oa-color;
				color: white;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
			}

			.cards_content {
				padding: 28rpx;
				display: flex;
				justify-content: space-between;

				.left {
					text-align: center;
					// padding: 15rpx 25rpx;
					padding-top: 20rpx;

					width: 160rpx;
					background-color: $theme-oa-color;
					color: white;
					border-radius: 40rpx;

					.cir {
						width: 120rpx;
						height: 120rpx;
						background-color: #ffffff;
						margin-left: 25rpx;
						border-radius: 120rpx;
						position: relative;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view {
						margin-bottom: 10rpx;

						text:nth-child(2) {
							margin-left: 20rpx;
						}
					}
				}
			}

			.hr {
				border-top: 1px dashed #0022C7;
				margin-bottom: 30rpx;
			}

			.contract_box {
				padding: 0 28rpx 20rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					.contract_img {
						width: 102rpx;
						height: 102rpx;
						background: #F5F5F5;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						margin-right: 21rpx;
					}

					.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 32rpx;
							;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.8);
							line-height: 35rpx;
						}

						.nickname {
							margin-right: 35rpx;
						}

						text {
							height: 39rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #666666;
							line-height: 35rpx;
						}
					}
				}

				.right {
					font-size: 28rpx;
					font-weight: 500;
					color: #3274F9;
					line-height: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 35rpx;
						height: 39rpx;
						background-color: #3274F9;
						opacity: 1;
						margin-right: 10rpx
					}
				}

			}


		}
	}

	// .contract_list {
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	padding: 28rpx;

	// 	.item {
	// 		width: 694rpx;
	// 		min-height: 263rpx;
	// 		padding: 28rpx;
	// 		margin-bottom: 28rpx;
	// 		background: #FFFFFF;
	// 		border-radius: 14rpx 14rpx 14rpx 14rpx;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-between;

	// 		.top {
	// 			display: flex;
	// 			margin-bottom: 28rpx;

	// 			image {
	// 				width: 87.6rpx;
	// 				height: 87.6rpx;
	// 				margin-right: 28rpx;
	// 				flex-shrink: 0;
	// 			}

	// 			.text {
	// 				display: flex;
	// 				flex-direction: column;
	// 				justify-content: space-between;

	// 				.name {
	// 					.title {
	// 						font-size: 32rpx;
	// 						font-weight: 400;
	// 						color: #333333;
	// 						margin-right: 17.5rpx;
	// 					}
	// 				}

	// 				.date {
	// 					font-size: 25rpx;
	// 					font-weight: 400;
	// 					color: #F9AA32;
	// 					line-height: 36rpx;

	// 					.number,
	// 					.time {
	// 						display: flex;
	// 						justify-content: left;
	// 						flex-wrap: wrap;

	// 						.num_left {
	// 							margin-right: 18rpx;
	// 						}
	// 					}

	// 					.time {
	// 						color: #CCCCCCFF;
	// 						margin-right: 10rpx;
	// 					}
	// 				}
	// 			}

	// 		}

	// 		.bottom {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			margin-top: 28rpx;

	// 			.left {
	// 				font-size: 28rpx;
	// 				font-weight: 400;
	// 				color: #34A853;
	// 			}

	// 			.yellow {
	// 				color: #F9AA32;
	// 			}

	// 			.red {
	// 				color: #F02828FF;
	// 			}

	// 			.right {
	// 				width: 158rpx;
	// 				// height: 53rpx;
	// 				// border-radius: 26rpx 26rpx 26rpx 26rpx;
	// 				// border: 2rpx solid #3274F9;
	// 				// display: flex;
	// 				// justify-content: center;
	// 				// align-items: center;
	// 				text-align: right;
	// 				background: #FFFFFF;
	// 				opacity: 1;
	// 				font-size: 28rpx;
	// 				font-weight: 400;
	// 				color: #3274F9;
	// 			}
	// 		}
	// 	}

	// }
</style>