<template>
	<BaseContainer class="invoice-list flex flex-center-y">
		<NavBar title="申请开票" />
		<view class="invoice-content">
			<view class="invoice-tab-list flex flex-center-x">
				<view v-for="(item, index) in tabList" :key="index" class="invoice-tab" :class="{ active: activeTab === item }" @click="activeTab = item">{{ item }}</view>
			</view>
			<view v-if="activeTab === tabList[0]"class="apply-invoicing-list">
				<view v-for="(item, index) in applyInvoicingList" :key="index" class="apply-invoicing-item">
					<view class="item-head flex flex-center-x">
						<text :style="item.header_type === '企业' ? 'background: #FEE1E1;color: #FF5C6B;' : 'background: #F3F6FD;color: #1C92E7;'">{{ item.header_type }}</text>
						<text>{{ item.invoice_header }}</text>
						<text :style="item.status === 0 ? 'color: #FF2825;' : 'color: #999999'">{{ item.status === 0 ? '申请中' : '已完成' }}</text>
					</view>
					<view class="item-content">
						<view class="content-money">开票金额：<text>￥{{ item.invoice_amount }}</text></view>
						<view class="content-time">开票时间：{{ item.created_at }}</view>
					</view>
				</view>
			</view>
			<view v-else class="invoice-header-list">
				<view v-for="(item, index) in invoiceHeaderList" :key="index" class="invoice-header-item">
					<view class="item-head flex flex-center-x">
						<text :style="item.header_type === 2 ? 'background: #FEE1E1;color: #FF5C6B;' : 'background: #F3F6FD;color: #1C92E7;'">{{ item.header_type === 1 ? '个人' : '企业' }}</text>
						<text>{{ item.invoice_header }}</text>
						<text @click="editHeader(item)">编辑</text>
					</view>
					<view class="item-content">
						普通发票-{{ item.header_type === 1 ? '个人' : '企业' }}抬头
					</view>
				</view>
			</view>
			<view v-if="activeTab === tabList[1]" class="add-header" @click="addHeader">添加新的抬头</view>
		</view>
	</BaseContainer>
</template>

<script>
	import { getApplyInvoicingList, getInvoiceHeaderList } from '@/api/store';
	export default {
		data() {
			return {
				tabList: [
					'开票申请',
					'发票抬头',
				],
				activeTab: '开票申请',
				applyInvoicingList: [
					{ type: '企业' , name: '南京梦航教育有限公司', status: 0, money: '1202.00', time: '2023-10-10 12:30:34' },
					{ type: '个人' , name: '张三', status: 1, money: '1202.00', time: '2023-10-10 12:30:34' },
				],
				invoiceHeaderList: [
					{ type: '企业' , name: '南京梦航教育有限公司' },
					{ type: '个人' , name: '张三' },
				]
			};
		},
		watch: {
			activeTab: {
				handler() {
					if (this.activeTab === '开票申请') {
						this.getApplyInvoicingList();
					} else {
						this.getInvoiceHeaderList();
					}
				},
				immediate: true,
			}
		},
		onShow() {
			if (this.activeTab === '开票申请') {
				this.getApplyInvoicingList();
			} else {
				this.getInvoiceHeaderList();
			}
		},
		methods: {
			async getApplyInvoicingList() {
				uni.showLoading({
					mask: true,
				});
				try{
					const { data, code, msg } = await getApplyInvoicingList({});
					uni.hideLoading();
					if (code != 200) {
					  uni.showToast({
					    title: msg,
					  });
					} else {
						console.log(data);
						this.applyInvoicingList = data.list;
					}
				}catch(e){
					uni.hideLoading();
					console.log(e);
				}
				
			},
			async getInvoiceHeaderList() {
				uni.showLoading({
					mask: true,
				});
				try{
					const { data, code, msg } = await getInvoiceHeaderList({});
					uni.hideLoading();
					if (code != 200) {
					  uni.showToast({
					    title: msg,
					  });
					} else {
						console.log(data);
						this.invoiceHeaderList = data.list;
					}
				}catch(e){
					uni.hideLoading();
					console.log(e);
				}
			},
			addHeader() {
				uni.navigateTo({
					url: '/pages/store/applyInvoicing',
				});
			},
			editHeader(item) {
				uni.navigateTo({
					url: `/pages/store/applyInvoicing?info=${JSON.stringify(item)}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.invoice-list {
		height: 100vh;
		background: #f5f5f5;
		.invoice-content {
			flex: 1;
			.invoice-tab-list {
				width: 100%;
				height: 96rpx;
				background: #fff;
				justify-content: space-evenly;
				.invoice-tab {
					color: #999999;
					font-size: 30rpx;
					height: 100%;
					line-height: 96rpx;
					position: relative;
					&.active {
						color: #333333;
						&:after {
							content: '';
							position: absolute;
							width: 40rpx;
							height: 6rpx;
							background: linear-gradient(90deg, #24A9E1, #0F74BB);
							border-radius: 3rpx;
							left: 50%;
							transform: translateX(-50%);
							bottom: 13rpx;
						}
					}
				}
			}
			.add-header {
				position: fixed;
				width: 690rpx;
				height: 88rpx;
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient(90deg, #4AA5FA 0%, #0F74BB 100%);
				font-size: 32rpx;
				color: #ffffff;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;
			} 
		}
		.apply-invoicing-list,
		.invoice-header-list {
			height: calc(100% - 96rpx);
			overflow-y: auto;
			padding-top: 20rpx;
			.apply-invoicing-item{
				width: 690rpx;
				height: 228rpx;
				margin: 0 auto 20rpx;
				border-radius: 10rpx;
				background: #fff;
				padding: 0 16rpx;
				.item-head {
					padding: 0 8rpx 0 12rpx;
					height: 88rpx;
					border-bottom: 1px solid #eee;
					>text {
						color: #333333;
						font-size: 28rpx;
						&:nth-child(1) {
							width: 67rpx;
							height: 38rpx;
							border-radius: 6rpx;
							text-align: center;
							line-height: 38rpx;
							font-size: 20rpx;
						}
						&:nth-child(2) {
							flex: 1;
							margin: 0 10rpx;
						}
					}
				}
				.item-content {
					padding-top: 16rpx;
					>view {
						font-size: 28rpx;
						color: #999999;
						padding-left: 12rpx;
						&:first-child {
							margin-bottom: 20rpx;
						}
						text {
							color: #333;
						}
					}
				}
			}
			.invoice-header-item {
				width: 690rpx;
				height: 200rpx;
				margin: 0 auto 20rpx;
				border-radius: 10rpx;
				background: #fff;
				padding: 0 16rpx;
				.item-head {
					padding: 0 8rpx 0 12rpx;
					height: 88rpx;
					border-bottom: 1px solid #eee;
					>text {
						color: #333333;
						font-size: 28rpx;
						&:nth-child(1) {
							width: 67rpx;
							height: 38rpx;
							border-radius: 6rpx;
							text-align: center;
							line-height: 38rpx;
							font-size: 20rpx;
						}
						&:nth-child(2) {
							flex: 1;
							margin: 0 10rpx;
						}
						&:nth-child(3) {
							color: #999;
						}
					}
				}
				.item-content {
					height: calc(100% - 88rpx);
					display: flex;
					align-items: center;
					color: #999;
					font-size: 28rpx;
					padding-left: 12rpx;
				}
			}
		}
		.invoice-header-list {
			height: calc(100% - 226rpx);
		}
	}
</style>