<template>
	<div class="fundsStatement">
		<el-form :inline="true" :model="req" class="demo-form-inline">
			
			<el-form-item label="资金账户">
				<el-select
					v-model="req.managementId"
					placeholder="请输入"
				>
					<el-option label="全部" value=""></el-option>
					<el-option :label="i.name" :value="i.id" v-for="i in accountManagementData" :key='i.id' />
				</el-select>
			</el-form-item>
			<el-form-item label="时间">
				<!-- 选单月 -->
				<el-date-picker
					v-model="req.dateBetween"
					type="month"
					format="YYYY/MM"
        			value-format="YYYY-MM"
					placeholder="选择日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList">搜索</el-button>
			</el-form-item>
		</el-form>
		<!--  -->
		<el-table
			:data="tableData"
			style="width: 100%"
			:span-method="objectSpanMethod"
		>
			<el-table-column
				prop="accountManagementAlias"
				label="账户信息"
				width="400"
				fixed
			>
				<template #default="{ row }">
					<div class="account-box">
						<div class="text">
							<div class="account">账户名称：{{row.accountManagementAlias}}</div>
							<div class="company">{{row.corporationName}}</div>
						</div>
						<div class="img"></div>
					</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="currencyType"
				label="币种"
				width="150"
				fixed
			>
				<template #default="{ row }">
					{{dictDataEcho(row.currencyType, dictsData.account_currency)}}
				</template>
			</el-table-column>
			<el-table-column
				:label="index + '日'"
				v-for="index of dayNum"
				:key="index"
			>
				<el-table-column :prop="index + 'income'" label="收入" />
				<el-table-column :prop="index + 'expenditure'" label="支出" />
				<el-table-column :prop="index + 'balance'" label="余额" />
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/index'
const { proxy } = getCurrentInstance()
const loading = ref(false)
let tableData = ref([])
const dayNum = ref(0)
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (columnIndex === 0) {
		const _row = flitterData(tableData.value).one[rowIndex]
		const _col = _row > 0 ? 1 : 0
		return {
			rowspan: _row,
			colspan: _col,
		}
	}
}
const flitterData = (arr) => {
	let spanOneArr = []
	let concatOne = 0
	arr.forEach((item, index) => {
		if (index === 0) {
			spanOneArr.push(1)
		} else {
			//注意这里的quarterly是表格绑定的字段，根据自己的需求来改
			if (
				item.accountManagementAlias ===
				arr[index - 1].accountManagementAlias
			) {
				//第一列需合并相同内容的判断条件
				spanOneArr[concatOne] += 1
				spanOneArr.push(0)
			} else {
				spanOneArr.push(1)
				concatOne = index
			}
		}
	})
	return {
		one: spanOneArr,
	}
}

let req = ref({
	dateBetween: formatDate(new Date(), 'yyyy-MM'),
	managementId:null,
})
let dictsData = {}
proxy
	.getDict(['payment_status', 'payment_type','account_currency'])
	.then((res) => {
		dictsData = res
		console.log(res)
	})

const getList = async () => {
	console.log(req.value,123123123)
	loading.value = true
	proxy
		.post('/accountStatement/capitalDaily',req.value)
		.then((message) => {
			console.log(message)
			let arr = []
			//公司循环
			for (let i = 0; i < message.length; i++) {
				const element = message[i]
				//公司下的管理账户循环
				for (let j = 0; j < element.managementList.length; j++) {
					const jelement = element.managementList[j]
					//管理账户下的币种循环
					for (let k = 0; k < jelement.currencyList.length; k++) {
						const kelement = jelement.currencyList[k]
						let obj = {
							corporationName: element.corporationName,
							accountManagementAlias:
								jelement.accountManagementAlias,
							currencyType: kelement.currencyType,
						}
						//币种下的日期循环
						for (
							let l = 0;
							l < kelement.flowingWaterList.length;
							l++
						) {
							const lelement = kelement.flowingWaterList[l]
							obj[lelement.day + 'balance'] = lelement.balance
							obj[lelement.day + 'income'] = lelement.income
							obj[lelement.day + 'expenditure'] =
								lelement.expenditure
						}
						dayNum.value = kelement.flowingWaterList.length
						arr.push(obj)
					}
				}
			}
			console.log(arr)
			tableData.value = arr
		})
}
const accountManagementData = ref([])
const getAccountManagement = async () => {
	proxy
		.post('/accountManagement/page',{pageNum:1,pageSize:10000})
		.then((message) => {
			accountManagementData.value = message.rows
		})
}
getList()
getAccountManagement()
</script>
<style lang="scss">
.fundsStatement {
	padding: 20px;
	margin: 20px;
	background: #fff;
	.account-box {
		width: 360px;
		height: 102px;
		background: #eff6ff;
		display: flex;
		justify-content: space-between;
		padding: 20px 10px 20px 33px;
		margin: 20px 10px;
		box-shadow: 0px 2px 10px 1px rgba(153, 153, 153, 0.1);
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		.img {
			width: 60px;
			height: 60px;
			background: url(../../../../assets/images/icon_zhangh1.png)
				no-repeat;
		}
		.text {
			padding-top: 10px;
			.account {
				color: #333;
				font-size: 20px;
				font-weight: bold;
			}
			.company {
				color: #999;
				font-weight: 400;
				font-size: 14px;
				margin-top: 10px;
			}
		}
	}
	.account-box:before {
		content: '';
		width: 10px;
		height: 102px;
		background: #0084ff;
		position: absolute;
		left: 0;
		top: 0;
	}
	//修改tabletr边框颜色
	.is-group {
		tr {
			.el-table_1_column_1{
				background: #EEEEEE!important;
				
			}
			th{
				border-color: #fff!important;
			}
		}
	}
}

</style>