<template>
	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
		<div>
			<div class="filter-container" ref="filter-container">
				<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
					<el-row>
						<el-form-item label="姓名">
							<el-input v-model.number="listQuery.username" placeholder="请输入姓名"></el-input>
						</el-form-item>
						<el-form-item label="手机号">
							<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
						<el-form-item label="时间">
							<el-date-picker v-model="time" type="datetimerange" placeholder="选择时间范围"></el-date-picker>
						</el-form-item>
						<!-- <el-form-item label="流水类型" prop="type">
							<el-select class="filter-item" v-model="listQuery.source" placeholder="请输入资源类型">
								<el-option
									v-for="(item, index) in typeOptions"
									:key="index"
									:label="item.name"
									:value="item.val"
								></el-option>
							</el-select>
						</el-form-item>-->

						<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
					</el-row>
				</el-form>
			</div>
			<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
				<el-table-column align="center" label="流水类型">
					<template scope="scope">
						<span v-if="scope.row.source==0">活动奖励</span>
						<span v-if="scope.row.source==1">一级提成</span>
						<span v-if="scope.row.source==2">会员充值</span>
						<span v-if="scope.row.source==10">成功提现</span>
						<span v-if="scope.row.source==11">转账</span>
						<span v-if="scope.row.source==12">消费使用</span>
						<span v-if="scope.row.source==13">手续费</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="姓名">
					<template scope="scope">
						<span>{{scope.row.username}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="手机号">
					<template scope="scope">
						<span>{{scope.row.phone}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="来源">
					<template scope="scope">
						<span>{{scope.row.sourceName || '-'}}</span>
					</template>
				</el-table-column>

				<!-- <el-table-column width="200" align="center" label="订单金额">
          <template scope="scope">
            <span>{{scope.row.price || '-'}}</span>
          </template>
				</el-table-column>-->
				<!-- <el-table-column width="200" align="center" label="提成比例">
          <template scope="scope">
            <span v-if="scope.row.extract">{{scope.row.extract}}</span>
            <span else></span>
          </template>
				</el-table-column>-->
				<el-table-column align="center" label="金额变动">
					<template scope="scope">
						<span v-if="scope.row.itype==0">+{{scope.row.amount}}</span>
						<span v-if="scope.row.itype==1">-{{scope.row.amount}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column width="100" align="center" label="状态">
          <template scope="scope">
            <span v-if="scope.row.source==12">已消费</span>
            <span v-if="scope.row.source==1">已到账</span>
          </template>
				</el-table-column>-->
				<el-table-column align="center" label="时间">
					<template scope="scope">
						<span>{{scope.row.crtTimeStr}}</span>
					</template>
				</el-table-column>
			</el-table>
			<div v-show="!listLoading" class="pagination-container">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="listQuery.page"
					:page-sizes="[10,20,30,40,50]"
					:page-size="listQuery.limit"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import 'static/css/uploadImg.css' // 引入图片上传组件对话框

import { formatDate } from 'utils/dateFormattor'

import {
	toEast8Date,
	deepCopyDate,
	newEast8Date,
	convertDate2Str,
	timestamp2Date
} from 'utils/dateUtils'

import rsCode from '../../utils/rsCode'

import { mapGetters } from 'vuex'
import { getToken } from 'utils/auth'
import { rewardList } from 'api/purseManage'
import Element1 from '../admin/menu/components/element'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'

export default {
	name: 'tourManage',
	components: {
		ElCol,
		ElRow,
		Element1
	},
	data() {
		return {
			// typeOptions: [
			// 	{
			// 		name: '全部',
			// 		val: ''
			// 	},
			// 	{
			// 		name: '一级提成',
			// 		val: '1'
			// 	},
			// 	{
			// 		name: '活动奖励',
			// 		val: '0'
			// 	},
			// 	{
			// 		name: '消费使用',
			// 		val: '12'
			// 	},
			// 	{
			// 		name: '成功提现',
			// 		val: '10'
			// 	}
			// ],
			time: '',
			BASE_API: process.env.BASE_API,
			showLoadingBody: false,
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				phone: '', //手机号
				username: '' //姓名
			},
			inline: true,
			tableKey: 0
		}
	},
	created() {
		this.getList()
	},
	computed: {
		...mapGetters(['elements'])
	},
	methods: {
		/**
		 * 获取旅游列表
		 * */
		getList() {
			this.listLoading = true
			rewardList(this.listQuery).then(response => {
				let totalCountRs = undefined
				let listRs = undefined
				if (
					!this.$utils.isEmpty(response.data.data) &&
					this.$utils.isInteger(response.data.totalCount)
				) {
					listRs = response.data.data
					totalCountRs = response.data.totalCount
					listRs.map(function(item) {
						item.crtTimeStr = timestamp2Date(item.crtTime)
					})
				}
				this.listLoading = false
				this.list = listRs
				this.total = totalCountRs
			})
		},
		handleFilter() {
			this.listQuery.page = 1
			this.listQuery.startTime = new Date(this.time[0]).getTime() || null
			this.listQuery.endTime = new Date(this.time[1]).getTime() || null
			delete this.listQuery.time
			this.$refs.queryForm.validate(valid => {
				if (valid) {
					this.getList()
				} else {
					return false
				}
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		}
	}
}
</script>
