<template>
	<div>
		<el-dialog
			:title="title"
			:close-on-click-modal="false"
			draggable
			width="1400px"
			append-to-body
			height="500px"
			@close="close"
			@keyup.enter.native="getWorkClient"
			v-model="visibleChoose">
			<div style="height: calc(100%);">
				<vxe-table
					border="inner"
					auto-resize
					height="400px"
					resizable
					:loading="loading"
					ref="clientTable"
					show-header-overflow
					show-overflow
					highlight-hover-row
					:menu-config="{}"
					@sort-change="sortChangeHandle"
					:sort-config="{remote:true}"
					:data="dataList"
					:checkbox-config="{}">
					<vxe-column type="seq" width="40"></vxe-column>
					<vxe-column type="radio" width="40px"></vxe-column>
					<vxe-column min-width="160" align="center" title="付款编号" field="no">
						<template  #default="scope">
							<el-link  type="primary" :underline="false"  @click="view(scope.row)">{{scope.row.no}}</el-link>
						</template>
					</vxe-column>
					<vxe-column min-width="160" align="center" title="付款用途" field="reason"></vxe-column>
					<vxe-column min-width="160" align="center" title="付款人" field="createName"></vxe-column>
					<vxe-column min-width="160" align="center" title="付款人部门" field="officeName"></vxe-column>
					<vxe-column min-width="160" align="center" title="付款时间" field="paymentTime"></vxe-column>
					<vxe-column min-width="160" align="center" title="付款金额" field="paymentLower"></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="getWorkClient()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	// import WorkClientService from '@/api/cw/workClientInfo/WorkClientService'
	import PaymentService from '@/api/jy/PaymentService'
	export default {
		data () {
			return {
				title: '',
				method: '',
				visibleChoose: false,
				loading: false,
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				dataList: [],
				searchForm: {
					projectName: '',
					name: '',
					no: '',
					type: '',
					industry: ''
				},
				projectId: ''
			}
		},
		// workClientService: null,
		PaymentService: null,
		created () {
			// this.workClientService = new WorkClientService()
			this.paymentService = new PaymentService()
		},
		components: {
		},
		methods: {
			init (deputy) {
				this.title = '付款信息选择'
				this.visibleChoose = true
				this.list()
			},
			// 表单提交
			getWorkClient () {
				let row = this.$refs.clientTable.getRadioRecord()
				console.log('row',row)
				if (this.commonJS.isEmpty(row)) {
					this.$message.error('请至少选择一条数据')
				} else {
					this.close()
					this.$emit('getPayment', row)

				}
			},
			list () {
				this.loading = true
				this.paymentService.listByUserId({
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm
				}).then((data) => {
					console.log('x',data.records)
					this.dataList = data.records
					this.tablePage.total = data.total
					this.tableKey = Math.random()
					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.visibleChoose = false
			}
		}
	}
</script>
<style scoped>
	/deep/ .el-dialog__body {
		padding-top: 0;
	}
	/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
		margin-bottom: 0px;
	}
</style>
