<template>
	<view class="invoice_list">
		<view class="bar_list">
			<view v-for="(item,index) in bar_list" :key="index" @click="BarClick(item.value)" class="bar"
				:class="item.value === active_bar ? 'active_bar' : '' ">{{item.name}}</view>
		</view>
		<view class="button_row"><button @click="AddClick()" class="mini-btn"
				style="background-color:#99dcff; color: #006597;" size="mini">申请开票</button></view>
		<view class="litem" v-for="(item,index) in list" :key="index" @click="goto(item.id)">
			<view class="litem_row1">
				<view>{{item.shenqing_time.substring(0,10)}} 申请发票</view>
				<view>
					<uni-tag v-if="item.status==2" text="已开票" type="success" />
					<uni-tag v-if="item.status==1" text="待处理" type="warning" />
					<uni-tag v-if="item.status==0" text="已拒绝" type="error" />
				</view>
			</view>
			<view class="litem_row2">申请金额：￥{{item.price}}</view>
			<view class="jujueyuanyin" v-if="item.status==0">拒绝原因：{{item.refuse_content}}</view>
		</view>
		<view v-if="list.length==0" class="zanwu"><uni-icons color="#ccc"  type="close" size="30"></uni-icons><view>暂无内容</view></view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from "vue"
	import {InvoiceGetList} from "@/api"
	let bar_list = [{
		name: '全部',
		value: 9
	}, {
		name: '待处理',
		value: 1
	}, {
		name: '已开票',
		value: 2
	}, {
		name: '被拒绝',
		value: 0
	}]
	let active_bar = ref(9)
	//点击顶部导航
	const BarClick = (e) => {
		active_bar.value = e
		GetList()
	}
	const AddClick = () => {
		uni.navigateTo({
			url: '/pages/invoice/edit'
		})
	}
	const goto=(id)=>{
		uni.navigateTo({
			url: '/pages/invoice/detail?id='+id
		})
	}
	let list = ref([])
	const GetList=()=>{
		InvoiceGetList({status:active_bar.value}).then(res => {
			if(res.status){
				list.value=res.data
			} 
		})
	}
	onMounted(()=>{
		GetList()
	})
</script>

<style scoped>
	.invoice_list {
		padding: 20rpx;
	}

	.bar_list {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.bar {
		padding: 15rpx 20rpx;
		width: 100%;
		text-align: center;
		border-radius: 20rpx;
		color: #999999;
		font-weight: 700;
		font-size: 25rpx;

	}

	.active_bar {
		background-color: #c1e5ff;
		color: #0083c5;
	}

	.button_row {
		width: 100%;
		text-align: right;
		margin-top: 10rpx;
	}

	.litem {
		font-size: 25rpx;
		color: #676767;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.litem_row1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.litem_row2 {
		margin-bottom: 10rpx;
		width: 100%;
		/* text-align: right; */
	}

	.jujueyuanyin {
		color: #2a8abd
	}
	.zanwu{
		color: #ccc;
		text-align: center;
		margin-top: 80rpx;
		font-size: 28rpx;
	}
</style>