<template>
	<div class="assets-asset-page">
		<div class="assets-asset-container">
			<el-card shadow="hover">
				<div class="assets-asset-search mb15">
					<el-form :inline="true" :model="tableData.param">
						<el-form-item label="资产名称">
							<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入资产名称" clearable style="width: 200px" />
						</el-form-item>
						<el-form-item label="资产类型">
							<el-select size="default" v-model="tableData.param.type" placeholder="请选择资产类型" clearable style="width: 150px">
								<el-option label="实物" value="physical" />
								<el-option label="虚拟" value="virtual" />
								<el-option label="服务" value="service" />
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
								<el-option label="启用" :value="1" />
								<el-option label="禁用" :value="0" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button size="default" type="primary" @click="getAssetList">
								<el-icon><ele-Search /></el-icon>
								查询
							</el-button>
							<el-button size="default" @click="onResetQuery">
								<el-icon><ele-Refresh /></el-icon>
								重置
							</el-button>
							<el-button size="default" type="success" @click="onOpenAdd">
								<el-icon><ele-Plus /></el-icon>
								新增
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
					<el-table-column type="index" label="序号" width="60" align="center" />
					<el-table-column prop="name" label="资产名称" min-width="150" show-overflow-tooltip />
					<el-table-column prop="type" label="资产类型" width="100" align="center">
						<template #default="scope">
							<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeLabel(scope.row.type) }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100" align="center">
						<template #default="scope">
							<el-switch
								v-model="scope.row.status"
								:active-value="1"
								:inactive-value="0"
								inline-prompt
								active-text="启用"
								inactive-text="禁用"
								@change="onStatusChange(scope.row)"
							/>
						</template>
					</el-table-column>
					<el-table-column prop="onlineTime" label="上线时间" width="170" show-overflow-tooltip />
					<el-table-column prop="offlineTime" label="下线时间" width="170" show-overflow-tooltip />
					<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
					<el-table-column prop="updatedAt" label="修改时间" width="170" show-overflow-tooltip />
					<el-table-column label="操作" width="250" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
							<el-button size="small" text type="success" @click="onAddSku(scope.row)">规格管理</el-button>
							<el-button size="small" text type="info" @click="onViewLog(scope.row)">日志</el-button>
							<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="mt15" style="text-align: right">
					<el-pagination
						v-model:current-page="tableData.param.pageNum"	
						v-model:page-size="tableData.param.pageSize"
						:page-sizes="[10, 20, 50, 100]"
						:total="tableData.total"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="onSizeChange"
						@current-change="onCurrentChange"
					/>
				</div>
			</el-card>
		</div>
		<EditAsset ref="editAssetRef" @getAssetList="getAssetList" />
		<SkuDialog ref="skuDialogRef" />
		<OperationLogDialog ref="operationLogRef" />
	</div>
</template>

<script lang="ts">
export default {
	name: 'assetsAsset',
};
</script>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { listAssets, updateAssetStatus, deleteAsset } from '/@/api/assets/asset';
import EditAsset from './component/editAsset.vue';
import SkuDialog from './component/skuDialog.vue';
import OperationLogDialog from '../component/operationLogDialog.vue';

interface AssetRow {
	id: string;
	name: string;
	type: string;
	categoryId: string;
	description: string;
	imageUrl: string;
	images: string[];
	onlineTime: string;
	offlineTime: string;
	status: number;
	unlimitedStock: boolean;
	createdAt: string;
	updatedAt: string;
}

const editAssetRef = ref();
const skuDialogRef = ref();
const operationLogRef = ref();

const tableData = reactive({
	data: [] as AssetRow[],
	loading: false,
	total: 0,
	param: {
		keyword: '',
		type: '',
		status: undefined as number | undefined,
		pageNum: 1,
		pageSize: 10,
	},
});

// 获取资产类型标签类型
const getTypeTagType = (type: string) => {
	const typeMap: Record<string, string> = {
		physical: 'primary',
		virtual: 'success',
		service: 'warning',
	};
	return typeMap[type] || 'info';
};

// 获取资产类型标签文本
const getTypeLabel = (type: string) => {
	const labelMap: Record<string, string> = {
		physical: '实物',
		virtual: '虚拟',
		service: '服务',
	};
	return labelMap[type] || type;
};

// 获取资产列表
const getAssetList = () => {
	tableData.loading = true;
	const params = {
		...tableData.param,
		status: tableData.param.status !== undefined ? tableData.param.status : undefined,
	};
	listAssets(params)
		.then((res: any) => {
			tableData.data = res.data?.list ?? [];
			tableData.total = res.data?.total ?? 0;
		})
		.catch(() => {
			tableData.data = [];
			tableData.total = 0;
		})
		.finally(() => {
			tableData.loading = false;
		});
};

// 重置查询
const onResetQuery = () => {
	tableData.param.keyword = '';
	tableData.param.type = '';
	tableData.param.status = undefined;
	tableData.param.pageNum = 1;
	getAssetList();
};

// 状态切换
const onStatusChange = (row: AssetRow) => {
	updateAssetStatus(row.id, row.status)
		.then(() => {
			ElMessage.success('状态更新成功');
		})
		.catch(() => {
			// 失败时恢复原状态
			row.status = row.status === 1 ? 0 : 1;
		});
};

// 删除
const onRowDel = (row: AssetRow) => {
	ElMessageBox.confirm(`此操作将永久删除资产："${row.name}"，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			deleteAsset(row.id).then(() => {
				ElMessage.success('删除成功');
				getAssetList();
			});
		})
		.catch(() => {});
};

// 打开新增弹窗
const onOpenAdd = () => {
	editAssetRef.value.openDialog();
};

// 修改
const onEdit = (row: AssetRow) => {
	editAssetRef.value.openDialog(row, true);
};

// 管理SKU
const onAddSku = (row: AssetRow) => {
	skuDialogRef.value.openDialog({
		id: row.id,
		name: row.name,
		type: row.type,
		unlimitedStock: row.unlimitedStock,
	});
};

// 查看日志
const onViewLog = (row: AssetRow) => {
	operationLogRef.value?.openDialog(row.id);
};

// 分页大小改变
const onSizeChange = (size: number) => {
	tableData.param.pageSize = size;
	tableData.param.pageNum = 1;
	getAssetList();
};

// 当前页改变
const onCurrentChange = (pageNum: number) => {
	tableData.param.pageNum = pageNum;
	getAssetList();
};

onMounted(() => {
	getAssetList();
});
</script>

<style scoped lang="scss">
.assets-asset-container {
	.assets-asset-search {
		display: flex;
		flex-wrap: wrap;
	}
}
</style>
