<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="status === 'audit' || status === 'taskFormDetail'"
				 label-width="160px" @submit.native.prevent>
			<el-row  :gutter="15">
				<el-col :span="24">
					<vxe-table
						border
						:footer-method="footerMethod2"
						show-overflow
						show-footer
						ref="baseTable"
						:key="baseKey"
						class="vxe-table-element"
						:data="dataList"
						style="margin-left: 5em"
						keep-source
						highlight-current-row
					>
						<vxe-table-column field="no" align="center" title="报销编号" :edit-render="{}" show-overflow="title">
							<template #default="scope">
								<el-link  type="primary" :underline="false" @click="view(scope.row.id)">{{scope.row.no}}</el-link>
							</template>
						</vxe-table-column>
						<vxe-table-column field="applyType" align="center" title="报销类型" :edit-render="{}">
							<template #default="scope">
								{{$dictUtils.getDictLabel('jy_apply', scope.row.applyType, '')}}
							</template>
						</vxe-table-column>
						<vxe-table-column field="typeName" align="center" title="报销类别" :edit-render="{}"></vxe-table-column>
						<vxe-table-column   field="number" align="center"   title="报销金额" :edit-render="{}"></vxe-table-column>
						<vxe-table-column   field="createName" align="center"   title="经办人" :edit-render="{}"></vxe-table-column>
						<vxe-table-column   field="createTime" align="center"   title="报销时间" :edit-render="{}"></vxe-table-column>
					</vxe-table>
				</el-col>
			</el-row>

		</el-form>
		<InfoForm ref="infoForm" @refreshDataList="refreshList"></InfoForm>
	</div>
</template>

<script>
	import ReimbursementService from '@/api/jy/ReimbursementService'
	import InfoForm from '@/views/jy/reimbursement/InfoForm'
	import XEUtils from "xe-utils";
	export default {
		props: {
			businessId: {
				type: String,
				default: ''
			},
			formReadOnly: {
				type: Boolean,
				default: false
			},
			status: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				title: '',
				method: '',
				loading: false,
				baseKey: '',
				keyWatch: '',
				dataList:[]
			}
		},
		ReimbursementService:null,
		created () {
			console.log('jld ')
			this.reimbursementService=new ReimbursementService()
		},
		mounted () {
		},
		activated () {
		},
		components: {
			InfoForm
		},
		computed: {
			bus: {
				get () {
					return this.businessId
				},
				set (val) {
					this.businessId = val
				}
			}
		},
		watch: {
			'keyWatch': {
				handler (newVal) {
					if (this.bus) {
						if (this.bus !== 'false') {
							this.init('', this.bus)
						}
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields()
						})
					}
				}
			},
			'loading': {
				handler (newVal) {
					this.$emit('changeLoading', newVal)
				}
			}
		},
		methods: {
			getKeyWatch(keyWatch) {
				this.keyWatch = keyWatch
			},
			init(method, id) {
				this.method = method
				this.inputForm={
					id: '',
				}
				this.inputForm.id = id
				this.loading = false
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					this.loading = true
					this.reimbursementService.queryByProjectId(this.inputForm.id).then((data)=>{
						console.log('data',data)
						this.dataList = data
						this.loading = false
					})
				})
			},
			close() {
				this.inputForm = {
					id: '',

				}
				this.visible = false
			},
			footerMethod2({columns, data}) {
				const footerData = [
					columns.map((column, columnIndex) => {
						if (columnIndex === 0) {
							return '金额汇总(元)'
						}
						if (['number'].includes(column.property)) {
							// eslint-disable-next-line no-undef
							this.dataList = XEUtils.sum(data, column.property)
							return XEUtils.sum(data, column.property)
						}
						return null
					})
				]
				return footerData
			},
			// 查看
			view (id) {
				this.$refs.infoForm.init('view',id);
			},


		}

	}
</script>
<style scoped>
	/deep/ .el-input-number .el-input__inner {
		text-align: left;
	}
	/deep/ .vxe-footer--row .vxe-footer--column:nth-child(1) .vxe-cell--item {
		font-weight:700;
	}
</style>
