<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input v-model="searchInfo.unit_name" placeholder="发票抬头" style="  margin: auto 20px;" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.tel" placeholder="电话" style="  margin: auto 20px auto 0px;" />
				</el-form-item>
				<el-form-item>
					<el-select clearable placeholder="状态" v-model="searchInfo.status" style="width: 240px">
						<el-option label="申请中" :value="1" />
						<el-option label="已开票" :value="2" />
						<el-option label="已拒绝" :value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 10px;" @click="GetList()">搜索</el-button>
				</el-form-item>
			</el-row>
		</div>
		<el-table border :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="id" label="Id" width="80" />
			<el-table-column prop="app_name" label="App" />
			<el-table-column prop="userid" label="用户id" width="100" />
			<el-table-column prop="tel" label="电话" width="100" />
			<el-table-column prop="type" label="发票类型" width="90">
				<template #default="scope">
					<el-tag v-if="scope.row.type==1" class="ml-2" type="success">电子</el-tag>
					<el-tag v-if="scope.row.type==0" class="ml-2">纸质</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="unit_type" label="开票类型" width="90">
				<template #default="scope">
					<el-tag v-if="scope.row.unit_type==0" class="ml-2" type="info" effect="plain">个人</el-tag>
					<el-tag v-if="scope.row.unit_type==1" class="ml-2" type="warning" effect="plain">单位</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="unit_name" label="发票抬头" />
			<el-table-column prop="unit_num" label="税号" />
			<el-table-column prop="price" label="金额" width="90" />
			<el-table-column prop="status" label="状态" width="90">
				<template #default="scope">
					<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">已拒绝</el-tag>
					<el-tag v-if="scope.row.status==1" class="ml-2" type="warning">申请中</el-tag>
					<el-tag v-if="scope.row.status==2" class="ml-2" type="success">已开票</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="user_note" label="用户备注" />
			<el-table-column prop="shenqing_time" label="申请时间" width="160" />
			<el-table-column label="操作" width="150">
				<template #default="scope">
					<el-button type="primary" size="small" round @click="DoClick(scope.row.id)">操作</el-button>
					<el-button type="danger" size="small" round @click="Del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
				@size-change="PageSizeChange" @current-change="PageCurrentChange" />
		</div>
		<el-dialog v-model="dialogVisible" title="详情" width="40%" style="margin-top: 10vh;">
			<div style="margin-top: -30px;" v-if="InfoDetai !== null">
				<div class="fp_row" style="border-top:  1px solid #e4f6ff;;">
					<div class="fp_row_left">状态</div>
					<div class="fp_row_right">
						<el-radio-group v-model="InfoDetai.status">
							<el-radio-button label="1" value="1">申请中</el-radio-button>
							<el-radio-button label="2" value="2">已开票</el-radio-button>
							<el-radio-button label="0" value="0">已拒绝</el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div class="big_row">
					<div class="fp_row">
						<div class="fp_row_left">App</div>
						<div class="fp_row_right">{{InfoDetai.app_name}}</div>
					</div>
					<div class="fp_row">
						<div class="fp_row_left">用户</div>
						<div class="fp_row_right">{{InfoDetai.userid}}</div>
					</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left">发票类型</div>
					<div class="fp_row_right">
						<el-tag v-if="InfoDetai.type==1" class="ml-2" type="success">电子</el-tag>
						<el-tag v-if="InfoDetai.type==0" class="ml-2">纸质</el-tag>
					</div>
				</div>
				<div class="big_row">
					<div class="fp_row">
						<div class="fp_row_left">发票内容</div>
						<div class="fp_row_right">{{InfoDetai.content}}</div>
					</div>
					<div class="fp_row">
						<div class="fp_row_left">单位类型</div>
						<div class="fp_row_right">
							<el-tag v-if="InfoDetai.unit_type==0" class="ml-2" type="info">个人</el-tag>
							<el-tag v-if="InfoDetai.unit_type==1" class="ml-2">单位</el-tag>
						</div>
					</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left">发票抬头</div>
					<div class="fp_row_right bold">{{InfoDetai.unit_name}}</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left">税号</div>
					<div class="fp_row_right bold">{{InfoDetai.unit_num}}</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left">金额</div>
					<div class="fp_row_right bold"><span
							style="font-size: 16px;color: #ff9500;">￥{{InfoDetai.price}}</span></div>
				</div>
				<div class="big_row">
					<div class="fp_row">
						<div class="fp_row_left">收票方式</div>
						<div class="fp_row_right ">
							<el-tag v-if="InfoDetai.receive_type==0" class="ml-2" type="success">邮寄</el-tag>
							<el-tag v-if="InfoDetai.receive_type==1" class="ml-2">其他</el-tag>
						</div>
					</div>
					<div class="fp_row">
						<div class="fp_row_left">收票地址</div>
						<div class="fp_row_right ">{{InfoDetai.receive_address}}</div>
					</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left bold">用户备注</div>
					<div class="fp_row_right bold">{{InfoDetai.user_note}}</div>
				</div>
				<div class="fp_row" v-if="InfoDetai.status==0">
					<div class="fp_row_left color_red">拒绝原因</div>
					<div class="fp_row_right color_red">{{InfoDetai.refuse_content}}</div>
				</div>
				<div class="big_row">
					<div class="fp_row">
						<div class="fp_row_left">电话</div>
						<div class="fp_row_right">{{InfoDetai.tel}}</div>
					</div>
					<div class="fp_row">
						<div class="fp_row_left">申请时间</div>
						<div class="fp_row_right ">{{InfoDetai.shenqing_time}}</div>
					</div>
				</div>
				<div class="big_row">
					<div class="fp_row">
						<div class="fp_row_left">处理时间</div>
						<div class="fp_row_right ">{{InfoDetai.chuli_time}}</div>
					</div>
					<div class="fp_row" v-if="InfoDetai.kaipiao_time">
						<div class="fp_row_left">开票时间</div>
						<div class="fp_row_right ">{{InfoDetai.kaipiao_time}}</div>
					</div>
				</div>
				<div class="fp_row">
					<div class="fp_row_left">管理备注</div>
					<div class="fp_row_right ">
						<el-input type="textarea" v-model="InfoDetai.admin_note" />
					</div>
				</div>
				<div class="fp_row" style="text-align: center; margin-top: 10px; justify-content: center;">
					<el-button type="primary" style="width: 200px;" @click="Save()">保 存</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		InvoiceGetList,
		InvoiceGetDetail,
		InvoiceSave,
		InvoiceDel
	} from '@/api/api.js'
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()
	let loading = ref(false)
	let tableData = ref([])
	let currentPage = ref(1) //当前页码
	let pageSize = ref(15) //每页数量
	let total = 0 //总数量
	const PageSizeChange = (e) => { // 修改每页数量
		pageSize.value = e
		GetList()
	}
	const PageCurrentChange = (e) => { //切换页码
		currentPage.value = e
		GetList()
	}
	let InfoDetai = ref(null)
	let dialogVisible = ref(false)
	const DoClick = (id) => {
		dialogVisible.value = true
		loading.value = true
		InvoiceGetDetail({
			id: id
		}).then(res => {
			loading.value = false
			if (res.status) {
				InfoDetai.value = res.data
			}
		})
	}
	//保存
	const Save = () => {
		loading.value = true
		InvoiceSave({
			info: InfoDetai.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				dialogVisible.value = false
				GetList()
				ElMessage({
					message: '修改成功',
					type: 'success',
				})
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const Del = (id) => {
		ElMessageBox.confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				InvoiceDel({
					id: id
				}).then(res => {
					loading.value = false
					if (res.status) {
						ElMessage({
							message: '操作成功',
							type: 'success',
						})
						GetList()
					} else {
						ElMessage.error(res.msg)
					}
				})
			})

	}
	let searchInfo = ref({
		status: null,
		unit_name: '',
		tel:''
	})
	//获取列表
	const GetList = () => {
		loading.value = true
		InvoiceGetList({
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data
			}
		})
	}


	watch(() => router.currentRoute.value, (newVal, oldVal) => {
		path.value = newVal.path
		IsPath()

	})
	let path = ref(''); //当前路径
	//判断路经，如果路径是InvoiceMngr/listStatus1则筛选status=1的
	const IsPath = () => {
		searchInfo.value = {
			status: null,
			unit_name: '',
			tel:''
		}
		if (path.value.indexOf('InvoiceMngr/listStatus1') !== -1) {
			searchInfo.value.status = 1
		} else {
			searchInfo.value.status = null
		}

		GetList()
	}

	onMounted(() => {
		path.value = route.path
		IsPath()

	})
</script>

<style scoped>
	.color_red {
		color: #ff6017 !important;
	}

	.bold {
		font-weight: 700;
	}

	.page {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.big_row {
		display: flex;
	}

	.big_row>div {
		width: 50%;
	}

	.fp_row {
		display: flex;


	}

	.fp_row_left {
		text-align: center;
		min-width: 80px;
		background-color: #e9f9ff;
		padding: 10px;
		border-bottom: 1px solid #fff;
		color: #4285c7;
	}

	.fp_row_right {
		padding: 10px;
		border-bottom: 1px solid #e4f6ff;
		width: 100%;
	}
</style>