<template>
	<div class="g_pb_32">
		<div v-for="(item, index) in applyList">
			<div class="g_pb_8 g_pt_16 g_pl_16 g_border_e_b g_c_9" v-if="item.length > 0">
				{{ index == "near" ? "近三天" : "三天前" }}
			</div>
			<div class="g_flex_row_between flex_center i-items" style="padding: 20px 16px 8px" v-for="i in item" :key="item.id">
				<div class="g_mr_12">
					<img class="g_w_48 g_h_48 g_radius_50" :src="i.imgSrc || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/APP/default.svg'" alt="" />
				</div>
				<div class="g_flex_row_between flex_center g_flex_1 g_h_48">
					<div>
						<div class="g_fs_18">
							{{ i.applyUsername }}
						</div>
						<div class="g_fs_14 g_c_9 g_mt_4">
							{{ i.userName }}
						</div>
					</div>
					<div>
						<span v-if="i.past && i.status === 0" class="g_fs_14 g_c_9">已过期</span>
						<span v-else-if="i.status == 1" class="g_fs_14 g_c_9">已通过</span>
						<span v-else-if="i.status == 2" class="g_fs_14 g_c_9">已拒绝</span>
						<!-- v-else -->
						<div class="g_flex_row_end" v-else>
							<div class="g_mr_8">
								<rh-button primaryColor="#00b666" btnText="拒绝" fontSize="14" color="#000" customBgColor="#d8d8d8" size="height" type="disabled" height="24" width="50" @clickBtn="approve(i, 'reject')"></rh-button>
							</div>
							<div>
								<rh-button primaryColor="#00b666" btnText="通过" type="primary" fontSize="14" size="height" height="24" width="50" @clickBtn="approve(i, 'resolve')"></rh-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<u-modal v-model="showUserSelect" width="90%" negativeTop="150" :showTitle="false" :confirmStyle="{ color: '#576b95', 'font-weight': 600 }" :cancelStyle="{ color: '#000', 'font-weight': 600 }" :showCancelButton="true" @confirm="uploadUserInfo">
			<view class="">
				<view class="menu-obj g_p_14 g_border_e_b" @click="showPicker('department')">
					<view class="g_flex_row_start flex_center">
						<view class="g_mr_8"> 部门: </view>
						<view class="g_flex_row_between flex_center g_flex_1">
							<view style="max-width: calc(100%); overflow-x: auto; min-height: 26px; row-gap: 4px" v-if="teamList.length > 0" class="g_flex_row_start flex_center g_flex_1">
								<view class="menu-btn menu-active" v-for="item in teamList">
									<view class="btn g_radius_4 g_pl_8 g_pr_8 g_fs_12">{{ item.teamName }}</view>
								</view>
							</view>
							<view class="menu-btn g_text_s">
								<view class="g_c_9" v-if="teamList.length == 0">选择部门</view>
							</view>
						</view>
					</view>
				</view>
				<view class="menu-obj g_p_14" @click="showPicker('role')">
					<view class="g_flex_row_start flex_center">
						<view class="g_mr_8"> 角色: </view>
						<view class="g_flex_row_between flex_center g_flex_1">
							<view style="max-width: calc(100%); overflow-x: auto; min-height: 26px; row-gap: 4px" v-if="roleList.length > 0" class="g_flex_row_start flex_center g_flex_1">
								<view class="menu-btn menu-active" v-for="item in roleList">
									<view class="btn g_radius_4 g_pl_8 g_pr_8 g_fs_12">{{ item.roleName }}</view>
								</view>
							</view>
							<view class="menu-btn g_text_s">
								<view class="g_c_9" v-if="roleList.length == 0">选择角色</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<u-popup v-model="markCheck" mode="bottom" border-radius="16" :mask-close-able="true">
			<scroll-view :scroll-y="true" style="max-height: 80vh">
				<view class="g_pl_20 g_pr_20 configSelect">
					<view v-if="pickerType == 'department'">
						<view class="g_p_14 g_fs_17 g_text_c">选择部门</view>
						<view class="g_text_c g_fs_16 g_border_e_t" :class="item.checked ? 'active' : ''" v-for="item in configList.teams" @click="setConfig(item, 'department')">
							<view class="g_flex_row_between flex_center g_p_12">
								<view>
									{{ item.teamName }}
								</view>
								<view class="g_flex_row_end">
									<view class="iconfont icon-duihao" v-if="item.checked"></view>
									<view class="iconfont g_ml_8" :class="item.showChild ? 'icon-zhankai' : 'icon-gengduo11'" v-if="item.childs.length > 0" @click.stop="showChilds(item)"></view>
								</view>
							</view>
							<view v-if="item.showChild" class="g_p_12 g_border_e_t" style="">
								<view class="g_flex_row_between flex_center g_c_3 g_pl_12" :class="child.checked ? 'active' : ''" v-for="child in item.childs" @click.stop="setConfig(child, 'department')">
									<view>
										{{ child.teamName }}
									</view>
									<view class="iconfont icon-duihao" v-if="child.checked"></view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="pickerType == 'role'">
						<view class="g_p_14 g_fs_17 g_text_c">选择角色</view>
						<view class="g_p_12 g_text_c g_fs_16 g_flex_row_between flex_center" :class="item.checked ? 'active' : ''" v-for="item in configList.roles" @click="setConfig(item, 'role')">
							<view>
								{{ item.roleName }}
							</view>
							<view class="iconfont icon-duihao" v-if="item.checked"></view>
						</view>
					</view>
				</view>
				<view class="g_pt_16 g_pb_24 btnBox g_border_e_t">
					<rh-button type="primary" btnText="确定" @clickBtn="markCheck = false"></rh-button>
				</view>
			</scroll-view>
		</u-popup>
	</div>
</template>

<script>
export default {
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			applyList: [],
			query: { page: 1, size: 30 },
			showUserSelect: false,
			newMemberInfo: {
				department: "",
				role: "",
			},
			teamList: [],
			roleList: [],
			configList: {},
			pickerType: "",
			markCheck: false,
			currentUser: {},
		};
	},
	onShow() {
		this.getUserApplyList();
		this.setTeamManagerStatus();
		this.getConfig();
	},
	created() {},

	methods: {
		getConfig() {
			let that = this;
			this.G.Get("/yishoudan/agency/group/user/apply/getTeamsAndRoles", {}, (res) => {
				console.log("getTeamsAndRoles", res);
				res.teams.forEach((item) => {
					item.checked = false;
					item.showChild = false;
					if (item.childs.length > 0) {
						item.childs.forEach((child) => {
							child.checked = false;
						});
					}
				});
				res.roles.forEach((item) => {
					item.checked = false;
				});
				that.configList = res;
			});
		},
		setTeamManagerStatus() {
			this.G.Get(this.api.order_updateApplyNumHasViewed, {}, (res) => {});
		},
		resetList() {
			let that = this;
			this.teamList = [];
			this.roleList = [];
			that.configList.teams.forEach((item) => {
				item.checked = false;
				item.showChild = false;
				if (item.childs.length > 0) {
					item.childs.forEach((child) => {
						child.checked = false;
					});
				}
			});
			that.configList.roles.forEach((item) => {
				item.checked = false;
			});
		},
		getUserApplyList() {
			let that = this;
			this.G.Post(this.api.order_getUserApplyList, { pageNum: that.query.page, pageSize: that.query.size }, (res) => {
				console.log("order_getUserApplyList", res);
				let obj = {
					near: [],
					far: [],
				};
				res.forEach((item) => {
					let diffTime = new Date().getTime() - item.createTime;
					if (diffTime <= 3 * 24 * 60 * 60 * 1000) {
						obj.near.push(item);
					} else {
						if (diffTime > 10 * 24 * 60 * 60 * 1000) {
							item.past = true;
						} else {
							item.past = false;
						}
						obj.far.push(item);
					}
				});
				that.applyList = obj;
			});
		},
		approve(_item, type) {
			const that = this;
			console.log(_item);
			console.log(type);
			this.resetList();
			if (type == "resolve") {
				this.showUserSelect = true;
				this.currentUser = _item;
			} else {
				this.G.Post(this.api.order_userApplyApprove, { id: _item.id, status: 2 }, (res) => {
					console.log(res);
					_item.status = 2;
					uni.showToast({
						title: "操作成功",
						icon: "none",
					});
				});
			}
		},
		uploadUserInfo() {
			const that = this;
			let params = {
				id: this.currentUser.id,
				status: 1,
				agencyRoleIds: this.roleList.map((obj) => obj.id.toString()).join(","),
				agencyTeamIds: this.teamList.map((obj) => obj.id.toString()).join(","),
			};
			this.G.Post(this.api.order_userApplyApprove, params, (res) => {
				console.log(res);
				if (that.applyList.far.length > 0) {
					that.applyList.far.forEach((item) => {
						if (that.currentUser.id == item.id) {
							item.status = 1;
						}
					});
				}
				if (that.applyList.near.length > 0) {
					that.applyList.near.forEach((item) => {
						if (that.currentUser.id == item.id) {
							item.status = 1;
						}
					});
				}
				uni.showToast({
					title: "操作成功",
					icon: "none",
				});
			});
		},
		setConfig(_item, _type) {
			if (_type == "department") {
				if (this.teamList.indexOf(_item) == -1) {
					this.teamList.push(_item);
				} else {
					this.teamList.splice(this.teamList.indexOf(_item), 1);
				}
			} else {
				if (this.roleList.indexOf(_item) == -1) {
					this.roleList.push(_item);
				} else {
					this.roleList.splice(this.roleList.indexOf(_item), 1);
				}
			}
			_item.checked = !_item.checked;
		},
		showChilds(_item) {
			_item.showChild = !_item.showChild;
		},
		showPicker(type) {
			console.log("showPicker", type);
			this.markCheck = true;
			this.pickerType = type;
		},
		setDepartment(e) {
			console.log("eee", this.departmentList[e.detail.value]);
		},
		setRole(e) {
			console.log("eee", this.roleList[e.detail.value]);
		},
	},
};
</script>

<style lang="scss">
.i-items {
	// border-bottom: 1px solid #eee;
	position: relative;
	&:not(:first-child):after {
		content: "";
		display: block;
		height: 1rpx;
		width: calc(100% - 76px);
		background: #eee;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	// &:last-child:after {
	// 	border-bottom: none;
	// }
}
.menu-obj {
	// min-width: 422px;

	.menu-btn {
		margin-right: 8px;

		.btn {
			background: rgba(204, 204, 204, 0.2);
			border: 1rpx solid transparent;
			color: #666666;
			white-space: nowrap;
		}
	}
	.menu-active {
		.btn {
			background: #3578f622;
			border: 1rpx solid #3578f6;
			color: #3578f6;
			box-sizing: border-box;
			height: 24px;
			line-height: 22px;
		}
	}
}
.configSelect {
	.active {
		color: v-bind("themeColor");
	}
}
.btnBox {
	position: sticky;
	bottom: 0;
	padding-top: 12px;
	display: flex;
	height: unset;
	justify-content: center;
	background-color: #fff;
}
</style>
