<template>
	<view class="invoice">
		<view class="invoice-bd">
			<view class="item" :class="tabIndex == i?'item-on':''" v-for="i in 5" :key="i" @click="toDetail(i)">
				<view class="hd">
					<view class="l">
						<view class="a">
							<text>单位</text>我是单位名称
						</view>
						<view class="b">
							<text>税号</text>23122-33890099
						</view>
					</view>
					<view class="r">使用</view>
				</view>
				<view class="bd">
					<view class="c" @click="selectItem(i)">
						<image v-if="tabIndex == i" src="/static/invoice/select-on.png"></image>
						<image v-else src="/static/invoice/select.png"></image>
						{{tabIndex == i?'已设为默认':'设为默认'}}
					</view>
					<view class="d">
						<text>编辑</text>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="invoice-fd">
			<text>+</text>添加发脾抬头
		</view>
		<empty v-if="isShow" :isLoading="isLoading" tips="暂无相关信息" />
	</view>
</template>

<script>
	import Empty from '@/components/empty'
	export default {
		data() {
			return {
				isLoading: false,
				tabIndex: 1,
				isShow: true
			};
		},
		components: {
		  Empty
		},
		methods: {
			selectItem(i){
				this.tabIndex = i
			},
			toDetail(i){
				uni.navigateTo({
					url: "/pages/invoice/detail"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.invoice{
	padding: 0 0 30rpx;
	overflow: hidden;
	&-bd{
		overflow: hidden;
		.item{
			padding: 10rpx 14rpx 10rpx 60rpx;
			box-sizing: border-box;
			overflow: hidden;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			&:first-child{
				margin-top: 0;
			}
			.hd{
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow: hidden;
				border-bottom: 1px solid #F3F3F3;
				.a{
					padding-top: 15rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #262626;
					text{
						width: 98rpx;
						height: 44rpx;
						background: #FDF4F4;
						border-radius: 8rpx;
						text-align: center;
						display: block;
						margin-right: 30rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #E02E24;
						line-height: 44rpx;
					}
				}
				.b{
					padding: 20rpx 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #838383;
					text{
						color: #262626;
						margin-right: 30rpx;
					}
				}
				.r{
					width: 104rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					text-align: center;
					line-height: 60rpx;
					border: 1px solid #CACACA;
					font-size: 28rpx;
					font-weight: 400;
					color: #555555;
				}
			}
			.bd{
				padding: 20rpx 0;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.c{
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #A2A2A2;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 30rpx;
					}
				}
				.d{
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #B8B8B8;
					text{
						margin-left: 30rpx;
						cursor: pointer;
					}
				}
			}
			&-on{
				.bd .c{
					color: #E02E24;
				}
			}
		}
		
	}
	&-fd{
		width: 664rpx;
		height: 104rpx;
		background: #F55349;
		border-radius: 8rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size: 60rpx;
			margin-right: 14rpx;
			margin-top: -5px;
		}
	}
}
</style>
