<template>
	<div>
		<el-dialog
			title="选择项目"
			:close-on-click-modal="false"
			draggable
			width="1100px"
			height="500px"
			@close="close"
			append-to-body
			v-model="visible">
			<div style="height: calc(100% - 80px);">
				<el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @submit.native.prevent>
					<!-- 搜索框-->
					<el-form-item label="项目名称" prop="projectName">
						<el-input v-model="searchForm.projectName" placeholder="请输入项目名称" clearable></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="list()" icon="el-icon-search">查询</el-button>
						<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>

				<vxe-table
					border="inner"
					auto-resize
					resizable
					height="400px"
					:loading="loading"
					ref="projectTable"
					show-header-overflow
					show-overflow
					highlight-hover-row
					:menu-config="{}"
					:print-config="{}"
					:sort-config="{remote:true}"
					:data="dataList"
					:row-config="{isCurrent: true}"
					:radio-config="{trigger: 'row'}"
				>
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column type="radio" width="60px"></vxe-column>
					<vxe-column min-width="160" align="center" title="报销登记名称" field="reimbuserName"></vxe-column>
					<vxe-column min-width="160" align="center" title="项目经理" field="projectManagerName"></vxe-column>
					<vxe-column min-width="160" align="center" title="创建人" field="createName"></vxe-column>
					<vxe-column min-width="160" align="center" title="总报销金额" field="allReimbursementAmount"></vxe-column>
					<vxe-column min-width="160" align="center" title="银行卡号" field="bankCardNumber"></vxe-column>
					<vxe-column min-width="160" align="center" title="创建时间" field="createTime"></vxe-column>

				</vxe-table>
				<vxe-pager
					background
					:current-page="tablePage.currentPage"
					:page-size="tablePage.pageSize"
					:total="tablePage.total"
					:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
			<template #footer>
			<span class="dialog-footer">
			  <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
			  <el-button type="primary" v-if="method != 'view'" @click="getProject()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import reimburseRegisterService from '@/api/human/register/ReimburseRegisterService'
	export default {
		data () {
			return {
				title: '',
				method: '',
				visible: false,
				loading: false,
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				dataList: [],
				searchForm: {
					projectName: '',
				}
			}
		},
		created () {
		},
		components: {
		},
		methods: {
			init () {
				this.visible = true
				this.list()
			},
			// 表单提交
			getProject () {
				let row = this.$refs.projectTable.getRadioRecord()
				if (this.commonJS.isEmpty(row)) {
					this.$message.error('请选择一条数据')
					return
				}
				this.close()
				this.$emit('getProgram', row)
			},
			list () {
				this.loading = true
				// this.searchForm.createId = this.$store.state.user.id
				this.searchForm.status = '5'
				reimburseRegisterService.list2({
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm
				}).then((data) => {
					this.dataList = data.records
					this.tablePage.total = data.total
					this.loading = false
				})
			},
			// 当前页
			currentChangeHandle ({currentPage, pageSize}) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.list()
			},
			resetSearch () {
				this.$refs.searchForm.resetFields()
				this.list()
			},
			close () {
				this.$refs.searchForm.resetFields()
				this.visible = false
			}
		}
	}
</script>
<style scoped>
	/deep/ .el-dialog__body {
		padding-top: 0px;
		padding-bottom: 15px;
	}
</style>
