<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-row :gutter="20">
				<el-col :span="4">
					<el-input v-model="search.userName" placeholder="请输入用户姓名"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="search.phone" placeholder="请输入手机号"></el-input>
				</el-col>
				<el-col :span="6">
					<el-date-picker v-model="time" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="searchBtn">搜索</el-button>
				</el-col>
			</el-row>

			<el-table
				:data="list"
				border
				fit
				highlight-current-row
				style="width: 100%;margin-top:10px"
				v-loading="loading"
			>
				<el-table-column align="center" label="姓名">
					<template slot-scope="scope">
						<span>{{scope.row.userName}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="手机号">
					<template slot-scope="scope">
						<span>{{scope.row.phone}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="来源">
					<template slot-scope="scope">
						<span>{{scope.row.sourceName}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="订单金额">
					<template slot-scope="scope">
						<span>{{scope.row.price}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="提成比例">
					<template slot-scope="scope">
						<span>{{scope.row.extract}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="金额变动">
					<template slot-scope="scope">
						<span>{{scope.row.commission}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="状态">
					<template slot-scope="scope">
						<span>{{scope.row.waiting == 1 ? '入账' : '未入账'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="时间">
					<template slot-scope="scope">
						<span>{{getLocalTime(scope.row.crtTime)}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="deposit(scope.row)"
						>详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="search.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="search.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="margin-top:20px"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { recordList } from 'api/purseManage'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			loading: false,
			time: [],
			list: [],
			total: null,
			search: {
				page: 1,
				limit: 10,
				userName: null,
				phone: null,
				startTime: null,
				endTime: null
			}
		}
	},
	methods: {
		deposit(row) {
			switch (row.orderType) {
				case 1:
					this.$router.push({
						path: '/order/rentVehicleInfo',
						query: {
							id: row.orderNo
						}
					})
					break
				case 2:
					this.$router.push({
						path: '/order/tourOrderInfo',
						query: {
							id: row.orderNo
						}
					})
					break
				case 3:
					this.$router.push({
						path: '/order/memberOrderInfo',
						query: {
							id: row.orderNo
						}
					})
					break
				default:
					break
			}
		},
		handleSizeChange(val) {
			this.search.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.search.page = val
			this.getList()
		},
		getList() {
			this.loading = true
			this.search.startTime = new Date(this.time[0]).getTime() || null
			this.search.endTime = new Date(this.time[1]).getTime() || null
			recordList(this.search).then(data => {
				if (data.status == 200) {
					this.list = data.data.data
					this.total = data.data.totalCount
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		},
		searchBtn() {
			this.search.page = 1
			this.getList()
		},
		getLocalTime(nS) {
			//将时间戳（十三位时间搓，也就是带毫秒的时间搓）转换成时间格式
			// d.cTime = 1539083829787
			let date = new Date(nS)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let hours = date.getHours()
			let minutes = date.getMinutes()
			let secibds = 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
			secibds = secibds < 10 ? '0' + secibds : secibds
			date =
				year +
				'-' +
				month +
				'-' +
				day +
				' ' +
				hours +
				':' +
				minutes +
				':' +
				secibds
			return date
		}
	}
}
</script>
<style>
</style>
