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 3.2rem 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;
			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>