<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti" v-if="ontype == '1'">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>联机交易</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">对账分析</span></div>
			</div>
			<!-- 搜索 -->
			<div class="formSearch">
				<el-form :inline="true" :model="formSel">
					<el-form-item label="年月">
						<el-date-picker style="width: 100%;" v-model="formSel.yytime" value-format="yyyy-MM"
							type="month" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>


				</el-form>
				<div>
					<el-button style="background-color: #3F9B6A;color: #fff" @click="onSubmit">查询
					</el-button>
					<el-button class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="resetting">重置
					</el-button>
				</div>

			</div>

			<div>
				<el-calendar v-model="morenCard">
					<template slot="dateCell" slot-scope="{date, data}">
						{{data.day.split("-").slice(2).join("-")}}
						<div style="overflow: auto;height:75px;">
							<div style="width:100%," v-for="(item,index) in tableData"
								@click="genjinMsg(item,data.day)">
								<div style="font-size:12px;margin-top:10px;">

									<div v-if="item.nowDay == data.day && val.count!=0"
										v-for="val in item.checkTypes"
										:style="val.checkType==0?'color:red':val.checkType==1?'color:green':val.checkType==2?'':''">
										{{val.checkType==0?'未对账':val.checkType==1?'平账':val.checkType==2?'金额不符':''}}:{{val.count}}
									</div>
									
								</div>
							</div>
						</div>
					</template>
				</el-calendar>
			</div>
			<div>
				<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
					@click="closeGenjin">返回
				</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype == '3'">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>联机交易</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">对账明细</span></div>
			</div>
			<div class="formSearch">
				<el-form :inline="true" :model="listIndex" label-position="left">
					<el-form-item label="账单金额">
						<div>
							<el-input placeholder="请输入" style="width: 168px" v-model="listIndex.minPrice">
							</el-input>
							至
							<el-input placeholder="请输入" style="width:168px" v-model="listIndex.maxPrice">
							</el-input>
						</div>
					</el-form-item>

					<el-form-item label="核对状态">
						<el-select v-model="listIndex.checkType" placeholder="请选择" style="width: 100px;">
							<el-option label="未对账" value="0" />
							<el-option label="平账" value="1" />
							<el-option label="金额不符" value="2" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="listSubmit">查询
						</el-button>
						<el-button class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
							@click="listResetting">重置
						</el-button>
					</el-form-item>
				</el-form>

			</div>
			<div>
				<el-table :data="addziyuanData"
					:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
					style="width: 100%">
					<el-table-column label="序号" min-width="4%">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="orderFormId" label="订单号" width="auto" min-width="10%">

					</el-table-column>
					<el-table-column prop="payId" label="交易号" width="auto" min-width="10%" show-overflow-tooltip>

					</el-table-column>
					<el-table-column label="支付金额" prop="price" width="auto" min-width="12%">

					</el-table-column>


					<el-table-column prop="payChannel" label="支付渠道" width="auto" min-width="10%">

					</el-table-column>

					<el-table-column prop="payTime" label="支付完成时间" width="auto" min-width="10%" show-overflow-tooltip>
						<template slot-scope="scope">
							{{formatIsoToDateTime(scope.row.payTime)}}
						</template>
					</el-table-column>
					<el-table-column prop="reconciliationTime" label="对账日期" width="auto" min-width="10%"
						show-overflow-tooltip>

						<template slot-scope="scope">
							{{formatIsoToDateTime(scope.row.reconciliationTime)}}
						</template>
					</el-table-column>
					<el-table-column prop="checkType" label="核对状态" width="auto" min-width="10%">
						<template slot-scope="scope">
							{{scope.row.checkType == '0'?'未对账':scope.row.checkType == '1'?'平账':scope.row.checkType == '2'?'金额不符':''}}
						</template>
					</el-table-column>

				</el-table>
				<div class="fenye">
					<div style="line-height: 34px">共{{total}}条</div>
					<el-pagination class="pagination" :hide-on-single-page="flag" background :current-page="listIndex.pageNumber+1"
						:page-sizes="[10, 20, 50, 100]" :page-size="listIndex.pageSize" layout="prev, pager,next" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
			<div style="display: flex;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		reconciliationAnalysis,reconciliationDetail
	} from '../../../api/online.js'
	export default {
		data() {
			return {
				ontype: "1",
				formSel: {
					yytime: ''
				},
				addziyuanData: [],
				morenCard: new Date(),
				pageSize: 10,
				currentPage: 1,
				flag:false,
				total: 0,
				pageindex: {
					startTime: '',
					endTime: '',
					pageNumber: 0,
					pageSize: 10,
				},
				listIndex:{
				minPrice: '',
				maxPrice: '',
				checkType: '',
				pageSize: 10,
				pageNumber: 0,
				 nowTime:'',
				},
				tableData: [],
			}
		},
		created() {

		},
		mounted() {
			this.getCurrentMonthStartAndEnd()
			this.getAll()
		},
		methods: {
			getCurrentMonthStartAndEnd() {
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			if(month > 12){
			    month = 1;
			    year++;
			}
			if (month < 10) {
			    month = '0' + month
			}
			let monthLastDay = new Date(year, month, 0).getDate();
			let firstDate = year + '-' + month + '-' + '01';
			let lastDate = year + '-' + month + '-' + monthLastDay;
			this.pageindex.startTime =firstDate
			this.pageindex.endTime =lastDate

			},
			changimg(e, type) {
				this.formInline[type] = e
			},
			async getAll() {
				const res = await reconciliationAnalysis(this.pageindex)
				this.tableData = res.data.onlineTransactionTimeByNowDayVOS

			},
		async genjinMsg(item, data) {
				this.listIndex.nowTime = data
				this.ontype = '3'
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
			onSubmit() {
				this.morenCard = this.formSel.yytime
				if(this.formSel.yytime != ''){
					this.getfirstDateAndlastDate(this.formSel.yytime)
				}
				
				this.getAll()
			},
			resetting() {
				this.morenCard = new Date()
				this.formSel.yytime = ''
				this.getCurrentMonthStartAndEnd()
				this.getAll()
			},
			getfirstDateAndlastDate(dateStr){
			    let date = new Date(dateStr);
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    if(month > 12){
			        month = 1;
			        year++;
			    }
			    if (month < 10) {
			        month = '0' + month
			    }
			    let monthLastDay = new Date(year, month, 0).getDate();
			    let firstDate = year + '-' + month + '-' + '01';
			    let lastDate = year + '-' + month + '-' + monthLastDay;
				this.pageindex.startTime =firstDate
				this.pageindex.endTime =lastDate
			},

			closeGenjin() {
				this.ontype = '1'
				this.addziyuanData = []
			},

			closeFn(val) {
				this.addziyuanData = []
				this.ontype = '1'
			},
			handleSizeChange(){
				
			},
			handleCurrentChange(val) {
				this.listIndex.pageNumber = val
				this.getAll()
			},
			formatIsoToDateTime(isoTime) {
				// 1. 空值/非法值处理
				if (!isoTime) return '';
				if (typeof isoTime !== 'string') return '时间格式错误';
			
				// 2. 解析时间（兼容带时区的ISO格式，如2025-03-11T14:19:54+08:00）
				const date = new Date(isoTime.replace('T', ' ').replace(/-/g, '/'));
				if (isNaN(date.getTime())) return '时间格式错误';
			
				// 3. 补零函数（确保两位数）
				const pad = (num) => num.toString().padStart(2, '0');
			
				// 4. 提取时间分量（注意：月份从0开始，需+1）
				return [
					date.getFullYear(), // 年
					pad(date.getMonth() + 1), // 月（0→1月）
					pad(date.getDate()), // 日
					pad(date.getHours()), // 时
					pad(date.getMinutes()), // 分
					pad(date.getSeconds()) // 秒
				].join('-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$1-$2-$3 ').slice(0, 19);
				// 最终格式：YYYY-MM-DD HH:mm:ss（精确到秒，共19位）
			},
		async	listSubmit(){
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
		async	listResetting(){
				this.listIndex={
				minPrice: '',
				maxPrice: '',
				checkType: '',
				pageSize: 10,
				pageNumber: 0,
				 nowTime:'',
				}
				const res = await reconciliationDetail(this.listIndex)
				this.addziyuanData = res.data.content
				this.total = res.data.totalElements
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	::v-deep .el-calendar button-group {
		display: none;
	}

	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #fff;
		box-sizing: border-box;
	}

	.formSearch {

		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;

	}

	::v-deep .el-calendar-table:not(.is-range)td.next {
		display: none;
	}

	::v-deep .el-calendar-table:not(.is-range)td.prev {
		visibility: hidden;
	}

	::v-deep .el-calendar__button-group {
		display: none;
	}
</style>