<template>
	<div class="child-group-container g_flex_column_between g_bg_page">
		<scroll-view class="g_flex_1" enable-flex :style="{ 'min-height': `calc(100vh - ${0}px)` }" :scroll-y="true">
			<div class="g_flex_column_between" :style="{ 'min-height': `calc(100vh - ${0}px)` }">
				<div class>
					<div class="g_h_10"></div>
					<div class="r_box g_ml_10 g_mr_10" style="border-radius: 8px;background-color: #fff;">
						<div v-for="(item, index) in teamList" :key="item.id" 
								 class="g_flex_row_start" style="padding: 0 10px">
							<div class="g_flex_none g_flex_column_center" style="margin-right: 10px;">
								<div class="g_flex_c" style="width: 40px;height: 40px;background-color: rgba(2, 122, 255, 0.1);color: #1890ff;border-radius: 50%;">
									<i class="iconfont icon-folder-fill" style="font-size: 20px;"></i>
								</div>
							</div>
							<div class="g_flex_1 g_flex_column_center"
                   style="height: 60px;"
									 :style="index === teamList.length - 1 ? 'padding: 9px 0;' : 'border-bottom: 0.5px solid #eee;padding: 9px 0;'"
							>
								<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" class="g_ell_1">
									{{ item.teamName }}({{ item.userNum }})
								</div>
							</div>
						</div>
						<div v-if="teamList.length === 0" class="g_text_c g_c_9" style="padding: 40px 0;">
							暂无子部门
						</div>
					</div>
					<div class="g_h_40"></div>
				</div>
			</div>
		</scroll-view>

		<u-popup v-model="addMemberShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="addMemberShow = false">
			<view class="g_text_c g_bg_f_5 g_fs_17">
				<view class="g_bg_f">
					<view class="g_c_3">
						<view class="g_p_16 g_border_e_t" @click="goPage('/root/merchantManagement/addOrUpdataMember')">手动添加</view>
						<view class="g_p_16 g_border_e_t" @click="goPage('/root/merchantManagement/memberApplyQRCode')">微信邀请</view>
					</view>
				</view>
				<view class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="addMemberShow = false">取消</view>
			</view>
		</u-popup>

		<u-popup v-model="operateShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="operateShow = false">
			<view class="g_text_c g_bg_f_5 g_fs_17">
				<view class="g_bg_f">
					<view class="g_c_3">
						<view class="g_p_16 g_border_e_t" @click="onOperate('editName')">修改名称</view>
						<view class="g_p_16 g_border_e_t" @click="onOperate('delete')">删除</view>
					</view>
				</view>
				<view class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="operateShow = false">取消</view>
			</view>
		</u-popup>

		<u-modal v-model="editNameShow" width="90%" negativeTop="150" :showTitle="false" :showConfirmButton="false" :maskCloseAble="true">
			<div class="g_fs_17 g_text_c">
				<div style="padding: 32px 24px">
					<div class="g_text_c g_fw_600 g_c_0 g_mb_16">修改名称</div>
					<div class="">
						<u-input v-model="editNameValue"
										 :customStyle="{
											fontSize: '17px',
											borderRadius: '4px',
											backgroundColor: '#fff',
										 }"
										 height="80"
										 border
						         border-color="#dddddd"
						         placeholder="请输入部门名称"
										 placeholder-style="color:#999;font-size: 17px;"
						 />
					</div>
				</div>
				<div class="g_flex_row_center flex_center g_fw_600 g_border_e_t">
					<div class="g_flex_1 g_text_c g_border_e_r" hover-class="thover" @click="editNameShow = false" style="height: 56px;line-height: 56px;font-size: 17px;color: #333;">取消</div>
					<div class="g_flex_1 g_text_c g_c_sub" hover-class="thover" @click="submitEditName" style="height: 56px;line-height: 56px;font-size: 17px;color: #576b95;">
						<u-loading mode="circle" size="16" v-if="editNameLoading"></u-loading>
						<span v-else>确定</span>
					</div>
				</div>
			</div>
		</u-modal>

		<u-modal v-model="deleteShow" width="90%" negativeTop="150" :showTitle="false" :showConfirmButton="false" :maskCloseAble="true">
			<div class="g_fs_17 g_text_c">
				<div style="padding: 32px 24px">
					<div style="font-size: 17px;color: #000;">确定将"{{ pageTitle }}"删除吗?</div>
				</div>
				<div class="g_flex_row_center flex_center g_fw_600 g_border_e_t">
					<div class="g_flex_1 g_text_c g_border_e_r" hover-class="thover" @click="deleteShow = false" style="height: 56px;line-height: 56px;font-size: 17px;color: #333;">取消</div>
					<div class="g_flex_1 g_text_c g_c_sub" hover-class="thover" @click="submitDelete" style="height: 56px;line-height: 56px;font-size: 17px;color: #576b95;">
						<u-loading mode="circle" size="16" v-if="deleteLoading"></u-loading>
						<span v-else>确定</span>
					</div>
				</div>
			</div>
		</u-modal>

		<div style="height: 40px;"></div>
		<g-panel-fixed>
			<slot>
				<div class="g_flex_row_between" style="padding: 0 10px;">
					<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="addMemberShow = true">添加成员</div>
					<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="operateShow = true">操作</div>
					<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="goPage('/root/person/info?active=1')">更多管理</div>
				</div>
			</slot>
		</g-panel-fixed>
	</div>
</template>

<script>
export default {
	data() {
		return {
			teamList: [],
			currentId: "",
			currentParentId: "",
			pageTitle: "",
			addMemberShow: false,
			operateShow: false,
			editNameShow: false,
			editNameLoading: false,
			editNameValue: "",
			deleteShow: false,
			deleteLoading: false,
		};
	},
	onLoad(options) {
		this.currentId = options.id || "";
		this.currentParentId = options.pId || "";
		this.pageTitle = decodeURIComponent(options.teamName || "");
		this.editNameValue = this.pageTitle;
		uni.setNavigationBarTitle({
			title: this.pageTitle,
		});
	},
	onShow() {
		this.initData();
	},
	methods: {
		initData() {
			let childs = uni.getStorageSync("childGroup_childs") || [];
			this.teamList = childs;
		},
		goChildGroup(item) {
			uni.setStorageSync("childGroup_childs", item.childs || []);
			uni.navigateTo({
				url: `/root/merchantManagement/childGroup?id=${item.id}&teamName=${encodeURIComponent(item.teamName)}&pId=${this.currentId}`,
			});
		},
		goPage(url) {
			uni.navigateTo({
				url,
			});
			this.addMemberShow = false;
			this.operateShow = false;
		},
		onOperate(type) {
			this.operateShow = false;
			if (type === 'editName') {
				this.editNameValue = this.pageTitle;
				this.editNameShow = true;
			} else if (type === 'delete') {
				this.deleteShow = true;
			}
		},
		submitEditName() {
			if (!this.editNameValue || !this.editNameValue.trim()) {
				uni.showToast({
					title: "请输入部门名称",
					icon: "none",
				});
				return;
			}
			if (this.editNameLoading) return;
			this.editNameLoading = true;
			this.G.Post("/yishoudan/agency/team/update", {
				teamName: this.editNameValue.trim(),
				recordId: this.currentId,
				parentId: this.currentParentId,
			}, (res) => {
				this.editNameLoading = false;
				uni.showToast({
					title: "修改成功",
					icon: "success",
				});
				this.editNameShow = false;
				this.pageTitle = this.editNameValue.trim();
				uni.setNavigationBarTitle({
					title: this.pageTitle,
				});
				this.refreshList();
			}, (err) => {
				this.editNameLoading = false;
			});
		},
		submitDelete() {
			if (this.deleteLoading) return;
			this.deleteLoading = true;
			this.G.Post(`/yishoudan/agency/team/del/${this.currentId}`, {}, (res) => {
				this.deleteLoading = false;
				uni.showToast({
					title: "删除成功",
					icon: "success",
				});
				uni.navigateBack();
			}, (err) => {
				this.deleteLoading = false;
			});
		},
		refreshList() {
			this.G.Post('/yishoudan/agency/team/list', {}, (res) => {
				let currentChild = this.findChildById(res.list, this.currentId);
				if (currentChild) {
					this.teamList = currentChild.childs || [];
					uni.setStorageSync("childGroup_childs", this.teamList);
				}
			});
		},
		findChildById(list, id) {
			for (let item of list) {
				if (String(item.id) === String(id)) {
					return item;
				}
				if (item.childs && item.childs.length > 0) {
					let found = this.findChildById(item.childs, id);
					if (found) return found;
				}
			}
			return null;
		},
	},
};
</script>

<style lang="scss">
</style>
