<template>
	<!-- <view>发票中心</view> -->
	<view class="box flex">
		<view class="con-center flex flex-column justify-center align-items">
			<view class="tabs align-items">
				<span class="s-header flex flex-column" v-for="(item, index) in headers" :key="index"
					:class="{ selected: headerSelected(item.index) }" @click="selectheader(item.index)">
					{{ item.text }}
					<span class="lines" :class="{ selected: headerSelected(item.index) }"></span>
				</span>
			</view>
	
			<view style="min-height: 100vh;margin-top: 80rpx;width: 100%;">
				<!-- 合开发票 -->
				<view v-if="selected == 0">
					<view class="invoiceList" >
						<view class="invoiceList-item flex">
							<view class="changedBox">
								<view class="changedBox-Img">
									<image v-if="invoiceCheck == 0" style="width: 44rpx;height: 44rpx;" src="../../static/fabu/nocheck.png" mode=""></image>
									<image v-else style="width: 44rpx;height: 44rpx;" src="../../static/fabu/check.png" mode=""></image>
								</view>
							</view>
							<view class="item-img">
								<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png" mode=""></image>
							</view>
							<view class="item-con">
								<view class="itenCon-actName" style="">活动名</view>
								<view class="itenCon-actPrice" style="">￥ 价格</view>
							</view>
						</view>
					</view>
					<view class="invoiceBtn">
						<view>申请开票</view>
					</view>
				</view>
				
				<!-- 提交记录 -->
				<view class="recordList" v-else-if="selected == 1">
					<view class="record-tabs">
						<span class="s-header flex flex-column" v-for="(item, index) in recordTypeList" :key="index"
							:class="{ selected: recordIndexSelected(item.index) }" @click="selecRecordIndex(item.index)">
							{{ item.text }}
							<!-- <span class="lines" ></span> -->
						</span>
					</view>
					<!-- v-if="item[index].length == 1" -->
					<view class="recordList-item flex">
						<view class="item-img2">
							<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png" mode=""></image>
						</view>
						<view class="item-con2">
							<view class="itenCon2-actName">名字</view>
							<view class="itenCon2-actPrice">
								<view>￥ 价格</view>
								<view class="lookInvoice">
									<text>查看发票</text>
									<u-icon name="arrow-right"></u-icon>
								</view>
								<!-- <view class="lookInvoice2">
									<text >开票中</text>
								</view> -->
								</view>
						</view>
					</view>
					<!-- v-if="item[index].length > 1" -->
					<view class="recordList-items flex">
						<!-- <view></view> -->
						<view class="reListIts-item flex">
							<view class="itsItem-img2">
								<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png" mode=""></image>
							</view>
							<view class="itsItem-con2">
								<view class="itsItemCon2-actName">名字</view>
								<view class="itsItemCon2-actPrice">
									<view>￥ 价格</view>
								</view>
							</view>
							
							
						</view>
						<view class="reListIts-item flex">
							<view class="itsItem-img2">
								<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png" mode=""></image>
							</view>
							<view class="itsItem-con2">
								<view class="itsItemCon2-actName">名字</view>
								<view class="itsItemCon2-actPrice">
									<view>￥ 价格</view>
								</view>
							</view>
							
							
						</view>
						
						<view class="reLine"></view>
						<view class="reListIts-itemData">
							<view>2个订单  发票金额：￥1213</view>
							<!-- <view class="lookInvoices">
								<text>查看发票</text>
								<u-icon name="arrow-right"></u-icon>
							</view> -->
							<view class="lookInvoices2">
								<text >开票中</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 抬头管理 -->
				<view class="manageList" v-else>
					<view class="manageList-recordCon">
						<view class="record-image"></view>
						<view class="record-text"></view>
					</view>
					<view class="manageList-item flex">
						<view class="item-con3">
							<view class="itenCon3-actName" style="">活动名</view>
							<view class="itenCon3-actPrice" style="">￥ 价格</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="flex flex-column flex-start align-items" v-if="list.length == 0"
					style="margin-top: 300rpx;">
					<image src="/static/message/activen.png" mode="" style="width: 180rpx;height: 180rpx;">
					</image>
					<view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">暂无参与活动</view>
					<view class="tofb" @click="tofb">参与活动</view>
				</view> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupStyle: {
					width: '690rpx',
					margin: '0 auto', // 水平居中
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center',
					padding: '0',
					borderRadius: '20rpx'
				},
				size: 13,
				sortStyle: ['#ff557f', '#3f3f3f'],
				selected:'0',
				headers: [
					{
						index: '0',
						text: '合开发票'
					},
					{
						index: '1',
						text: '提交记录'
					},
					{
						status: '2',
						text: '抬头管理'
					}
				],
				invoiceCheck: '0',//和开发票选中状态：0未选中，1选中
				recordTypeList: [
					{
						index: '0',
						text: '全部'
					},
					{
						index: '1',
						text: '已开票'
					},
					{
						index: '2',
						text: '未开票'
					}
				],//提交记录的tabs数据
				recordeIndex: '0',//提交记录的tabs选中
			};
		},
		onLoad(option) {	
		},
		onShow() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			
		},
	
		methods: {
			selectheader(index) {
				const that = this;
				that.selected = index;
				console.log(index, '')
			},
			headerSelected(index) {
				console.log('index',index);
				return this.selected === index;
			},
			selecRecordIndex(index) {
				const that = this;
				that.recordeIndex = index;
				console.log(index, '')
			},
			recordIndexSelected(index) {
				console.log('index',index);
				return this.recordeIndex === index;
			},
		}
			
	}
</script>

<style lang="scss" scoped>
	.box {

		background: #f5f5f5;

		.con-center {
			width: 100%;
			height: 100%;
			// margin-top: 25rpx;
			// overflow: hidden;

			.tabs {
				background: #ffffff;
				width: 100%;
				display: flex;
				overflow-x: auto;
				// margin-top: 10rpx;
				-webkit-overflow-scrolling: touch;
				font-family: PingFang SC, PingFang SC;
				position: fixed;
				top: 0;
				
				

				.s-header {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 33.3%;
					height: 80rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #9E9E9E;
					
					line-height: 26rpx;
					flex: 0 0 auto;
					position: relative;
				}

				.s-header.selected {
					width: 33.3%;
					height: 80rpx;
					background: #ffffff;
					font-weight: 800;
					font-size: 32rpx;
					color: #323232;
					line-height: 28rpx;
				}

				.lines {
					position: absolute;
					bottom: 0;
					width: 44rpx;
				}

				.lines.selected {
					border-bottom: #323232 solid 8rpx;
				}
			}
			
			.invoiceList {
				width: 100%;
				height: auto;
				
				.invoiceList-item {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #ffffff;
					width: 91%;
					margin-top: 20rpx;
					padding: 20rpx 30rpx;
					height: 220rpx;
					
					.changedBox {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						
						.changedBox-Img {
							width: 44rpx;
							height: 44rpx;
						}
					}
					
					.item-img {
						width: 170rpx;
						height: 170rpx;
						margin-left: 40rpx;
						
					}
					
					.item-con {
						margin-left: 20rpx;
						width: 60%;
						height: 160rpx;
						position: relative;
						color: #323232;
						
						.itenCon-actName {
							position: absolute;
							top: 0;
							font-size: 28rpx;
							font-weight: 400;
						}
						
						.itenCon-actPrice {
							position: absolute;
							bottom: 0;
							font-size: 32rpx;
							font-weight: 900;
						}
					}
					

				}
			}
			
			.invoiceBtn {
				width: 90%;
				height: 90rpx;
				background-color: #323232;
				border-radius: 148rpx;
				color: #BBFC5B;
				font-size: 36rpx;
				font-weight: 400;
				line-height: 50rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				text-transform: none;
				font-style: normal;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				position: fixed;
				bottom: 66rpx;
				margin-left: 5%;
			}
			
			
			.recordList {
				width: 100%;
				height: auto;
				display: block;
				justify-content: center;
				
				.record-tabs {
					// background: #ffffff;
					width: 100%;
					display: flex;
					overflow-x: auto;
					margin: 10rpx 0 20rpx 0;
					border-radius: 30rpx;
					-webkit-overflow-scrolling: touch;
					font-family: PingFang SC, PingFang SC;
					
					
					.s-header {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 150rpx;
						height: 80rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #9E9E9E;
						border-radius: 40rpx;
						
						line-height: 26rpx;
						flex: 0 0 auto;
						position: relative;
					}
					
					.s-header.selected {
						width: 150rpx;
						height: 80rpx;
						background: #ffffff;
						// font-weight: 800;
						// font-size: 32rpx;
						color: #323232;
						line-height: 28rpx;
					}
					
				}
				
				.recordList-item {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #ffffff;
					width: 91%;
					margin-top: 20rpx;
					padding: 20rpx 30rpx;
					height: 220rpx;
					
					.item-img2 {
						width: 170rpx;
						height: 170rpx;
						// margin-left: 40rpx;
						
					}
					
					.item-con2 {
						margin-left: 30rpx;
						width: 65%;
						height: 160rpx;
						position: relative;
						color: #323232;
						
						.itenCon2-actName {
							position: absolute;
							top: 0;
							font-size: 28rpx;
							font-weight: 400;
						}
						
						.itenCon2-actPrice {
							width: 100%;
							position: absolute;
							bottom: 0;
							font-size: 32rpx;
							font-weight: 900;
							display: flex;
							justify-content: space-between;
							
							.lookInvoice {
								width: 200rpx;
								display: flex;
								position: absolute;
								right: -15%;
								font-weight: 400;
								font-size: 28rpx;
							}
							
							.lookInvoice2 {
								width: 200rpx;
								color: #ff4810;
								display: flex;
								position: absolute;
								right: -15%;
								font-weight: 400;
								font-size: 28rpx;
							}
						}
					}
				}
				
				.recordList-items {
					display: block;
					background-color: #ffffff;
					width: 91%;
					margin-top: 20rpx;
					padding: 20rpx 30rpx;
					height: 220rpx auto;
					
					.reListIts-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						margin-bottom: 20rpx;
						// background-color: #9E9E9E;
						
						.itsItem-img2 {
							width: 170rpx;
							height: 170rpx;
							// margin-left: 40rpx;
							
						}
						
						.itsItem-con2 {
							margin-left: 30rpx;
							width: 65%;
							height: 160rpx;
							position: relative;
							color: #323232;
							
							.itsItemCon2-actName {
								position: absolute;
								top: 0;
								font-size: 28rpx;
								font-weight: 400;
							}
							
							.itsItemCon2-actPrice {
								width: 100%;
								position: absolute;
								bottom: 0;
								font-size: 32rpx;
								font-weight: 900;
								display: flex;
								justify-content: space-between;
								
								.lookInvoice {
									width: 200rpx;
									display: flex;
									position: absolute;
									right: -15%;
									font-weight: 400;
									font-size: 28rpx;
								}
								
								.lookInvoice2 {
									width: 200rpx;
									color: #ff4810;
									display: flex;
									position: absolute;
									right: -15%;
									font-weight: 400;
									font-size: 28rpx;
								}
							}
						}
					}
					
					.reLine {
						width: 100%;
						height: 1rpx;
						background-color: #D8D8D8;
						margin: 10rpx 0;
						
					}
					
					.reListIts-itemData {
						width: 100%;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.lookInvoices {
							width: 200rpx;
							display: flex;
							position: relative;
							right: -11%;
							font-weight: 400;
							font-size: 28rpx;
						}
						
						.lookInvoices2 {
							width: 200rpx;
							color: #ff4810;
							display: flex;
							position: relative;
							right: -11%;
							font-weight: 400;
							font-size: 28rpx;
						}
					}
				}
			}
			
			.manageList {
				// padding-top: 20rpx;
				
				.manageList-recordCon {
					display: flex;
					justify-content: center;
					// color: #EB1B1B;
					// font-size: 28rpx;
					// font-weight: 400;
					width: 100%;
					margin: 30rpx 20rpx;
					
					.record-image {
						width: 36rpx;
					}
					
					.record-text {
						color: #EB1B1B;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
				
			}
			
		}

	}

	
	.flex {
		display: flex;
	}



	.justify-center {
		justify-content: center;
	}

	.flex-between {
		justify-content: space-between;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.line {
		width: 630rpx;
		height: 1rpx;
		background: #F0F0F0;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 30rpx;
	}

</style>