<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="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-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
						<el-button class="filter-item" type="primary" v-waves icon="search" @click="clearFilter">清除搜索</el-button>
					</el-row>
				</el-form>
			</div>
			<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
				<el-table-column width="150" align="center" label="姓名" type="index">
					<template scope="scope">
						<span>{{scope.row.username}}</span>
					</template>
				</el-table-column>

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

				<!-- <el-table-column width="200" align="center" label="佣金比例">
					<template scope="scope">
						<span>{{scope.row.commissionRate+'%'}}</span>
					</template>
				</el-table-column>-->

				<el-table-column width="200" align="center" label="总收益">
					<template scope="scope">
						<span>{{scope.row.totalAmount}}</span>
					</template>
				</el-table-column>

				<el-table-column width="200" align="center" label="当前余额">
					<template scope="scope">
						<span>{{scope.row.balance}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="总提现">
					<template scope="scope">
						<span>{{scope.row.withdrawals}}</span>
					</template>
				</el-table-column>

				<el-table-column align="center" label="提现中">
					<template scope="scope">
						<span>{{scope.row.withdrawaling}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="未入账">
					<template scope="scope">
						<span>{{scope.row.unbooked}}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column align="center" label="当前余额">
					<template scope="scope">
						<span>{{scope.row.balance}}</span>
					</template>
				</el-table-column>-->
				<!-- <el-table-column align="center" label="操作" fixed="right">
					<template scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="deposit(scope.row)"
						>{{scope.row.isFrozen == 0 ? '禁止提现' : '允许提现'}}</el-button>
					</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 { incomList, forbidden } 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 {
			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: {
		//清除搜索
		clearFilter() {
			this.listQuery.username = this.listQuery.phone = null
			this.getList()
		},
		//提现
		deposit(row) {
			let titleMsg =
				row.isFrozen == 0 ? '请确定设为允许提现' : '请确定设为禁止提现'
			let setId = row.isFrozen == 0 ? 1 : 0
			this.$confirm(titleMsg, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				forbidden({ id: row.id, state: setId }).then(data => {
					if (data.status == 200) {
						this.$message.success('设置成功')
						this.getList()
					}
				})
			})
		},
		/**
		 * 获取旅游列表
		 * */
		getList() {
			this.listLoading = true
			incomList(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.visible2 = false;
					//   item.crtTimeStr = timestamp2Date(item.crtTime);
					//   if(item.storeTypeName){
					//     item.storeTypeName = item.storeTypeName.join("|");
					//   }
					// });
				}
				this.listLoading = false
				this.list = listRs
				this.total = totalCountRs
			})
		},
		handleFilter() {
			this.listQuery.page = 1
			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>
