<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="wrap_addshares">
				<div class="handleBtn">
					<el-button type="primary">发起审批</el-button>
					<el-button type="primary">保存转发</el-button>
					<el-button type="primary">调用模板</el-button>
					<el-button type="primary">存为模板</el-button>
					<el-button type="primary" style="margin-left: auto">查看流程</el-button>
				</div>

				<div class="formBox">
					<el-form :model="form" class="demo-form-inline">
						<el-form-item label="标题">
							<el-input v-model="form.title" placeholder="请输入标题"></el-input>
						</el-form-item>
						<el-form-item label="描述">
							<el-input v-model="form.description" placeholder="请输入描述"></el-input>
						</el-form-item>
						<el-form-item label="上传附件">
							<el-upload
								action="#"
								list-type="text"
								:limit="3"
								:file-list="[]"
								:before-upload="
									(file) => {
										return false;
									}
								"
							>
								<el-button size="small" type="primary">点击上传</el-button>
								<template v-slot:tip>
									<span class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
								</template>
							</el-upload>
						</el-form-item>
					</el-form>
				</div>

				<div class="itemInfo">
					<div class="title">参控股管理登记</div>
					<div class="collapseBox">
						<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<el-tab-pane label="基本信息" name="first">User</el-tab-pane>
						<el-tab-pane label="公司股权结构情况" name="second">Config</el-tab-pane>
						<el-tab-pane label="参股投资项目基本情况" name="third">Role</el-tab-pane>
						<el-tab-pane label="上级单位委派人员履职情况" name="fourth">Task</el-tab-pane>

					</el-tabs> -->
						<el-collapse v-model="activeNames" @change="handleChange">
							<el-collapse-item name="1">
								<template #title>
									<div class="titleBox">基本信息</div>
								</template>
								<BaseInfo />
							</el-collapse-item>
							<el-collapse-item name="2">
								<template #title>
									<div class="titleBox">公司股权结构情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '股东名称', prop: 'companyName' },
										{ label: '股东社会统一社会信用代码', prop: 'shareholderName' },
										{ label: '股东组织形式', prop: 'shareholderType' },
										{ label: '股东性质', prop: 'subscriptionAmount' },
										{ label: '股东比列', prop: 'paidAmount' },
									]"
								/>
							</el-collapse-item>
							<el-collapse-item name="3">
								<template #title>
									<div class="titleBox">参股投资项目基本情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '项目名称', prop: 'companyName' },
										{ label: '项目主体单位', prop: 'shareholderName' },
										{ label: '投资类别', prop: 'shareholderType' },
										{ label: '项目地址', prop: 'subscriptionAmount' },
										{ label: '项目开始时间', prop: 'paidAmount' },
										{ label: '项目结束时间', prop: 'paidAmount' },
										{ label: '项目总投资金额(万元)', prop: 'paidAmount' },
										{ label: '我方项目总投资金额(万元)', prop: 'paidAmount' },
									]"
								/>
							</el-collapse-item>
							<el-collapse-item name="4">
								<template #title>
									<div class="titleBox">上级单位委派人员履职情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '委派单位', prop: 'companyName' },
										{ label: '姓名', prop: 'shareholderName' },
										{ label: '履职岗位', prop: 'shareholderType' },
										{ label: '履职时间', prop: 'subscriptionAmount' },
										{ label: '性别', prop: 'paidAmount' },
										{ label: '政治面貌', prop: 'paidAmount' },
									]"
								/>
							</el-collapse-item>
							<el-collapse-item name="5">
								<template #title>
									<div class="titleBox">财务经营情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '年度', prop: 'companyName' },
										{ label: '经营状况', prop: 'shareholderName' },
									]"
								/>
							</el-collapse-item>
							<el-collapse-item name="6">
								<template #title>
									<div class="titleBox">投资收益情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '年度', prop: 'companyName' },
										{ label: '经营状况', prop: 'shareholderName' },
									]"
								/>
							</el-collapse-item>
							<el-collapse-item name="7">
								<template #title>
									<div class="titleBox">分类监管情况</div>
								</template>
								<EquityStructureSituation
									:tableColunms="[
										{ label: '监管类别', prop: 'companyName' },
										{ label: '监管要求', prop: 'shareholderName' },
										{ label: '执行情况', prop: 'shareholderName' },
									]"
								/>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
// import { TabsPaneContext } from 'element-plus';
import type { CollapseModelValue } from 'element-plus';
import BaseInfo from './baseInfo.vue';
import EquityStructureSituation from './EquityStructureSituation.vue';

const activeNames = ref(['1']);
const handleChange = (val: CollapseModelValue) => {
	console.log(val);
};

const form = reactive({
	title: '',
	description: '',
	establishmentDate: '',
});
// const activeName = ref('first');

// const handleClick = (tab: TabsPaneContext, event: Event) => {
// 	console.log(tab, event);
// };
</script>

<style scoped>
.wrap_addshares {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.handleBtn {
	display: flex;
	margin-bottom: 20px;
}
.itemInfo {
	margin-top: 20px;
	.title {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 10px;
		text-align: center;
	}
	:deep(.el-collapse) {
		.titleBox {
			border-left: 6px solid #409eff;
			padding: 0px 4px;
			height: 44px;
		}
	}
}
</style>
