<template>
	<div class="app-container nationalEconomies">
		<div class="content">
			<div class="combined-title">
				<div class="title-right">
					<div class="tab">
						<div style="position:relative" v-for="(itme,i)  in personnelList"
							:class="itme.status==true?'active':'' " :key='i' @click="personnelListbtn(i)">
							<p>{{itme.value}}</p>
							<img v-if="i==1" style="position: relative;top:-10px;width:80px;height:16px;" src="@/assets/images/owner/tip.png" alt="">
						</div>
					</div>
					
				</div>
			</div>
			<p class="solid"></p>
		</div>
		<!-- <div class="header">
			<el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="查城投平台" name="first"></el-tab-pane>
				<el-tab-pane  name="second">
					<span slot="label"><img  style="position: absolute;top:-10px;width:80px;height:16px;right:0;" src="@/assets/images/owner/tip.png" alt="">查企业</span>
				</el-tab-pane>
				<el-tab-pane label="查集团户" name="third"></el-tab-pane>
			</el-tabs>
		</div> -->
		<!-- 查业主单位 -->
		<!-- <Owner v-if="activeName === 'first'" /> -->
		<!-- 查企业 -->
		<!-- <SearchEnterprise v-if="activeName === 'second'" /> -->
		<!-- 查集团户 -->
		<!-- <Group v-if="activeName === 'third'" /> -->
		<!-- 查业主单位 -->
		<Owner v-if="personnelHerf=='Owner'" />
		<!-- 查企业 -->
		<SearchEnterprise v-if="personnelHerf=='SearchEnterprise'" />
		<!-- 查企业 -->
		<Group v-if="personnelHerf=='Group'" />

		
		

	</div>
</template>
<script>
	import SearchEnterprise from "./components/SearchEnterprise/index.vue";
	import Owner from "./components/Owner/index.vue";
	import Group from "./components/Group/index.vue";

	
	import "@/assets/styles/public.css";
	export default {
		name: 'EnterpriseData',
		components: { SearchEnterprise,Owner,Group },
		data() {
			return {
				activeName:'first',
				// tablist
				personnelList: [{
						key: 'Owner',
						status: true,
						value: '查城投平台',
					},
					{
						key: 'SearchEnterprise',
						status: false,
						value: '查企业',
					},
					{
						key: 'Group',
						status: false,
						value: '查集团户',
					},

				],

				personnelHerf:'Owner'
			}
		},
		created() {},
		methods: {
			handleClick(){},
			personnelListbtn(index) {
				for (var i = 0; i < this.personnelList.length; i++) {
					this.personnelList[i].status = false;
				}
				this.personnelList[index].status = true;
                this.personnelHerf=this.personnelList[index].key;
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.app-container {
		margin: 12px 24px;
		padding: 0;
		// display: flex;
	}
	// .header{
    //   justify-content: space-between;
    //   background: #FFFFFF;
    //   border-radius: 4px;
    //   color: #232323;
	//   margin-right: 12px;
    //   ::v-deep .el-tabs{
    //     .el-tabs__nav-wrap::after {
    //       position: static !important;
    //     }
    //     .el-tabs__header{
    //       margin: 0;
    //       .el-tabs__item{
    //         padding: 0 16px;
    //         font-size: 16px;
	// 		text-align: left;
    //       }
    //       .is-active{
    //         font-weight: bold;
    //       }
    //     }
    //     .el-tabs__content{
    //       width: 100%;
    //     }
		
	// 	#tab-second{
	// 		// margin-top: 10px;
	// 	}
    //   }
	//   ::v-deep .el-tabs--left{
	// 	overflow: inherit;
	//   }
    //   .location{
    //     font-size: 14px;
    //     color: #0081FF;
    //     i{
    //       margin-right: 6px;
    //       font-size: 16px;
    //     }
    //   }
    // }
	.content{
		padding: 0px 16px;
       background: #FFFFFF;
	   position: relative;
		
	}

	.app-container .combined-title {
		display: flex;
		padding-top: 16px;
		align-items: center
	}

	.app-container .combined-title .title-icon {
		display: inline-block;
		width: 6px;
		height: 26px;
		background: #0081FF;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		margin-right: 18px;
	}

	.app-container .combined-title .title-right {
		display: flex;
		width: 100%;
		position: relative;
		height: 40px;
	}

	.app-container .combined-title .title-right .title-text {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		line-height: 40px;
	}

	.app-container .combined-title .title-right .title-add {
		color: #0081FF;
		cursor: pointer;
		position: absolute;
		right: 0;
	}

	.app-container .combined-title .title-right .title-addyj {
		top: 5px;
	}

	.app-container .combined-title .title-right .title-add .add-img {
		position: relative;
		top: -1px;
		margin-right: 6px;
	}

	.app-container .content  .solid {
		width: 100%;
		height: 1px;
		background-color: #EEEEEE;
		position: absolute;
		bottom: 1px;
		left: 0;
		z-index: 1;
	}
	.tab {
		display: flex;
		z-index: 2;
	}

	.tab_p_32 {
		padding-right: 32px;
		padding-left: 32px;
	}

	.tab div {
		cursor: pointer;
		color: #666666;
		font-size: 16px;
		text-align: center;
		margin-right: 32px;
		
	}

	.tab div p {
		display: inline-block;
		padding: 0px;
		padding-bottom: 16px;

	}

	.tab div .logo {
		color: #fff;
		font-weight: 400;
		font-size: 10px;
		position: absolute;
		top: -6px;
		right: -24px;
		display: inline-block;
		line-height: 14px;
		padding: 1px 2px;
		text-align: center;
		background: #3663DE;
		border-radius: 2px 2px 2px 2px;

	}

	.tab div .triangle {
		display: inline-block;
		width: 0px;
		height: 0px;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 4px solid #3663DE;
		position: absolute;
		top: 9.5px;
		right: -3px;
	}

	 .tab .active {
		color: #0081FF;
	}

	 .tab .active .triangle {
		border-top: 4px solid #0081FF;
	}

	 .tab .active .logo {
		background: #0081FF;
	}

	 .tab .active p {
		border-bottom: 2px solid #0081FF;
		font-weight: bold;
	}
</style>