<template>
	<view class="personnel">
		<view class="personnel_list">

			<!-- 
			<block v-for="(item, index) in userList" :key="item.id">
				<view class="personnel_item">
					<view class="type" :class="item.is_contract?'type_blue':''">
						<image v-if="item.is_contract" src="../../static/icons/ok_w.png"></image>
						<image v-else src="../../static/icons/err_w.png"></image>
					</view>
					<view class="top" style="margin-bottom: 28rpx;">
						<view class="left">
							<u--image class="u_avatar" :showLoading="true"
								:src="item.avatar||'../../static/img/public/man.png'" width="112.28rpx"
								height="112.28rpx" shape="circle"></u--image>
						</view>
						<view class="right">
							<view class="info_top">
								<view class="info_name">{{item.nickname}}</view>
								<text class="phone">电话:</text>
								<text class="tel">{{item.phone||item.account}}</text>
							</view>
							<view class="info_bottom">
								<text class="item phone">
									分管片区:
								</text>
								<view class="item">
									<view class="location">
										{{ (item.street_name||'')+(item.village_name||'')+(item.brigade_name||'') }}
									</view>
								</view>
							</view>
							<view class="info_bottom">
								<text class="item phone">
									所属公司:
								</text>
								<view class="item" v-if="item.company">
									<view class="location">
										{{item.company.company_name}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<u-line color="#999999FF"></u-line>
					<view class="bottom" style="margin-top: 28rpx;float: right;">
						<button class="look sign" v-if="item.is_contract==1" @click="changeSign(item)">已签约</button>
						<button class="look red" v-else @click="changeSign(item)">未签约</button>
						<button class="look" @click="navTo('/subpkg/finance/finance?id='+item.id)">财务查看</button>
						<button class="look"
							@click="navTo('/subpkg/personnelDetails/personnelDetails?id='+item.id)">信息查看</button>
					</view>
				</view>
			</block>
 -->
			<view class="personnel_list">
				<view class="card" v-for="(item, index) in userList" :key="item.id">
					<view class="card_head">
						<text>创建时间: {{creTime(item.create_time)}}
						</text>
						<text @click="navTo('/subpkg/finance/finance?id='+item.id)">财务查看</text>
						<text @click="navTo('/subpkg/personnelDetails/personnelDetails?id='+item.id)">信息查看</text>
					</view>
					<view class="card_content">
						<view class="left">
							<view class="cir">
								<u--image class="u_avatar" :showLoading="true"
									:src="item.avatar||'../../static/img/public/man.png'" width="112.28rpx"
									height="112.28rpx" shape="circle"></u--image>
							</view>

							<view style="margin-top: 40rpx;" @click="changeSign(item)">
								<u-icon style="display: inline-block;" color="white" name="edit-pen-fill"></u-icon>
								{{item.is_contract?'已签约':'未签约'}}
							</view>
						</view>
						<view class="right">
							<view class="">
								<text>公司名称 :</text>
								<text> {{item.company.company_name}}</text>
							</view>
							<view class="">
								<text>人员姓名 :</text>
								<text>{{item.nickname}}</text>
							</view>
							<view class="">
								<text>联系电话 :</text>
								<text>{{item.phone}}</text>
							</view>
							<view class="">
								<text>负责区域 :</text>
								<text> {{ (item.street_name||'')+(item.village_name||'')+(item.brigade_name||'') }}
								</text>
							</view>
						</view>



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


			<u-empty v-if="loadConfig.status=='nomore'&& userList.length==0"
				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>
		<!-- <button class="new_btn" @click.stop="navTo('/subpkg/newPersonnel/newPersonnel')">创建账号</button> -->
		<mybtn
			v-if="$store.state.app.userInfo.company && ($store.state.app.userInfo.company.company_type==18||$store.state.app.userInfo.company.company_type==16)"
			text="创建账号" @click="navTo('/subpkg/newPersonnel/newPersonnel')"></mybtn>
	</view>
</template>

<script>
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		companyUser
	} from "@/api/company.js"
	export default {
		data() {
			return {
				loadConfig: {
					page: 1,
					limit: 15,
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '我也是有底线的~~',
					status: 'loadmore'
				},
				userList: []
			}
		},
		onLoad() {
			this.loadUserList();
			uni.$on('initPersonnel', this.initLoad);
		},

		methods: {
			creTime(a) {
				return a.toString().substring(0, 10)
				// return a.substring(0, 10)
				// console.log(a.substring(0, 10))
			},
			navTo(url) {
				if (url) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.navigateTo({
						url: url,
						success() {
							uni.hideLoading()
						}
					})
				} else Toast('暂未开放')
			},
			async initLoad() {
				this.loadConfig.page = 1;
				this.loadConfig.status = "loadmore";
				this.userList = [];
				await this.loadUserList();
				uni.stopPullDownRefresh();
			},
			async loadUserList() {
				let that = this;
				if (this.loadConfig.status == "nomore") return;
				this.loadConfig.status = "loading"
				let res = await companyUser({
					page: this.loadConfig.page,
					limit: this.loadConfig.limit,
					company_id: this.$store.state.app.userInfo.company_id
				})
				this.loadConfig.status = "loadmore"
				if (res.data.data.length < this.loadConfig.limit) {
					this.loadConfig.status = "nomore"
				} else {
					this.loadConfig.page++;
				}
				this.userList = [...this.userList, ...res.data?.data]
			},
			// 点击已签约或未签约按钮
			changeSign(data) {
				if (data.is_contract) Toast('已完成签约');
				else uni.showModal({
					content: '该人员还未签约,是否立即签约?',
					success: (e) => {
						if (e.confirm) this.navTo('/subpkg/personnelDetails/personnelDetails?id=' + data.id);
					}
				})
			}
		},
		onPullDownRefresh() {
			this.initLoad();
		}
	}
</script>

<style lang="scss">
	.personnel {
		padding: 28rpx 0;
		padding-bottom: 160rpx;

		.new_btn {
			position: fixed;
			bottom: 30rpx;
			// margin-top: 32rpx;
			// margin-bottom: 40rpx;
			left: 50%;
			transform: translate(-50%);
			z-index: 999;
			width: 694rpx;
			height: 84rpx;
			background: $theme-oa-color;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}

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

			.card {
				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);

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

				}

				.card_content {
					padding: 28rpx;
					display: flex;

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

						margin-right: 50rpx;
						// width: 180rpx;
						background-color: $theme-oa-color;
						color: white;
						border-radius: 40rpx;

						.cir {
							width: 120rpx;
							height: 120rpx;
							background-color: #FFFFFF;
							// margin-left: 25rpx;
							padding: 0 25rpx;
							border-radius: 120rpx;
							position: relative;


						}

					}


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

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


				.u_avatar {
					position: absolute;
					top: 50%;
					left: 50%;

					transform: translate(-50%, -50%);
				}



			}




		}

		// .personnel_list {
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
		// 	padding-top: 32rpx;
		// 	padding-bottom: 130rpx;

		// 	.personnel_item {
		// 		width: 694rpx;
		// 		// height: 407rpx;
		// 		background: #FFFFFF;
		// 		border-radius: 14rpx 14rpx 14rpx 14rpx;
		// 		margin-bottom: 32rpx;
		// 		overflow: hidden;
		// 		position: relative;
		// 		padding: 28rpx;

		// 		.type {
		// 			width: 50rpx;
		// 			height: 50rpx;
		// 			background-color: #F02828;
		// 			border-radius: 50%;
		// 			font-size: 25rpx;
		// 			font-weight: 400;
		// 			color: #FFFFFF;
		// 			line-height: 35rpx;
		// 			display: flex;
		// 			justify-content: center;
		// 			align-items: center;
		// 			position: absolute;
		// 			top: 28rpx;
		// 			right: 28rpx;

		// 			image {
		// 				width: 18rpx;
		// 				height: 18rpx;
		// 				margin-right: 1rpx;
		// 			}
		// 		}

		// 		.type_blue {
		// 			background-color: #34A853;
		// 		}

		// 		.top {
		// 			// background-color: #3274F9;
		// 			display: flex;

		// 			.right {
		// 				display: flex;
		// 				flex-direction: column;
		// 				justify-content: space-around;
		// 				margin-left: 28rpx;
		// 				font-size: 25rpx;
		// 				font-weight: 400;
		// 				overflow: hidden;
		// 				color: #999999;

		// 				.info_top {
		// 					display: flex;
		// 					align-items: flex-end;
		// 					font-size: 25rpx;
		// 					font-weight: 400;
		// 					color: $theme-oa-color;
		// 					margin-bottom: 10rpx;

		// 					.info_name {
		// 						font-size: 32rpx;
		// 						font-weight: 400;
		// 						color: #333333;
		// 						margin-right: 18rpx;
		// 					}

		// 					.phone {
		// 						margin-left: 30rpx;
		// 						color: #999999;
		// 					}

		// 					.tel {
		// 						color: #000;
		// 					}
		// 				}

		// 				.info_bottom {
		// 					display: flex;
		// 					margin-bottom: 8rpx;

		// 					.item {
		// 						display: flex;
		// 						align-items: flex-start;
		// 					}

		// 					.phone {
		// 						margin-right: 28rpx;
		// 					}

		// 					.location {
		// 						width: 350rpx;
		// 						// white-space: nowrap;
		// 						// /* 不换行 */
		// 						// overflow: hidden;
		// 						// /* 将超出文本隐藏 */
		// 						// text-overflow: ellipsis;
		// 						// /* 使用省略号表示被隐藏的文本 */
		// 						color: #000;
		// 					}
		// 				}

		// 				.company {
		// 					display: flex;

		// 					text {
		// 						margin-right: 30rpx;
		// 					}

		// 					.itm {
		// 						width: 350rpx;
		// 						white-space: nowrap;
		// 						/* 不换行 */
		// 						overflow: hidden;
		// 						/* 将超出文本隐藏 */
		// 						text-overflow: ellipsis;
		// 						/* 使用省略号表示被隐藏的文本 */
		// 						color: #000;
		// 					}
		// 				}
		// 			}
		// 		}

		// 		.center {
		// 			padding: 28rpx 0;

		// 			.top {
		// 				font-size: 28rpx;
		// 				font-weight: 400;
		// 				color: #666666FF;
		// 				margin-bottom: 20rpx;

		// 				.green {
		// 					color: #34A853FF;
		// 				}

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

		// 			.bottom {
		// 				display: flex;
		// 				justify-content: space-around;
		// 				font-size: 25rpx;
		// 				font-weight: 400;
		// 				color: #999999;

		// 				image {
		// 					width: 18rpx;
		// 					height: 18rpx;
		// 					margin-right: 9rpx;
		// 				}
		// 			}
		// 		}

		// 		.bottom {
		// 			display: flex;
		// 			justify-content: center;

		// 			.look {
		// 				width: 128rpx;
		// 				height: 43rpx;
		// 				background: #FFFFFF;
		// 				border-radius: 26rpx 26rpx 26rpx 26rpx;
		// 				opacity: 1;
		// 				// border: 2rpx solid $theme-oa-color;
		// 				font-size: 28rpx;
		// 				font-weight: 400;
		// 				margin-left: 28rpx;
		// 				color: $theme-oa-color;
		// 				display: flex;
		// 				justify-content: center;
		// 				align-items: center;
		// 			}

		// 			.sign {
		// 				color: #34A853;
		// 				// border: 2rpx solid #34A853;		
		// 			}

		// 			.red {
		// 				color: #F02828;
		// 				// border: 2rpx solid #F02828;		
		// 			}
		// 		}
		// 	}
		// }



	}
</style>