<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>

				<!-- 搜索 -->
				<div class="formSearch">
					<el-form :inline="true" :model="formInline" label-position="left">
						<el-form-item label="对账状态">
							<el-select v-model="formInline.isReconciliation" 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 label="下单时间">
							<el-date-picker v-model="formInline.dates" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" style="width:200px" />
						</el-form-item>
						<el-form-item label="支付金额">
							<div>
								<el-input placeholder="请输入" style="width: 80px;" v-model.number="minOrderPrice">
								</el-input>
								至
								<el-input placeholder="请输入" style="width:80px;" v-model.number="maxOrderPrice
">
								</el-input>
							</div>
						</el-form-item>
						<el-form-item label="商户名称">
							<el-input placeholder="请输入" style="width: 120px;" v-model="formInline.shopName">
							</el-input>
						</el-form-item>

					</el-form>
					<div style="width:16%">
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="search">查询
						</el-button>
						<el-button class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
							@click="resetting">重置
						</el-button>
					</div>
				</div>
				<div style="padding-bottom:20px;">
					<!-- <el-button
            style="background-color: #3F9B6A;color: #fff;"
            @click="daochu"
            >导出
          </el-button> -->
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="chouqu">数据抽取
					</el-button>
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="resetting">对账数据整理
					</el-button>
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoSet">标记标准设置
					</el-button>
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="chuliList">对账处理记录
					</el-button>
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="zhifuList">支付交易记录核查
					</el-button>

				</div>
				<!-- 表格 -->

				<div class="tableBox">
					<el-table ref="multipleTable" :data="tableData"
						:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
						tooltip-effect="dark">
						<el-table-column label="订单id" width="150">
							<template slot-scope="scope">{{ scope.row.orderId }}</template>
						</el-table-column>
						<el-table-column prop="number" label="商品数量" width="100" />
						<el-table-column prop="shopName" label="商户名称" width="220" show-overflow-tooltip />
						<el-table-column prop="customerName" label="下单账户" show-overflow-tooltip />
						<el-table-column prop="receiveName" label="收件人" show-overflow-tooltip />
						<el-table-column prop="receivePhone" label="手机号" show-overflow-tooltip />
						<el-table-column prop="price" label="支付金额（元）" width="120" />
						<el-table-column prop="createTime" label="下单时间" show-overflow-tooltip />
						<el-table-column prop="markName" label="标记" show-overflow-tooltip />
						<el-table-column label="对账状态" show-overflow-tooltip>
							<template slot-scope="scope">
								<span v-if="scope.row.isReconciliation == 0">未对账</span>
								<span v-if="scope.row.isReconciliation == 2">对账失败</span>
								<span v-if="scope.row.isReconciliation == 1">对账成功</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<div class="btnList">
									<div class="tableBtn greens" @click="addbuss(scope.row)"
										v-if="scope.row.isReconciliation == 0">对账</div>
									<div class="tableBtn greens" @click="jiancha(scope.row,2)"
										v-if="scope.row.isReconciliation == 0">数据完备性核查</div>
									<div class="tableBtn greens" @click="jiancha(scope.row,1)">账单数据检查</div>
									<div class="tableBtn greens" @click="biaojis(scope.row)">标记管理</div>
								</div>

							</template>
						</el-table-column>
					</el-table>
					<div class="fenye">
						<el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>


			</div>
		</div>
		<el-dialog :visible.sync="chouquShow" title="数据抽取" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
				时间： <el-date-picker v-model="formInline.dates" type="daterange" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" style="width:200px" />
				类型：<el-select v-model="formInline.type" placeholder="请选择" style="width: 100px;">
					<el-option label="在线商城订单" value="0" />

				</el-select>
			</div>

			<div style="display: flex;">
				<el-button @click="close" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoChek">确定
				</el-button>
			</div>

		</el-dialog>
		<div class="zhuti" v-if="ontype == '5'">
			<div style="padding: 20px 0;">标记标准设置</div>
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="add(5)">新增
				</el-button>

			</div>
			<el-table :data="biaotable"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="标记" min-width="20%" prop="markName">

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
					<template slot-scope="scope">
						<div @click="deltab(scope.row.id)" class="tableBtn greens">删除</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex;">
				<el-button @click="clriz" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="tiaoAdd" title="标记新增" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
				标记：
				<el-input v-model="tiaoObj.markName"></el-input>

			</div>
			<div style="display: flex;">
				<el-button @click="biaoclose" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoChack">确定
				</el-button>
			</div>

		</el-dialog>
		<div class="zhuti" v-if="ontype == '4'">
			<div style="padding: 20px 0;">对账处理记录</div>

			<el-table :data="chuliData"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="订单号" min-width="20%" prop="orderFormid">

				</el-table-column>
				<el-table-column label="数据状态" width="auto" min-width="10%">
					<template slot-scope="scope">
						{{scope.row.dataIntegrity ==1?'数据不完备':'数据完备'}}
					</template>
				</el-table-column>
				<el-table-column label="类型" width="auto" min-width="10%">
					<template slot-scope="scope">
						{{scope.row.type ==1?'检查 ':'核查'}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>

			</el-table>
			<div style="display: flex;">
				<el-button @click="clriz" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype == '3'">
			<div style="padding: 20px 0;">支付交易记录展示</div>
		<div class="formSearch">
							<el-form :inline="true" :model="formInline" label-position="left">
								
								<el-form-item label="下单时间">
									<el-date-picker v-model="formInline.dates" type="daterange" range-separator="至"
										start-placeholder="开始日期" end-placeholder="结束日期" style="width:200px" />
								</el-form-item>
								<el-form-item label="支付金额">
									<div>
										<el-input placeholder="请输入" style="width: 80px;" v-model.number="minOrderPrice">
										</el-input>
										至
										<el-input placeholder="请输入" style="width:80px;" v-model.number="maxOrderPrice
		">
										</el-input>
									</div>
								</el-form-item>
								
		
							</el-form>
							<div style="width:16%">
								<el-button style="background-color: #3F9B6A;color: #fff;" @click="search">查询
								</el-button>
								<el-button class="buttonHover"
									style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
									@click="resetting">重置
								</el-button>
							</div>
						</div>
			<el-table :data="tableData"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="订单号" min-width="20%" prop="orderFormid">
						
				</el-table-column>
				<el-table-column prop="customerName" min-width="20%" label="下单账户"  />
				<el-table-column prop="price" label="支付金额" width="120" />
				
				

				<el-table-column label="下单时间" prop="paymentTime" width="auto" min-width="10%">
					
				</el-table-column>
				<el-table-column prop="inspect" label="核查结果" width="auto" min-width="10%">
		
				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
					<template slot-scope="scope">
						<div @click="hechaB(scope.row)" class="tableBtn greens">核查</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex;">
				<el-button @click="clriz" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="hechaBShow" title="支付交易记录核查" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
			核查结果：
				<el-input v-model="hechaObj.inspect"></el-input>
				
			</div>
			<div style="display: flex;">
				<el-button @click="hechaBShowClose" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="hechaBShowChek">确定
				</el-button>
			</div>
		
		</el-dialog>
		<el-dialog :visible.sync="bianjiShow" title="标记" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
			标记：
				<!-- <el-input v-model="biaojiObj.mark"></el-input> -->
				<el-select v-model="biaojiObj.mark" placeholder="请选择" style="width: 100px;">
					<el-option :label="item.markName"  :value="item.id"  v-for="(item,index) in biaotable"/>
				
				</el-select>
			</div>
			<div style="display: flex;">
				<el-button @click="biaojiClose" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaojiChek">确定
				</el-button>
			</div>
		
		</el-dialog>
	</div>
</template>

<script>
	import {
		merchantQueries,
		reconciliation,
		excelGetAll,
		orderGetAll,
		orderDataIntegrity,
		DataIntegrityByPage,
		orderInspect,
		orderMark,
		cereShopOrderMark,
		cereShopOrderMarkByPage,
		cereShopOrderMarkEdit
	} from '../../../api/online.js'
	import {
		orderExport
	} from '@/api/order'
	export default {
		data() {
			return {
				rules: {},
				formInline: {
					searchType: '1',
					search: '', // 搜索字段
					state: [2, 3, 4],
					// afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
					dates: [], // 下单时间数组
					page: 1,
					shopName: '',
					pageSize: 10

				},
				minOrderPrice: null,
				maxOrderPrice: null,
				currentPage: 1,
				total: 0,
				flag: false,
				pageSize: 10,
				ggXin: false,
				index: 1,
				formSel: {
					state: '',
					minMach: '',
					maxMach: '',
					shopName: '',
				},
				paryTime: [],
				tableData: [],
				pageindex: {
					merchantId: '9E602E5977EC48DEA06D42C67F4C93F0',
					page: 1,
					limit: 10,
					orderTimeStart: '',
					orderTimeEnd: '',
				},
				orderTimeStart: '',
				orderTimeEnd: '',
				duiData: {
					orderNo: '',
					page: 1,
					limit: 10,
					orderTimeStart: '',
					orderTimeEnd: '',
					orderPrice: []
				},
				chouquShow: false,
				ontype: '1',
				biaotable: [],
				biaoShow: false,
				tiaoAdd: false,
				tiaoObj: {
					markName: '',
					createTime: '',
				},
				chuliShow: false,
				chuliData: [],
				hechaBShow:false,
				hechaObj:{
					orderFormid:'',
					inspect:''
				},
				bianjiShow:false,
				biaojiObj:{
					mark:'',
					orderFormid:''
				},
			}
		},
		computed: {},
		mounted() {
			this.getAll()
			this.getOrder()
		},
		methods: {

			biaojiClose(){
					this.bianjiShow = false
			},
			async biaojiChek(){
					await orderMark(this.biaojiObj)
				this.bianjiShow = false
				this.getAll()
				
			},
			biaojis(row){
				this.bianjiShow = true
				this.biaojiObj.orderFormid = row.orderFormid
				this.biaojiObj.mark = ''
				this.setTable()
			},
			hechaBShowClose(){
				this.hechaBShow = false
			},
			async hechaBShowChek(){
				await  orderInspect(this.hechaObj)
				this.hechaBShow = false
				this.getAll()
			},
			hechaB(row){
				this.hechaObj.inspect= ''
				this.hechaObj.orderFormid= row.orderFormid
				this.hechaBShow = true
			},
			zhifuList(){
				this.ontype = '3'
			},
			chuliList() {
				this.chuliShow = true
				this.ontype = '4'
				this.grityByPage()
			},
			clriz(val) {
				this.ontype = '1'
				this.formInline = {
					searchType: '1',
					search: '', // 搜索字段
					state: [2, 3, 4],
					// afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
					dates: [], // 下单时间数组
					page: 1,
					shopName: '',
					pageSize: 10

				}
				this.getAll()
			},
			async grityByPage(val) {
				let obj = {
					pageNumber: 0,
					pageSize: 100,
				}
				let res = await DataIntegrityByPage(obj)
				this.chuliData = res.data
			},
			// async tiaoChek(){
			//  this.tiaoObj.createTime = this.currentTime()
			// 	await liationAdds(this.tiaoObj)	
			// 	this.tiaoAdd = false
			// 	this.setTable(this.tiaoObj.type)
			// },
			add(val) {
				this.tiaoObj.name = ''
				this.tiaoObj.type = val
				this.tiaoAdd = true
			},
			biaoclose() {
				this.tiaoAdd = false
				this.tiaoObj.name = ''
			},
			async deltab(row){
				await cereShopOrderMarkEdit(row)
				this.setTable()
			},
			async biaoChack() {
				this.tiaoObj.createTime = this.currentTime()
			await cereShopOrderMark(this.tiaoObj)
			this.tiaoAdd = false
			this.setTable()
			},
			biaoSet() {
				this.biaoShow = true
				this.ontype = '5'
				this.setTable()
			},
			async setTable() {
				let obj = {
					pageNumber: 0,
					pageSize: 100,
				}
				let res = await cereShopOrderMarkByPage(obj)
				this.biaotable = res.data
			},
			async jiancha(row, val) {
				let obj = {
					orderFormid: row.orderFormid,
					dataIntegrity: 3,
					type: val,
					createTime: this.currentTime()
				}
				await orderDataIntegrity(obj)
				this.$message({
					message: '成功',
					type: 'success'
				});
			},
			close() {
				this.chouquShow = false
			},
			tiaoChek() {
				this.chouquShow = false
				this.getAll()
			},
			chouqu() {
				this.formInline.dates = []
				this.formInline.type = ''
				this.chouquShow = true

			},
			async getAll(formInline) {
				this.tableLoading = true
				const res = await orderGetAll(this.formInline)
				this.tableData = res.data.list
				this.total = res.data.total

				// this.tableLoading = false
			},
			async getOrder() {
				//    this.getFirstDayOfYear()
				//   this.getLastDayOfYear()
				//  const res =   await merchantQueries(this.pageindex)
				//   this.tableData = JSON.parse(res.data).records
				// this.total = JSON.parse(res.data).records.length
				// console.log(JSON.parse(res.data))

			},
			getFirstDayOfYear() {
				const now = new Date();
				const year = now.getFullYear();
				const firstDay = new Date(year, 0, 1, 0, 0, 0, 0);
				this.orderTimeStart = this.formatDate(firstDay);
			},
			getLastDayOfYear() {
				const now = new Date()
				const year = now.getFullYear()
				const lastDay = new Date(year, 11, 31, 23, 59, 59, 999)
				this.orderTimeEnd = this.formatDate(lastDay)
			},
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();

				// 为月、日、小时、分钟和秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;

				// 返回格式化的日期和时间字符串
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			addbuss(item) {
				let obj = {
					merchantId: "9E602E5977EC48DEA06D42C67F4C93F0",
					payId: item.payId

				}
				const h = this.$createElement;
				this.$msgbox({
					title: '对账',
					message: h('p', null, [
						h('span', null, '是否已对账 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							reconciliation(obj).then(res => {
								this.$message({
									message: res.data,
									type: 'success'
								})
								this.getAll()
							})

							done();
						} else {
							done();
						}
					}
				})


			},
			onSubmit() {

				if (this.formInline.paryTime.length != 0) {
					this.pageindex.orderTimeStart = this.formInline.paryTime[0]
					this.pageindex.orderTimeEnd = this.formInline.paryTime[1]
					const res = merchantQueries(this.pageindex).then(res => {
						this.tableData = JSON.parse(res.data).records
						this.total = JSON.parse(res.data).records.length
					})
				}

			},
			resetting() {
				// this.pageindex={
				//   merchantId:'9E602E5977EC48DEA06D42C67F4C93F0',
				//   page: 1,
				//   limit: 10,
				//   orderTimeStart:'',
				//   orderTimeEnd:'',
				// }
				this.formInline = {

					searchType: '1',
					search: '', // 搜索字段
					state: [2, 3, 4],
					// afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
					dates: [], // 下单时间数组
					page: 1,
					shopName: '',
					pageSize: 10


				}
				this.minOrderPrice = null
				this.maxOrderPrice = null
				this.getAll()
				this.$message({
				        message: '整理成功',
				        type: 'success'
				      })
			},
			async daochu() {
				let res = await excelGetAll(this.formInline)
				if (!res) {
					return
				}
				const blob = new Blob([res], {
					type: 'application/vnd.ms-excel'
				})
				const fileName = '对账结果.xls'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
				this.$message({
					message: '导出成功',
					type: 'success'
				})
			},
			handleSizeChange() {

			},
			handleCurrentChange(val) {
				this.formInline.page = val
				this.getAll()
			},
			search() {
				this.total = 1
				this.formInline.page = 1

				if (this.minOrderPrice != null && this.minOrderPrice != '') {
					this.formInline.minOrderPrice = this.minOrderPrice
				}
				if (this.maxOrderPrice != null && this.maxOrderPrice != '') {
					this.formInline.maxOrderPrice = this.maxOrderPrice
				}
				this.getAll(this.formInline)
			},
			closeFn() {
				this.ggXin = false
				this.index = 1
			}
		}
	}
</script>

<style scoped>
	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;
		position: relative;
	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .formSearch {
		position: relative;
		margin: 20px 0;
		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;

		.el-form-item__label {
			font-size: 14px;
			color: #000;
		}
	}

	.greens {
		color: #3F9B6A;
	}


	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}
</style>
<style lang="scss" scoped>
	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}
</style>