aida_front/src/component/Administrator/subscriptionPlan.vue

<template>
	<div class="subscription-plan">
		<a-card class="search-card" :bordered="false">
			<a-form
				class="search-form"
				layout="inline"
				:model="searchForm"
				:label-col="{ style: { width: '14rem' } }"
				:wrapper-col="{ style: { width: '20rem' } }"
			>
				<a-form-item label="ID">
					<a-input v-model:value="searchForm.id" allow-clear placeholder="Input the id" />
				</a-form-item>
				<!-- <a-form-item label="Name">
          <a-input
            v-model:value="searchForm.name"
            allow-clear
            placeholder="Input the name"
          />
        </a-form-item> -->
				<a-form-item label="Time Range">
					<a-range-picker
						v-model:value="searchForm.dateRange"
						value-format="X"
						allow-clear
					/>
				</a-form-item>
				<a-form-item label="Organization">
					<a-select
						v-model:value="searchForm.organizationId"
						allow-clear
						placeholder="Select Organization"
						style="width: 180px"
						@popupScroll="handleOrganizationScroll"
						@select="handleOrganizationSelect"
						@change="handleOrganizationChange"
					>
						<a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
							+ Create Organization
						</a-select-option>
						<a-select-option
							v-for="item in organizationOptions"
							:key="item.id"
							:value="item.id"
						>
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="Admin Account">
					<SelectUser v-model="searchForm.adminAccId" labelKey="email" />
				</a-form-item>
				<a-form-item label="Status">
					<a-select
						v-model:value="searchForm.status"
						mode="multiple"
						allow-clear
						placeholder="Select Status"
						style="width: 220px"
						:options="statusOption"
					/>
				</a-form-item>
				<a-form-item label="Country or Region">
					<a-select
						v-model:value="searchForm.countryOrRegion"
						:allowClear="true"
						show-search
						style="width: 250px"
						:filter-option="filterOption"
						placeholder="Select the country or region"
						max-tag-count="responsive"
						:options="countryList"
					/>
				</a-form-item>
				<a-form-item class="search-form__actions">
					<a-space>
						<a-button type="primary" @click="handleSearch">Search</a-button>
						<a-button @click="handleReset">Reset</a-button>
					</a-space>
				</a-form-item>
			</a-form>
		</a-card>

		<a-card class="table-card" :bordered="false">
			<div class="table-card__header">
				<a-button type="primary" @click="openCreate">New Subscription Plan</a-button>
			</div>
			<div ref="historyTable" class="table-wrapper">
				<a-table
					:data-source="tableData"
					:columns="columns"
					:loading="tableLoading"
					:bordered="false"
					row-key="id"
					:customRow="customPlanRow"
					@change="changePage"
					@resizeColumn="handleResizeColumn"
					:scroll="{ y: historyTableHeight }"
					:pagination="{
						showSizeChanger: true,
						current: searchForm.page,
						pageSize: searchForm.size,
						total: searchForm.total,
						showQuickJumper: true,
						bordered: false
					}"
				>
					<template #bodyCell="{ column, record }">
						<template
							v-if="
								column.key === 'currentPeriodStart' ||
								column.key === 'currentPeriodEnd'
							"
						>
							{{ formatTime(record[column.key], "YYYY-MM-DD hh:mm:ss") }}
						</template>

						<template v-if="column.key === 'status'">
							<a-tag :color="getStatusColor(record.status)">
								{{ record.status }}
							</a-tag>
						</template>

						<template v-else-if="column.key === 'actions'">
							<a-space class="plan-row-actions" @click.stop>
								<a @click.stop="openEdit(record)">Edit</a>
								<a-popconfirm
									title="Confirm to delete this subscription plan?"
									ok-text="Confirm"
									cancel-text="Cancel"
									@confirm="removePlan(record.id)"
								>
									<a class="danger-text" @click.stop>Delete</a>
								</a-popconfirm>
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</a-card>

		<a-modal
			v-model:visible="userInfoModalVisible"
			title="User Info"
			width="80%"
			:footer="null"
			:destroy-on-close="true"
			class="user-info-modal"
		>
			<a-table
				:columns="userInfoColumns"
				:data-source="userInfoList"
				:loading="userInfoLoading"
				:pagination="{
					showSizeChanger: true,
					current: userInfoPage.current,
					pageSize: userInfoPage.size,
					total: userInfoPage.total,
					showQuickJumper: true,
					bordered: false
				}"
				row-key="id"
				:scroll="{ x: 1280, y: 420 }"
				@change="changeUserInfoPage"
			>
				<template #bodyCell="{ column, record }">
					<template
						v-if="
							column.key === 'validStartTime' ||
							column.key === 'validEndTime' ||
							column.key === 'createDate'
						"
					>
						{{ formatUserTime(record[column.key]) }}
					</template>
					<template v-else-if="column.key === 'systemUser'">
						{{ getSystemUserLabel(record.systemUser) }}
					</template>
					<template v-else-if="column.key === 'isBeginner'">
						{{ record.isBeginner == 1 ? "Yes" : "No" }}
					</template>
				</template>
			</a-table>
		</a-modal>

		<div class="subscriptionPlanModal" ref="subscriptionPlanModal"></div>
		<a-modal
			class="subscriptionPlan_modal generalModel"
			v-model:visible="modalVisible"
			:footer="null"
			:get-container="() => $refs.subscriptionPlanModal"
			width="50%"
			:maskClosable="false"
			:centered="true"
			:closable="false"
			:mask="true"
			wrapClassName="#app"
			:keyboard="false"
			destroy-on-close
		>
			<div class="generalModel_btn">
				<div class="generalModel_closeIcon" @click.stop="cancelModal">
					<svg
						width="100%"
						height="100%"
						viewBox="0 0 46 46"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
						<rect
							x="32.5063"
							y="12"
							width="3"
							height="29"
							rx="1.5"
							transform="rotate(45 32.5063 12)"
							fill="white"
						/>
						<rect
							x="34.6274"
							y="32.5059"
							width="3"
							height="29"
							rx="1.5"
							transform="rotate(135 34.6274 32.5059)"
							fill="white"
						/>
					</svg>
				</div>
			</div>
			<div class="modal_title_text">
				<div>{{ modalTitle }}</div>
			</div>
			<div class="subscriptionPlan_center admin_page">
				<div class="form_content">
					<div class="admin_state_item" v-if="!isEditMode">
						<span>
							Name:
							<span>*</span>
						</span>
						<a-input
							v-model:value="formState.name"
							placeholder="Input the name"
							style="width: 250px"
						/>
					</div>
					<div class="admin_state_item" v-if="!isEditMode">
						<span>
							Organization:
							<span>*</span>
						</span>
						<a-select
							v-model:value="formState.organizationId"
							placeholder="Select the organization"
							allow-clear
							style="width: 250px"
							@popupScroll="handleOrganizationScroll"
							@select="handleOrganizationSelect"
							@change="handleOrganizationChange"
						>
							<a-select-option
								value="ADD_ORGANIZATION"
								class="add-organization-option"
							>
								+ Create Organization
							</a-select-option>
							<a-select-option
								v-for="item in organizationOptions"
								:key="item.id"
								:value="item.id"
							>
								{{ item.name }}
							</a-select-option>
						</a-select>
					</div>
					<div class="admin_state_item">
						<span>
							Country Or Region:
							<span>*</span>
						</span>
						<a-select
							v-model:value="formState.countryOrRegion"
							placeholder="Select the country or region"
							allow-clear
							show-search
							:filter-option="filterOption"
							style="width: 250px"
							:options="countryList"
						></a-select>
					</div>
					<div class="admin_state_item">
						<span>
							Admin Account:
							<span>*</span>
						</span>
						<SelectUser ref="userRef" v-model="formState.adminAccId" labelKey="email" />
					</div>
					<div class="admin_state_item">
						<span>
							Start Time:
							<span>*</span>
						</span>
						<a-date-picker
							v-model:value="formState.currentPeriodStart"
							value-format="X"
							:disabled="isEditMode && formState.status !== 'PENDING'"
							style="width: 250px"
							:disabledDate="disabledDate"
							:show-time="{ format: 'HH:mm' }"
							class="range_picker"
							placeholder="Select the start time"
						>
							<template #suffixIcon>
								<span class="icon iconfont range_picker_icon icon-rili"></span>
							</template>
						</a-date-picker>
					</div>
					<div class="admin_state_item">
						<span>
							End Time:
							<span>*</span>
						</span>
						<a-date-picker
							v-model:value="formState.currentPeriodEnd"
							value-format="X"
							:show-time="{ format: 'HH:mm' }"
							:disabledDate="disableEndDate"
							:disabledTime="disableEndTime"
							:show-now="!isEditMode"
							style="width: 250px"
							class="range_picker"
							placeholder="Select the end time"
						>
							<template #suffixIcon>
								<span class="icon iconfont range_picker_icon icon-rili"></span>
							</template>
						</a-date-picker>
					</div>
					<div class="admin_state_item">
						<span>
							Sub-Account Num:
							<span>*</span>
						</span>
						<a-input-number
							v-model:value="formState.accountNum"
							:min="0"
							style="width: 250px"
							placeholder="Input the account number"
						/>
					</div>
					<div class="admin_state_item">
						<span>
							Credit Limit:
							<span>*</span>
						</span>
						<a-input-number
							v-model:value="formState.creditLimit"
							:min="0"
							style="width: 250px"
							placeholder="Input the credit limit"
						/>
					</div>
					<div class="admin_state_item" v-if="!isEditMode">
						<span>Status:</span>
						<a-select
							v-model:value="formState.status"
							placeholder="Select status"
							allow-clear
							style="width: 250px"
							:options="statusOption"
						/>
					</div>
				</div>
			</div>
			<div class="subscriptionPlan_btn admin_page">
				<div class="admin_search_item" @click="cancelModal">Close</div>
				<div class="admin_search_item" @click="handleSubmitDebounced">OK</div>
			</div>
		</a-modal>

		<div class="organizationModal" ref="organizationModal"></div>
		<a-modal
			class="organization_modal"
			v-model:visible="organizationModalVisible"
			:footer="null"
			:get-container="() => $refs.organizationModal"
			:maskClosable="false"
			:centered="true"
			:mask="true"
			wrapClassName="#app"
			:keyboard="false"
			destroy-on-close
		>
			<div class="modal_title_text">
				<div>Create Organization</div>
			</div>
			<div class="subscriptionPlan_center admin_page">
				<div class="form_content">
					<div class="admin_state_item">
						<span>
							Name:
							<span>*</span>
						</span>
						<a-input
							v-model:value="organizationForm.name"
							placeholder="Input the name"
							style="width: 250px"
						/>
					</div>
					<div class="admin_state_item">
						<span>
							Type:
							<span>*</span>
						</span>
						<a-select
							v-model:value="organizationForm.type"
							placeholder="Select type"
							style="width: 250px"
						>
							<a-select-option value="Enterprise">Enterprise</a-select-option>
							<a-select-option value="Education">Education</a-select-option>
						</a-select>
					</div>
				</div>
			</div>
			<div class="organization_footer">
				<div class="footer_btn ant-btn ant-btn-primary" @click="cancelOrganizationModal">
					Close
				</div>
				<div class="footer_btn ant-btn ant-btn-primary" @click="handleCreateOrganization">
					OK
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
	import {
		reactive,
		ref,
		onMounted,
		onBeforeUnmount,
		onActivated,
		computed,
		nextTick,
		useTemplateRef
	} from "vue"
	import SelectUser from "@/component/common/SelectUser.vue"
	import { message } from "ant-design-vue"
	import { Https } from "@/tool/https"
	import { formatTime } from "@/tool/util"
	import store from "@/store"
	import type { FormInstance, Rule } from "ant-design-vue/es/form"
	import { debounce } from "lodash-es"
	import dayjs, { Dayjs } from "dayjs"

	type PlanStatus = "PENDING" | "ACTIVE" | "EXPIRED"
	interface SubscriptionPlan {
		id: number
		userId?: string | number
		name: string
		currentPeriodStart: string
		currentPeriodEnd: string
		organizationId: string
		adminAccId: string
		adminAccEmail?: string
		status: PlanStatus
		creditLimit: number
		accountNum?: number
		startStamp: number
		endStamp: number
	}

	interface UserInfoRecord {
		id: number
		userEmail?: string
		userName?: string
		language?: string
		validStartTime?: number | string
		validEndTime?: number | string
		country?: string
		createDate?: number | string
		isBeginner?: number
		browserIdentifiers?: string
		credits?: number
		systemUser?: number | string
	}

	const countryList = ref([])
	const userRef = ref(null)

	const searchForm = reactive({
		name: "",
		startTime: "",
		endTime: "",
		organizationId: undefined as string | undefined,
		adminAccId: undefined as string | undefined,
		status: [] as PlanStatus[] | [],
		id: "",
		countryOrRegion: null,
		page: 1,
		size: 10,
		total: 0
	})

	const toSeconds = (dateStr: string) => Math.floor(new Date(dateStr).getTime() / 1000)

	const tableData = ref<SubscriptionPlan[]>([])
	const tableLoading = ref(false)
	const userInfoModalVisible = ref(false)
	const userInfoLoading = ref(false)
	const userInfoList = ref<UserInfoRecord[]>([])
	const currentUserInfoPlanId = ref<string | number | null>(null)
	const userInfoPage = reactive({
		current: 1,
		size: 10,
		total: 0
	})

	const modalVisible = ref(false)
	const confirmLoading = ref(false)
	const modalTitle = ref("New Subscription Plan")
	const isEditMode = ref(false)
	const formState = reactive({
		name: "",
		currentPeriodStart: "",
		currentPeriodEnd: "",
		organizationId: undefined as string | undefined,
		adminAccId: undefined as string | undefined,
		creditLimit: null as number | null,
		accountNum: null as number | null,
		status: undefined as PlanStatus | undefined,
		countryOrRegion: null as string | null
	})

	const organizationModalVisible = ref(false)
	const organizationForm = reactive({
		name: "",
		type: undefined as string | undefined
	})

	const statusLabelMap: Record<PlanStatus, string> = {
		PENDING: "Pending",
		ACTIVE: "Active",
		EXPIRED: "Expired"
	}
	const statusColorMap: Record<PlanStatus, string> = {
		PENDING: "blue",
		ACTIVE: "green",
		EXPIRED: "red"
	}

	const statusOption = ref([
		{
			label: "Pending",
			value: "PENDING"
		},
		{
			label: "Active",
			value: "ACTIVE"
		},
		{
			label: "Expired",
			value: "EXPIRED"
		}
	])

	const disabledDate = (current: Dayjs) => {
		return current && current < dayjs().subtract(1, "days").endOf("day")
	}

	const disableEndDate = (current: Dayjs) => {
		if (isEditMode.value) {
			const specificTime = dayjs(formState.currentPeriodEnd)
			return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
		}
		return disabledDate(current)
	}
	const range = (start: number, end: number) => {
		const result = []
		for (let i = start; i < end; i++) {
			result.push(i)
		}
		return result
	}
	const disableEndTime = (date) => {
		if (!formState.currentPeriodEnd || !isEditMode.value)
			return {
				disabledHours: () => [],
				disabledMinutes: () => [],
				disabledSeconds: () => []
			}

		const specificTime = dayjs.unix(formState.currentPeriodEnd)

		if (date && date.isSame(specificTime, "day")) {
			// 如果是指定日期当天，禁用时间戳之前的时间
			const hour = specificTime.hour()
			const minute = specificTime.minute()
			const second = specificTime.second()

			return {
				disabledHours: () => Array.from({ length: hour }, (_, i) => i), // 禁用小时之前
				disabledMinutes: (selectedHour) => {
					if (selectedHour === hour) {
						return Array.from({ length: minute }, (_, i) => i) // 同小时，禁用分钟之前
					}
					return []
				},
				disabledSeconds: (selectedHour, selectedMinute) => {
					if (selectedHour === hour && selectedMinute === minute) {
						return Array.from({ length: second }, (_, i) => i) // 同小时分钟，禁用秒之前
					}
					return []
				}
			}
		}

		return {
			disabledHours: () => [],
			disabledMinutes: () => [],
			disabledSeconds: () => []
		}
	}

	const normalizeStatus = (status?: string): PlanStatus | undefined => {
		if (!status) return undefined
		const upper = status.toUpperCase() as PlanStatus
		return upper
	}
	const getStatusColor = (status?: string) =>
		statusColorMap[normalizeStatus(status) as PlanStatus] || "default"

	const columns = [
		{ title: "Name", dataIndex: "name", key: "name", align: "center", width: 180 },
		{ title: "ID", dataIndex: "id", key: "id", align: "center", width: 80 },
		{
			title: "Organization",
			dataIndex: "organizationName",
			key: "organizationName",
			align: "center",
			width: 180
		},
		{
			title: "Admin Account",
			dataIndex: "adminAccEmail",
			key: "adminAccEmail",
			align: "center",
			width: 180,
			ellipsis: true
		},
		{
			title: "Sub-Account Num",
			dataIndex: "accountNum",
			key: "accountNum",
			align: "center",
			width: 120,
			ellipsis: true
		},
		{
			title: "Country or Region",
			dataIndex: "countryOrRegion",
			key: "countryOrRegion",
			align: "center",
			width: 120,
			ellipsis: true
		},
		{
			title: "Start Time",
			dataIndex: "currentPeriodStart",
			key: "currentPeriodStart",
			align: "center",
			width: 200
		},
		{
			title: "End Time",
			dataIndex: "currentPeriodEnd",
			key: "currentPeriodEnd",
			align: "center",
			width: 200
		},
		{ title: "Status", dataIndex: "status", key: "status", align: "center", width: 100 },
		{
			title: "Credit Limit",
			dataIndex: "creditLimit",
			key: "creditLimit",
			align: "center",
			width: 120
		},
		{ title: "Operations", key: "actions", width: 160, align: "center", fixed: "right" }
	]

	const userInfoColumns = [
		{ title: "User Id", dataIndex: "id", key: "id", align: "center", width: 100 },
		{
			title: "Email",
			dataIndex: "userEmail",
			key: "userEmail",
			align: "center",
			width: 200,
			ellipsis: true
		},
		{
			title: "User Name",
			dataIndex: "userName",
			key: "userName",
			align: "center",
			width: 150,
			ellipsis: true
		},

		{
			title: "Valid Start Time",
			dataIndex: "validStartTime",
			key: "validStartTime",
			align: "center",
			width: 200
		},
		{
			title: "Valid End Time",
			dataIndex: "validEndTime",
			key: "validEndTime",
			align: "center",
			width: 200
		},
		{
			title: "Country or Region",
			dataIndex: "country",
			key: "country",
			align: "center",
			width: 180,
			ellipsis: true
		},
		{
			title: "Credits",
			dataIndex: "credits",
			key: "credits",
			align: "center",
			width: 100
		},
		{
			title: "User Type",
			dataIndex: "systemUser",
			key: "systemUser",
			align: "center",
			width: 120
		}
	]

	const systemUserLabelMap: Record<string, string> = {
		"0": "visitor",
		"1": "yearly",
		"2": "monthly",
		"3": "trial",
		"4": "userInEvent",
		"7": "Edu Admin"
	}

	const getSystemUserLabel = (systemUser?: number | string) => {
		if (systemUser === undefined || systemUser === null) return ""
		return systemUserLabelMap[String(systemUser)] || String(systemUser)
	}

	const formatUserTime = (value?: number | string) => {
		if (!value) return ""
		if (typeof value === "number") {
			return formatTime(value / 1000, "YYYY-MM-DD hh:mm:ss")
		}
		if (/^\d+$/.test(value)) {
			return formatTime(Number(value) / 1000, "YYYY-MM-DD hh:mm:ss")
		}
		return value
	}

	const normalizeUserInfoList = (res: any): UserInfoRecord[] => {
		if (Array.isArray(res)) return res
		if (Array.isArray(res?.records)) return res.records
		if (res) return [res]
		return []
	}

	const buildUserInfoParams = (id: string | number) => ({
		endTime: "",
		startTime: "",
		size: userInfoPage.size,
		page: userInfoPage.current,
		systemUser: "",
		country: "",
		email: "",
		userType: "",
		ids: [],
		occupation: "",
		order: "",
		orderBy: "",
		userName: "",
		subscriptionPlanId: id
	})

	const fetchUserInfo = async () => {
		if (currentUserInfoPlanId.value === null) return
		userInfoLoading.value = true
		userInfoList.value = []

		try {
			const res = await Https.axiosPost(
				Https.httpUrls.getUserInfo,
				buildUserInfoParams(currentUserInfoPlanId.value)
			)
			const records = normalizeUserInfoList(res)
			userInfoList.value = records
			userInfoPage.total = Number(res?.total ?? records.length)
		} catch (error: any) {
			message.error(error.message || "Failed to load user info")
			console.error(error)
		} finally {
			userInfoLoading.value = false
		}
	}

	const openUserInfo = async (record: SubscriptionPlan) => {
		console.log(record)
		// debugger

		currentUserInfoPlanId.value = record.id
		userInfoPage.current = 1
		userInfoModalVisible.value = true
		await fetchUserInfo()
	}

	const changeUserInfoPage = (pagination: any) => {
		userInfoPage.current = pagination.current
		userInfoPage.size = pagination.pageSize
		fetchUserInfo()
	}

	const customPlanRow = (record: SubscriptionPlan) => {
		return {
			onClick: (event: MouseEvent) => {
				const target = event.target as HTMLElement | null
				if (target?.closest(".plan-row-actions")) return
				openUserInfo(record)
			}
		}
	}

	const historyTable = ref<HTMLElement | null>(null)
	const historyTableHeight = ref(0)
	const minTableBodyHeight = 120
	let tableResizeObserver: ResizeObserver | null = null
	let tableResizeTimer: ReturnType<typeof window.setTimeout> | null = null

	const handleResizeColumn = (w: any, col: any) => {
		col.width = w
	}

	const getElementOuterHeight = (element: Element | null) => {
		if (!element) return 0
		const htmlElement = element as HTMLElement
		const style = window.getComputedStyle(htmlElement)
		return (
			htmlElement.offsetHeight +
			Number.parseFloat(style.marginTop || "0") +
			Number.parseFloat(style.marginBottom || "0")
		)
	}

	const calculateTableHeight = () => {
		if (tableResizeTimer) {
			window.clearTimeout(tableResizeTimer)
		}
		tableResizeTimer = window.setTimeout(() => {
			nextTick(() => {
				const tableWrapper = historyTable.value
				if (!tableWrapper) {
					tableResizeTimer = null
					return
				}

				const tableHead = tableWrapper.querySelector(".ant-table-thead") ?? null
				const pagination = tableWrapper.querySelector(".ant-pagination") ?? null
				const tableHeadHeight = getElementOuterHeight(tableHead) || 55
				const paginationHeight = getElementOuterHeight(pagination) || 48
				const reservedHeight = tableHeadHeight + paginationHeight + 8

				historyTableHeight.value = Math.max(
					minTableBodyHeight,
					tableWrapper.clientHeight - reservedHeight
				)
				tableResizeTimer = null
			})
		}, 50)
	}

	const handleResize = () => {
		calculateTableHeight()
	}

	const setupTableResizeObserver = () => {
		if (!historyTable.value || typeof ResizeObserver === "undefined") return
		tableResizeObserver?.disconnect()
		tableResizeObserver = new ResizeObserver(() => {
			calculateTableHeight()
		})
		tableResizeObserver.observe(historyTable.value)

		const searchCard = historyTable.value
			.closest(".subscription-plan")
			?.querySelector(".search-card")
		if (searchCard) {
			tableResizeObserver.observe(searchCard)
		}
	}

	onMounted(async () => {
		await getOrganizationList()
		await handleSearch()
		calculateTableHeight()
		setupTableResizeObserver()
		window.addEventListener("resize", handleResize)
		const list = sessionStorage.getItem("allCountry")
		countryList.value = list ? JSON.parse(list) : []
	})

	onActivated(() => {
		calculateTableHeight()
	})

	onBeforeUnmount(() => {
		window.removeEventListener("resize", handleResize)
		tableResizeObserver?.disconnect()
		if (tableResizeTimer) {
			window.clearTimeout(tableResizeTimer)
			tableResizeTimer = null
		}
	})

	const handleFetchTableData = async () => {
		tableLoading.value = true
		return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
			.then((res) => {
				tableData.value = res.records
				searchForm.total = res.total
			})
			.finally(() => {
				tableLoading.value = false
				calculateTableHeight()
			})
	}

	const resetFormState = () => {
		formState.name = ""
		formState.currentPeriodStart = ""
		formState.currentPeriodEnd = ""
		formState.organizationId = undefined
		formState.adminAccId = undefined
		formState.creditLimit = null
		formState.accountNum = null
		formState.status = undefined
		formState.countryOrRegion = null
	}

	const changePage = (pagination: any) => {
		searchForm.page = pagination.current
		searchForm.size = pagination.pageSize
		handleFetchTableData()
	}

	const handleSearch = () => {
		searchForm.page = 1
		handleFetchTableData()
	}

	const handleReset = () => {
		searchForm.name = ""
		searchForm.startTime = ""
		searchForm.endTime = ""
		searchForm.organizationId = undefined
		searchForm.adminAccId = undefined
		searchForm.status = []
		searchForm.id = ""
		searchForm.countryOrRegion = null
		handleSearch()
	}

	const openCreate = () => {
		modalTitle.value = "New Subscription Plan"
		isEditMode.value = false
		resetFormState()
		modalVisible.value = true
	}

	const openEdit = (record: SubscriptionPlan) => {
		modalTitle.value = "Edit Subscription Plan"
		isEditMode.value = true
		formState.name = record.name
		formState.currentPeriodStart = String(record.currentPeriodStart)
		formState.currentPeriodEnd = String(record.currentPeriodEnd)
		formState.organizationId = record.organizationId
		formState.adminAccId = record.adminAccId
		formState.creditLimit = record.creditLimit
		formState.accountNum = (record as any).accountNum || null
		formState.status = record.status
		formState.id = record.id
		formState.countryOrRegion = (record as any).countryOrRegion || null

		// 检查组织ID是否在已加载的组织列表中，如果不在，则添加临时项
		if (record.organizationId) {
			const orgExists = organizationOptions.value.some(
				(org: any) =>
					org.id === record.organizationId ||
					String(org.id) === String(record.organizationId)
			)
			if (!orgExists) {
				const orgName = (record as any).organizationName
				if (orgName) {
					organizationOptions.value = [
						{
							id: record.organizationId,
							name: orgName
						},
						...organizationOptions.value
					]
				}
			}
		}
		modalVisible.value = true
		if (record.adminAccId) {
			nextTick(() => {
				userRef.value.patchList({
					label: record.name,
					value: record.adminAccId,
					email: record.adminAccEmail
				})
			})
		}
	}

	const validateForm = (): boolean => {
		interface FieldRule {
			value: any
			message: string
			checkNull?: boolean
		}

		const requiredFields: FieldRule[] = [
			{ value: formState.currentPeriodStart, message: "Please select the start time" },
			{ value: formState.currentPeriodEnd, message: "Please select the end time" },
			{ value: formState.adminAccId, message: "Please select the admin account" },
			{
				value: formState.creditLimit,
				message: "Please input credit limit",
				checkNull: true
			},
			{
				value: formState.accountNum,
				message: "Please input account number",
				checkNull: true
			}
		]

		if (!isEditMode.value) {
			requiredFields.push(
				{ value: formState.name, message: "Please input the name" },
				{ value: formState.organizationId, message: "Please select organization" }
			)
		}

		for (const field of requiredFields) {
			const isEmpty = field.checkNull
				? field.value === null || field.value === undefined
				: !field.value
			if (isEmpty) {
				message.warning(field.message)
				return false
			}
		}

		return true
	}

	const handleSubmit = async () => {
		if (!validateForm()) return
		confirmLoading.value = true
		const params = {
			...formState,
			currentPeriodStart: Number(formState.currentPeriodStart),
			currentPeriodEnd: Number(formState.currentPeriodEnd)
		}
		let res = null
		try {
			if (isEditMode.value) {
				res = await Https.axiosPost(Https.httpUrls.updateSubscribePlan, params)
			} else {
				res = await Https.axiosPost(Https.httpUrls.createSubscribePlan, params)
			}
			message.success(
				`${isEditMode.value ? "Subscription plan updated" : "Subscription plan created"}`
			)
		} catch (error: any) {
			message.error(error.message)
			console.error(error)
		} finally {
			confirmLoading.value = false
			modalVisible.value = false
			resetFormState()
			isEditMode.value = false
			handleSearch()
		}
	}

	// 防抖包装，避免重复点击
	const handleSubmitDebounced = debounce(handleSubmit, 500, {
		leading: true,
		trailing: false
	})

	const cancelModal = () => {
		modalVisible.value = false
		resetFormState()
		isEditMode.value = false
	}

	const removePlan = (id: number) => {
		tableLoading.value = true
		Https.axiosGet(Https.httpUrls.deleteSubscribePlan, { params: { id } })
			.then((res) => {
				message.success("Subscription plan deleted")
				handleReset()
			})
			.catch((error: any) => {
				message.error(error.message)
				console.error(error)
			})
			.finally(() => {
				tableLoading.value = false
			})
	}

	const organizationOptions = ref([])
	const organizationParams = reactive({
		page: 1,
		size: 10,
		total: 0
	})
	const organizationLoading = ref(false)
	const getOrganizationList = async (isLoadMore = false) => {
		if (organizationLoading.value) return
		if (isLoadMore) {
			const loaded = organizationParams.page * organizationParams.size
			if (organizationParams.total && loaded >= organizationParams.total) return
			organizationParams.page += 1
		} else {
			organizationParams.page = 1
			organizationOptions.value = []
		}
		organizationLoading.value = true
		try {
			const { total, ...requestParams } = organizationParams
			const rv: any = await Https.axiosPost(Https.httpUrls.queryOrganization, requestParams)
			if (rv) {
				const newRecords = rv.records || []
				// 遍历新数据，如果已存在则覆盖，不存在则追加
				newRecords.forEach((newOrg: any) => {
					const newOrgId = String(newOrg.id)
					const existingIndex = organizationOptions.value.findIndex(
						(org: any) => String(org.id) === newOrgId
					)
					if (existingIndex !== -1) {
						// 如果已存在，用新数据覆盖旧项
						organizationOptions.value[existingIndex] = newOrg
					} else {
						// 如果不存在，追加到末尾
						organizationOptions.value.push(newOrg)
					}
				})
				organizationParams.total = rv.total || 0
			}
		} finally {
			organizationLoading.value = false
		}
	}
	const handleOrganizationScroll = (e: any) => {
		const target = e?.target
		if (!target) return
		const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
		if (nearBottom) {
			getOrganizationList(true)
		}
	}

	const handleOrganizationSelect = (value: string) => {
		if (value === "ADD_ORGANIZATION") {
			// 打开添加组织弹窗
			organizationModalVisible.value = true
			// 使用nextTick确保值被重置，使其不被选中
			nextTick(() => {
				if (searchForm.organizationId === "ADD_ORGANIZATION") {
					searchForm.organizationId = undefined
				}
				if (formState.organizationId === "ADD_ORGANIZATION") {
					formState.organizationId = undefined
				}
			})
		}
	}

	const handleOrganizationChange = (value: string) => {
		// 如果change事件触发时值是"添加组织"，立即重置
		if (value === "ADD_ORGANIZATION") {
			nextTick(() => {
				if (searchForm.organizationId === "ADD_ORGANIZATION") {
					searchForm.organizationId = undefined
				}
				if (formState.organizationId === "ADD_ORGANIZATION") {
					formState.organizationId = undefined
				}
			})
		}
	}

	const cancelOrganizationModal = () => {
		organizationModalVisible.value = false
		organizationForm.name = ""
		organizationForm.type = undefined
	}

	const handleCreateOrganization = async () => {
		if (!organizationForm.name || !organizationForm.type) {
			message.warning("Please fill in name and type")
			return
		}
		try {
			const res: any = await Https.axiosGet(Https.httpUrls.addOrganization, {
				params: {
					name: organizationForm.name,
					type: organizationForm.type
				}
			})
			message.success("Organization created successfully")
			cancelOrganizationModal()
			// 刷新组织列表
			await getOrganizationList()
			// 如果是在编辑/新建弹窗中，自动选择新创建的组织
			if (modalVisible.value) {
				const newOrgId = res?.id || res?.data?.id || res
				if (newOrgId) {
					formState.organizationId = String(newOrgId)
				}
			}
		} catch (error: any) {
			message.error(error.message || "Failed to create organization")
			console.error(error)
		}
	}

	const filterOption = (input: string, option: any) => {
		const label = option?.label ?? option?.children ?? option?.key?.label ?? ""
		return String(label).toLowerCase().includes(input.toLowerCase())
	}
</script>

<style lang="less" scoped>
	.subscription-plan {
		padding: 2rem 2.4rem 0 0;
		display: flex;
		height: 100%;
		min-height: 0;
		flex-direction: column;

		.search-card {
			margin-bottom: 1.6rem;
			flex-shrink: 0;
		}

		.table-card {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			min-height: 0;

			:deep(.ant-card-body) {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				padding: 2.4rem 2.4rem 0;
				min-height: 0;
			}

			.table-card__header {
				display: flex;
				justify-content: flex-end;
				margin-bottom: 2.6rem;
				flex-shrink: 0;
			}

			.table-wrapper {
				flex: 1;
				overflow: hidden;
				min-height: 0;

				:deep(.ant-table-wrapper),
				:deep(.ant-spin-nested-loading),
				:deep(.ant-spin-container) {
					height: 100%;
				}

				:deep(.ant-spin-container) {
					display: flex;
					flex-direction: column;
					overflow: hidden;
				}

				:deep(.ant-table) {
					flex: 1;
					min-height: 0;
					overflow: hidden;
				}

				:deep(.ant-table-container) {
					height: 100%;
					display: flex;
					flex-direction: column;
				}

				:deep(.ant-table-content) {
					height: 100%;
				}

				:deep(.ant-table-body) {
					overflow-y: auto !important;
				}

				:deep(.ant-pagination) {
					flex-shrink: 0;
				}
			}

			.danger-text {
				color: #ff4d4f;
			}
			:deep(.ant-table-cell::before) {
				display: none;
			}

			:deep(.ant-table-thead > tr > th) {
				border-bottom: none;
			}
			:deep(.ant-table-tbody > tr > td) {
				border: none;
			}

			:deep(.ant-table-tbody > tr:hover > td) {
				background: rgb(202, 202, 202);
			}

			:deep(.ant-table-tbody > tr) {
				cursor: pointer;
			}

			:deep(.plan-row-actions) {
				cursor: default;
			}
		}
	}

	.user-info-modal {
		:deep(.ant-modal-body) {
			padding: 2.4rem;
		}
	}

	:deep(.subscriptionPlan_modal) {
		.ant-modal-body {
			// height: calc(65rem * 1.2);
			display: flex;
			flex-direction: column;
			padding: 2.5rem 3rem;
			position: relative;
		}
	}

	.subscriptionPlan_modal {
		.form_content {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			row-gap: 2rem;
		}
		.admin_state_item {
			> span {
				width: 17rem !important;
			}
		}
		.modal_title_text {
			margin-bottom: 2rem;
			flex-shrink: 0;
		}
		.subscriptionPlan_center {
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 2rem 0;
		}
		.subscriptionPlan_btn {
			display: flex;
			flex-direction: row;
			height: auto;
			justify-content: flex-end;
			padding: 1.5rem 0 0 0;
			margin-top: auto;
			flex-shrink: 0;
			.admin_search_item {
				margin-bottom: 0;
			}
		}
	}

	:deep(.search-form) {
		--search-label-width: 14rem;
		--search-control-width: 20rem;
		align-items: flex-start;
		column-gap: 1.8rem;
		row-gap: 1.8rem;

		.ant-form-item {
			min-width: calc(var(--search-label-width) + var(--search-control-width));
			margin-right: 0;
			margin-bottom: 0;
		}

		.ant-form-item-label {
			flex: 0 0 var(--search-label-width);
			max-width: var(--search-label-width);
			overflow: visible;
			white-space: nowrap;

			> label {
				white-space: nowrap;
			}
		}

		.ant-form-item-control {
			flex: 0 0 var(--search-control-width);
			max-width: var(--search-control-width);
		}

		.ant-input,
		.ant-input-affix-wrapper,
		.ant-picker,
		.ant-select {
			width: 100% !important;
		}

		.search-form__actions {
			min-width: auto;

			.ant-form-item-control {
				flex: 0 0 auto;
				max-width: none;
			}
		}
	}

	@media (min-width: 1600px) {
		:deep(.search-form) {
			--search-control-width: 22rem;
		}
	}

	@media (max-width: 760px) {
		:deep(.search-form) {
			.ant-form-item {
				flex: 1 1 100%;
				min-width: 100%;
			}

			.ant-form-item-control {
				flex: 1 1 auto;
				max-width: calc(100% - var(--search-label-width));
			}
		}
	}

	:deep(.ant-select-dropdown) {
		.add-organization-option {
			color: #1890ff !important;
			font-weight: 600;
			background-color: #f0f7ff !important;
			border-bottom: 1px solid #e6f4ff;
			margin-bottom: 4px;
			padding-bottom: 4px;

			&:hover {
				background-color: #e6f4ff !important;
			}
		}
	}

	:deep(.organization_modal) {
		.ant-modal-body {
			height: auto;
			min-height: 300px;
			display: flex;
			flex-direction: column;
			padding: 2rem 2.5rem;
			position: relative;
		}

		.subscriptionPlan_center {
			flex: 0 0 auto;
			overflow: visible;
			padding: 1rem 0;
			min-height: auto;
		}

		.modal_title_text {
			margin-bottom: 1.5rem;
		}
	}
	.organization_footer {
		display: flex;
		justify-content: flex-end;
		column-gap: 3rem;
		.footer_btn {
			border-radius: 3.3rem;
		}
	}
</style>