<template>
	<div>
		<div class="head">
			<el-row>
				<el-form-item>
					<el-input v-model="searchInfo.name" placeholder="姓名" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.id_number"  placeholder="身份证"  />
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchInfo.order_number"  placeholder="订单号" />
				</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 :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
			<el-table-column prop="name" label="姓名" width="100" />
			<el-table-column prop="id_number" label="身份证" width="160" />
			<el-table-column prop="phone" label="电话" />
			<el-table-column prop="order_number" label="订单号" />
			<el-table-column prop="type" label="类型" >
				<template #default="scope">
					 <span v-if="scope.row.type==1" style="color: #409EFF;">个检</span>
					 <span v-if="scope.row.type==2" style="color: #E6A23C;">团检</span>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="金额" />
			<el-table-column prop="order_number" label="状态">
				<template #default="scope">
					<span v-if="scope.row.status==1" style="color: #409EFF;">待支付</span>
					<span v-if="scope.row.status==2" style="color: #E6A23C;">已预约</span>
					<span v-if="scope.row.status==3" style="color: #909399;">交易关闭</span>
					<span v-if="scope.row.status==4" style="color: #67C23A;">已完成</span>
					<span v-if="scope.row.status==5" style="color: #F56C6C;">已退款</span> 
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间" width="180" />
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button type="primary"   :icon="Edit" circle />
				</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>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		OrderGetList
	} from '@/api/api.js'
import {
		Edit
	} from '@element-plus/icons-vue'


	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 searchInfo = ref({})
	const GetList = () => {
		loading.value = true
		OrderGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				tableData.value = res.data.list 
				total = res.data.count
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	onMounted(() => {
		GetList()
	})
</script>

<style>
</style>