<template>
	<div class="related-list-container">
		<div class="NCC-common-head">
			<div>
				<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
			</div>
			<div class="NCC-common-head-right">
				<el-tooltip effect="dark" content="刷新" placement="top">
					<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="initData()" />
				</el-tooltip>
			</div>
		</div>
		<NCC-table v-loading="listLoading" :data="list">
			<el-table-column prop="zlm" label="资料名称" align="left" />
			<el-table-column prop="sbbh" label="资产编码" align="left" />
			<el-table-column label="关联产品" prop="fl" align="left">
				<template slot-scope="scope">
					{{ getProductName(scope.row.fl) }}
				</template>
			</el-table-column>
			<el-table-column prop="fbsj" label="发布日期" align="left">
				<template slot-scope="scope">
					{{ scope.row.fbsj | dateFormat('YYYY-MM-DD HH:mm') }}
				</template>
			</el-table-column>
			<el-table-column prop="bh" label="资料版本" align="left" />
			<el-table-column label="操作" fixed="right" width="100">
				<template slot-scope="scope">
					<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
					<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除</el-button>
				</template>
			</el-table-column>
		</NCC-table>
		<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
		<NCC-Form v-if="formVisible" :key="formKey" ref="NCCForm" @refresh="refresh" />
	</div>
</template>

<script>
import request from '@/utils/request'
import NCCForm from '@/views/zlgl/Form'

export default {
	name: 'ZlglList',
	components: { NCCForm },
	props: {
		productId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			list: [],
			listLoading: false,
			total: 0,
			listQuery: {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			},
			formVisible: false,
			formKey: 0, // 用于强制重新渲染表单组件
			cpglOptions: []
		}
	},
	watch: {
		productId: {
			immediate: true,
			handler() {
				if (this.productId) {
					this.initData()
				}
			}
		}
	},
	created() {
		this.getCpglOptions()
	},
	methods: {
		getCpglOptions() {
			request({
				url: '/api/Extend/Cpgl',
				method: 'GET',
				data: { currentPage: 1, pageSize: 1000 }
			}).then(res => {
				this.cpglOptions = res.data.list || []
			}).catch(() => {
				this.cpglOptions = []
			})
		},
		getProductName(productId) {
			if (!productId) return '--';
			const product = this.cpglOptions.find(item => item.id === productId);
			return product ? (product.cpmc || '--') : '--';
		},
		initData() {
			if (!this.productId) return
			this.listLoading = true
			let query = {
				...this.listQuery,
				fl: this.productId // 自动筛选当前产品
			}
			request({
				url: `/api/Extend/Zlgl`,
				method: 'GET',
				data: query
			}).then(res => {
				this.list = res.data.list || []
				this.total = res.data.pagination ? res.data.pagination.total : 0
				this.listLoading = false
			}).catch(() => {
				this.list = []
				this.total = 0
				this.listLoading = false
			})
		},
		handleDel(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/Zlgl/${id}`,
					method: 'DELETE'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg,
						onClose: () => {
							this.initData()
						}
					})
				})
			}).catch(() => {})
		},
		addOrUpdateHandle(id) {
			console.log('ZlglList addOrUpdateHandle called with id:', id);
			// 先关闭表单（如果已打开），确保组件重新创建
			this.formVisible = false;
			// 更新 key 值，强制重新创建组件
			this.formKey = Date.now();
			this.$nextTick(() => {
				this.formVisible = true;
				this.$nextTick(() => {
					if (this.$refs.NCCForm) {
						this.$refs.NCCForm.init(id, false);
					}
				});
			});
		},
		refresh(isrRefresh) {
			this.formVisible = false
			if (isrRefresh) {
				this.initData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.related-list-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	
	.NCC-common-head {
		margin-bottom: 10px;
	}
}
</style>
