<template>
	<div>
		<el-dialog
			:title="title"
			:close-on-click-modal="false"
			draggable
			width="1200px"
			height="500px"
			@close="close"
			append-to-body
			v-model="visible">
			<el-container>
				<el-main style="padding-top: 0;padding-bottom: 0">
					<div>
						<el-form style="margin-bottom: 0"  :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
							<!-- 搜索框-->
							<el-form-item label="项目名称" prop="name">
								<el-input  v-model="searchForm.reimbuserName" 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>
<!--						<div style="margin-bottom: 10px"><span style="color: #F56C6C">注：最多选择 10 条数据</span></div>-->
						<vxe-table
							border="inner"
							auto-resize
							resizable
							height="400px"
							:loading="loading"
							ref="programTable"
							show-header-overflow
							show-overflow
							highlight-hover-row
							:menu-config="{}"
							:print-config="{}"
							@checkbox-all="selectAllEvent"
							@checkbox-change="selectionChangeHandle"
							:row-id="rowId"
							:checkbox-config="{reserve: true}"
							:sort-config="{remote:true}"
							:data="dataList">
							<vxe-column type="seq" width="60" title="序号"></vxe-column>
							<vxe-column type="checkbox" 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="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>
				</el-main>
				<el-aside width="300px" v-if=" commonJS.isNotEmpty(dataListAllSelections.length) && dataListAllSelections.length > 0">
					<el-tag
						style="margin: 10px 0 0 0"
						:key="tag.id"
						v-for="(tag, index) in dataListAllSelections"
						closable
						:disable-transitions="false"
						@close="del(tag, index)">
						{{tag.reimbuserName.length>20?tag.reimbuserName.substring(0,20)+'...':tag.reimbuserName}}
					</el-tag>
				</el-aside>
			</el-container>
			<template #footer>
			<span class="dialog-footer">
			  <el-button  @click="close()">关闭</el-button>
			  <el-button  type="primary" v-if="method != 'view'" @click="getProgram()" icon="el-icon-circle-check" v-noMoreClick>确定({{allNum}})</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: {
					reimbuserName: '',
					createBy: '',
					type: ''
				},
				detail: '',
				allNum: '',
				dataListAllSelections: [],
				rowId: 'id',
			}
		},
		created () {
		},
		components: {
		},
		methods: {
			init () {
				this.visible = true
				this.dataListAllSelections = []
				this.tablePage.currentPage = 1
				this.tablePage.pageSize = 10
				this.searchForm = {
					reimbuserName: '',
					projectNumber: '',
					createBy: ''
				}
				this.list()
			},
			// 表单提交
			getProgram () {
				let rows
				if (this.commonJS.isEmpty(this.dataListAllSelections)) {
					this.$message.error('请至少选择一条数据')
					return
				}
				if (this.dataListAllSelections.length > 10) {
					this.$message.error('最多选择10条数据')
					return
				}
				rows = this.dataListAllSelections
				let totalNum = 0; // 初始化总报销金额为0
				for (let i = 0; i < rows.length; i++) {
					let row = rows[i];
					let reimbursementAmount = parseFloat(row.allReimbursementAmount); // 获取当前行的总报销金额
					totalNum += reimbursementAmount; // 累加到总报销金额
				}
				rows.totalNum = totalNum
				this.close()



				this.$emit('getProgram', rows)
			},
			list () {
				this.loading = true
				this.searchForm.type = '5'
				reimburseRegisterService.list2({
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm
				}).then(async (data) => {
					this.dataList = data.records
					this.tablePage.total = data.total
					this.loading = false

					let isCheck = []
					for (let i = 0; i < this.tablePage.pageSize; i++) {
						for (let j = 0; j < this.dataListAllSelections.length; j++) {
							if (this.commonJS.isNotEmpty(this.dataList[i]) && this.commonJS.isNotEmpty(this.dataListAllSelections[j])) {
								if (this.dataList[i].id === this.dataListAllSelections[j].id) { // 符合条件的数据勾选
									isCheck.push(this.dataList[i].id)
								}
							}
						}
					}
					if (this.commonJS.isNotEmpty(isCheck)) {
						for (let i = 0; i < this.tablePage.pageSize; i++) {
							if (isCheck.includes(this.dataList[i].id)) {
								await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
							} else {
								await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
							}
						}
					} else {
						for (let i = 0; i < this.tablePage.pageSize; i++) {
							await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
						}
					}
				})
			},
			// 当前页
			currentChangeHandle ({currentPage, pageSize}) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.list()
			},
			resetSearch () {
				this.dataListAllSelections = []
				this.searchForm = {
					reimbuserName: '',
					projectNumber: '',
					createBy: ''
				}
				// this.$refs.programTable.clearCheckboxReserve() // 清除全部页的勾选
				this.$refs.searchForm.resetFields()
				this.list()
			},
			close () {
				// this.$refs.programTable.clearCheckboxReserve()
				this.dataListAllSelections = []
				this.detail = ''
				this.visible = false
			},
			// 全选/取消全选 时，右侧tag标签同步新增或删除改变
			async selectAllEvent (event) {
				this.dataListAllSelections = []
				let thisPageDate = await this.$refs.programTable.getCheckboxRecords()
				let otherPageDate = await this.$refs.programTable.getCheckboxReserveRecords()
				if (this.commonJS.isNotEmpty(otherPageDate)) {
					for (let i = 0; i < otherPageDate.length; i++) {
						this.dataListAllSelections.push(otherPageDate[i])
					}
				}
				if (this.commonJS.isNotEmpty(thisPageDate)) {
					for (let i = 0; i < thisPageDate.length; i++) {
						this.dataListAllSelections.push(thisPageDate[i])
					}
				}

				let rows = this.dataListAllSelections
				let totalNum = 0; // 初始化总报销金额为0
				for (let i = 0; i < rows.length; i++) {
					let row = rows[i];
					let reimbursementAmount = parseFloat(row.allReimbursementAmount); // 获取当前行的总报销金额
					totalNum += reimbursementAmount; // 累加到总报销金额
				}
				this.allNum = totalNum
			},
			// 当前页“选中/取消选中”数据时，“新增/删除”右侧tag标签
			selectionChangeHandle (event) {
				if (event.checked) { // 选中触发
					let delIndex = -1
					for (let i = 0; i < this.dataListAllSelections.length; i++) {
						if (this.dataListAllSelections[i].id === event.row.id) {
							delIndex = i
						}
					}
					if (this.commonJS.isNotEmpty(delIndex) && delIndex === -1) {
						this.dataListAllSelections.push(event.row)
					}

					let rows = this.dataListAllSelections
					let totalNum = 0; // 初始化总报销金额为0
					for (let i = 0; i < rows.length; i++) {
						let row = rows[i];
						let reimbursementAmount = parseFloat(row.allReimbursementAmount); // 获取当前行的总报销金额
						totalNum += reimbursementAmount; // 累加到总报销金额
					}
					this.allNum = totalNum

				} else { // 取消选中触发
					let delIndex = -1
					for (let i = 0; i < this.dataListAllSelections.length; i++) {
						if (this.dataListAllSelections[i].id === event.row.id) {
							delIndex = i
						}
					}
					if (this.commonJS.isNotEmpty(delIndex) && delIndex !== -1) {
						this.dataListAllSelections.splice(delIndex, 1)
					}

					let rows = this.dataListAllSelections
					let totalNum = 0; // 初始化总报销金额为0
					for (let i = 0; i < rows.length; i++) {
						let row = rows[i];
						let reimbursementAmount = parseFloat(row.allReimbursementAmount); // 获取当前行的总报销金额
						totalNum += reimbursementAmount; // 累加到总报销金额
					}
					this.allNum = totalNum
				}
			},
			// 删除tag标签时，取消勾选当前页对应的数据
			async del (tag, index) {
				this.dataListAllSelections.splice(index, 1)
				let rows = await this.$refs.programTable.getCheckboxRecords()
				await this.$refs.programTable.clearCheckboxRow()
				for (let i = 0; i < this.dataList.length; i++) {
					for (let j = 0; j < rows.length; j++) {
						if (this.dataList[i].id !== tag.id && this.dataList[i].id === rows[j].id) {
							await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
						}
					}
				}
				let rows2 = this.dataListAllSelections
				let totalNum = 0; // 初始化总报销金额为0
				for (let i = 0; i < rows2.length; i++) {
					let row = rows2[i];
					let reimbursementAmount = parseFloat(row.allReimbursementAmount); // 获取当前行的总报销金额
					totalNum += reimbursementAmount; // 累加到总报销金额
				}
				this.allNum = totalNum
			}
		}
	}
</script>
<style>
	.messageZindex {
		z-index:9999 !important;
	}
</style>
