<template>
	<transition name="el-zoom-in-center">
		<div class="NCC-preview-main">
			<div class="NCC-common-page-header">
				<el-page-header @back="goBack" :content="dataForm.cpmc || '产品详情'" />
				<div class="options">
					<el-button type="primary" @click="editProduct()">编辑产品</el-button>
					<el-button @click="goBack">返 回</el-button>
				</div>
			</div>
			<div class="main" :style="{margin: '0 auto',width:'100%'}">
				<!-- 产品基本信息 -->
				<div class="info-section">
					<el-card shadow="never">
						<div slot="header">
							<span>产品信息</span>
						</div>
						<el-form :model="dataForm" label-width="100px">
							<el-row :gutter="20">
								<el-col :span="6">
									<el-form-item label="产品编号">
										<p class="text">{{ dataForm.id || '-' }}</p>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="产品ID">
										<p class="text">{{ dataForm.cpid || '-' }}</p>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="产品名称">
										<p class="text">{{ dataForm.cpmc || '-' }}</p>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="规格型号">
										<p class="text">{{ dataForm.cpxh || '-' }}</p>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>
				</div>
				
				<!-- Tab 页展示关联信息 -->
				<div class="tabs-section">
					<el-tabs v-model="activeTab" type="border-card">
						<el-tab-pane label="产品资料管理" name="zlgl">
							<ZlglList :productId="productId" />
						</el-tab-pane>
						<el-tab-pane label="备件支持" name="bjxx">
							<BjxxList :productId="productId" />
						</el-tab-pane>
						<el-tab-pane label="故障查询" name="gzcx">
							<GzcxList :productId="productId" />
						</el-tab-pane>
						<el-tab-pane label="宣传产品" name="xccpgl">
							<XccpglList :productId="productId" />
						</el-tab-pane>
						<el-tab-pane label="培训展示" name="pxzs">
							<PxzsList :productId="productId" />
						</el-tab-pane>
						<el-tab-pane label="知识库" name="zsk">
							<ZskList :productId="productId" />
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
import request from '@/utils/request'
import ZlglList from './components/ZlglList'
import BjxxList from './components/BjxxList'
import GzcxList from './components/GzcxList'
import XccpglList from './components/XccpglList'
import PxzsList from './components/PxzsList'
import ZskList from './components/ZskList'

export default {
	name: 'CpglDetail',
	components: {
		ZlglList,
		BjxxList,
		GzcxList,
		XccpglList,
		PxzsList,
		ZskList
	},
	data() {
		return {
			activeTab: 'zlgl',
			productId: '',
			dataForm: {
				id: undefined,
				cpid: undefined,
				cpmc: undefined,
				cpxh: undefined,
				cpgg: undefined,
			}
		}
	},
	methods: {
		goBack() {
			this.$emit('close')
		},
		editProduct() {
			this.$emit('edit', this.productId)
		},
		init(id) {
			this.productId = id
			if (id) {
				request({
					url: '/api/Extend/Cpgl/' + id,
					method: 'get'
				}).then(res => {
					this.dataForm = res.data || {}
				}).catch(() => {
					this.$message.error('加载产品信息失败')
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.NCC-preview-main {
	height: 100%;
	display: flex;
	flex-direction: column;
	
	.main {
		flex: 1;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding: 20px;
		
		.info-section {
			flex-shrink: 0;
			margin-bottom: 20px;
			
			.text {
				margin: 0;
				color: #606266;
			}
		}
		
		.tabs-section {
			flex: 1;
			min-height: 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.el-tabs {
				flex: 1;
				min-height: 0;
				display: flex;
				flex-direction: column;
				
				::v-deep .el-tabs__content {
					flex: 1;
					min-height: 0;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					padding: 20px;
					
					.el-tab-pane {
						flex: 1;
						min-height: 0;
						height: 100%;
						overflow: hidden;
					}
				}
			}
		}
	}
}
</style>
