<template>
	<div class="content-wrap">
		<div class="flex">
			
			<div class="order-wrap" style="padding: 20px;">
				<!-- <div>
					<el-date-picker v-model="value1" type="daterange" format="yyyy 年 M 月 d 日" value-format="yyyy-M-d"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" style="margin-left: 20px;" @click="getList('reload')">查询</el-button>
					<div class="redr">
						<el-button>重新导入</el-button>
						<input type="file" ref="fileInputt" @change="readTxtFile('fileInputt')" class="dr-int" />
					</div>s
				</div> -->
				<!-- <template  v-if="js && js.loaded">
					<div style="padding-top: 20px;">
						<el-button>订单总数：{{js.order_count || 0}}</el-button>
						<el-button>结算订单数：{{js.settlement_count || 0}}</el-button>
						<el-button>卡单数量：{{js.prohibit_refund || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额：{{js.compensation_sum || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>物流费：{{js.expenses_sum || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>手续费：{{js.ommission_sum || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额10块的订单数：{{js.compensation_10_count || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额11块的订单数：{{js.compensation_11_count || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额12块的订单数：{{js.compensation_12_count || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额13块的订单数：{{js.compensation_13_count || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额14块的订单数：{{js.compensation_14_count || 0}}</el-button>
					</div>
					<div style="padding-top: 20px;">
						<el-button>赔付金额15块的订单数：{{js.compensation_15_count || 0}}</el-button>
					</div>
				</template> -->
				
				
				<!-- settlement_count -->
				<el-table :data="list" border style="width: 100%" max-height="520">
					<el-table-column prop="id" label="id" width="80">
					</el-table-column>
          <el-table-column prop="user_id" label="用户id" width="80">
          </el-table-column>
					<el-table-column prop="expenses_sum" label="手续费" width="100">
					</el-table-column>
          <el-table-column prop="commission_sum" label="手续费" width="100">
          </el-table-column>
					<el-table-column prop="compensation_sum" label="赔付金额" width="100">
					</el-table-column>
          <el-table-column prop="compensation_10_count" label="赔付金额为10块的单数" width="130">
          </el-table-column>
          <el-table-column prop="compensation_11_count" label="赔付金额为11块的单数" width="130">
          </el-table-column>
          <el-table-column prop="compensation_12_count" label="赔付金额为12块的单数" width="130">
          </el-table-column>
          <el-table-column prop="compensation_13_count" label="赔付金额为13块的单数" width="130">
          </el-table-column>
          <el-table-column prop="compensation_14_count" label="赔付金额为14块的单数" width="130">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="250">
          	<template slot-scope="scope">
          		<el-button type="primary" @click="authTlement(scope.row)" v-if="scope.row.status == 0">通过结算</el-button>
              <el-button type="success" v-if="scope.row.status == 1">已通过结算</el-button>
          	</template>
             </el-table-column>
         <!-- <el-table-column prop="compensation_15_count" label="赔付金额为15块的单数" width="98">
          </el-table-column> -->
					<!-- <el-table-column prop="status" label="结算状态" width="120">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.status == 6">已结算</el-tag>
							<el-tag type="warning" v-if="scope.row.status == 5">待结算</el-tag>
							<el-tag type="danger" v-if="scope.row.status == 7">已结束</el-tag>
						</template>
					</el-table-column> -->
					<!-- <el-table-column prop="" label="结算详情">
						<template slot-scope="scope">
							<span>理赔：{{scope.row.compensation}}</span>
						</template>
					</el-table-column> -->
				</el-table>
				<!-- 分页区域 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		settlement,
    
	} from '@/request/user.js'
  import {
    tlement,
    auth_tlement
  } from '@/request/agent.js'
	import {
		showTime
	} from '@/assets/js/tools.js'
	export default {
		name: 'settleOrder',
		data() {
			return {
				prohibit_refund: 0,
				not_out_time: 0,
				loading: false,
				value1: '',
				list: [],
				queryInfo: {
					page: 1,
					limit: 10,
					data: '',
					token: ''
				},
				total: 0,
				js: {
					loaded: false
				}
			}
		},
		watch: {
			value1(n, o) {
				this.queryInfo.data = n[0] + ' - ' + n[1]
			}
		},
		computed: {
			...mapState(['jsOrderToken'])
		},
		mounted() {
			// if (this.jsOrderToken.length > 0) {
			// 	this.queryInfo.token = this.jsOrderToken.join(',')
			// 	this.getList()
			// }
      this.getList()
		},
		methods: {
			...mapMutations(['setJsOrderToken']),
			showTime,
      authTlement(item) {
        auth_tlement({
          id: item.id
        }).then(res => {
          this.$msg.success('处理成功')
          this.getList()
        })
      },
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
			//加载token文件
			readTxtFile(refs) {
				let that = this
				const input = this.$refs[refs]
				const file = input.files[0]

				const reader = new FileReader()
				console.log('zhe');
				reader.onload = (e) => {
					let srt = e.target.result.replace(/\n\r/g, ',').replace(/\r\n/g, ',')
					let arr = srt.split(',').filter(item => item !== '')
					that.setJsOrderToken(arr)
					that.queryInfo.token = that.jsOrderToken.join(',')
					that.getList('reload')
				}
				reader.readAsText(file)
			},
			getList(type) {
				console.log('ks');
				let that = this
				if (type == 'reload') {
					that.queryInfo.page = 1
					// that.queryInfo.date
				}
				that.js = {}
				that.js.loaded = false
				
				tlement(that.queryInfo).then(res => {
					console.log(res);
					
					
					that.total = res.data.count
					// that.not_out_time = res.data.not_out_time
					// that.prohibit_refund = res.data.prohibit_refund
					that.list = res.data.data
					// if(that.total == 0) {
					// 	that.$msg.error('订单结算时间还未到')
					// }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left-wrap {
		width: 192px;
		height: 710px;
		background-color: #fff;
		flex-shrink: 0;
		margin-right: 20px;
		position: relative;
	}

	.order-wrap {
		background-color: #fff;
		height: 710px;
		flex-grow: 1;
	}

	.dr-wrap {
		width: 140px;
		height: 125px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border: 1px #999 dashed;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 12px;

		.dr-icon {
			font-size: 32px;
			color: #007aff;
		}

		.dr-tit {
			margin-top: 20px;
		}

		// .dr-int {
		// 	width: 140px;
		// 	height: 125px;
		// }
	}

	.dr-int {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		outline: medium none;
		cursor: pointer;
		-moz-opacity: 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

	/deep/ .el-range-separator {
		width: 50px;
	}

	.left-t {
		// display: flex;
		// justify-content: center;
		font-weight: bold;
		// height: 50px;
		margin-bottom: 15px;
		width: 180px; //定宽 
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; // 默认不换行；
	}
	.redr {
		display: inline-block;
		margin-left: 20px;
		position: relative;
		margin-right: 20px;
	}
</style>