<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<view class="uni-title">{{$t('user.list.title')}}</view>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="search" @confirm="getSearch"
					:placeholder="$t('common.placeholder.query')" />
				<button class="uni-button" type="default" size="mini"
					@click="getSearch">{{$t('common.button.search')}}</button>
			</view>
		</view>
		<view class="uni-container">
			<scroll-view class="scroll" scroll-y scroll-with-animation>
			<uni-table :loading="loading" border stripe :emptyText="$t('common.empty')">
				<uni-tr>
					<uni-th align="center">{{$t('user.list.table.avatar')}}</uni-th>
					<uni-th align="center">{{$t('user.list.table.nickname')}}</uni-th>
					<uni-th align="center">{{$t('user.list.table.money')}}</uni-th>
					<uni-th align="center">{{$t('user.list.table.pay')}}</uni-th>
					<uni-th align="center">{{$t('user.list.table.usable')}}</uni-th>
					<uni-th align="center">{{$t('common.operate')}}</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in list.data" :key="index">
					<uni-td align="center">
						<image class="avatar" :src="item.avatar.url"></image>
					</uni-td>
					<uni-td align="center">{{item.nickname?item.nickname:'--'}}</uni-td>
					<uni-td align="center">{{item.money}}</uni-td>
					<uni-td align="center">{{item.pay}}</uni-td>
					<uni-td align="center">{{item.usable}}</uni-td>
					<uni-td width="180" align="center">
						<view class="uni-group">
							<button @click="rechargeOpen(index)" class="uni-button" size="mini"
								type="default">{{$t('common.button.recharge')}}</button>
							<button @click="detailOpen(index)" class="uni-button" size="mini"
								type="primary">{{$t('common.button.detail')}}</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			</scroll-view>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="list.per_page" :current="list.current_page" :total="list.total"
					@change="change" />
			</view>
		</view>
		<uni-popup ref="recharge" :is-mask-click="false">
			<view class="popup-350">
				<view class="title">
					{{$t('user.list.recharge.title')}}
					<view @click="$refs.recharge.close()" class="close">
						<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
					</view>
				</view>
				<view class="form">
					<uni-forms :border="true" ref="form" v-model="formData" :rules="rules">
						<uni-forms-item :label="$t('user.list.recharge.field.balance')" labelWidth="35">
							<view class="label">{{user.money}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.recharge.field.pattern')" name="mode" labelWidth="35">
							<view class="hm-m-t-5">
								<uni-data-checkbox v-model="formData.mode" :localdata="mode" />
							</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.recharge.field.money')" name="money" labelWidth="35">
							<uni-easyinput @confirm="recharge" type="number"
								v-model="formData.money" :placeholder="$t('user.list.recharge.placeholder.money')">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.recharge.field.remarks')" name="remark" labelWidth="35">
							<uni-easyinput type="textarea" v-model="formData.remark" :placeholder="$t('user.list.recharge.placeholder.remarks')" />
						</uni-forms-item>
						<view class="uni-button-group hm-p-lr-33">
							<button class="uni-button uni-button-full" type="primary" :loading="rechargeLoading"
								:disabled="rechargeLoading" @click="recharge">{{$t('common.button.submit')}}</button>
						</view>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="detail" :is-mask-click="false">
			<view class="popup-350">
				<view class="title">
					{{$t('user.list.detail.title')}}
					<view @click="$refs.detail.close()" class="close">
						<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
					</view>
				</view>
				<view class="form">
					<uni-forms :border="true">
						<uni-forms-item :label="$t('user.list.detail.field.id')" labelWidth="35">
							<view class="label">{{user.user_id}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.gender')" labelWidth="35">
							<view class="label">{{user.gender.text}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.linkman')" labelWidth="35">
							<view class="label">{{user.linkman?user.linkman:'--'}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.phone')" labelWidth="35">
							<view class="label">{{user.phone?user.phone:'--'}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.region')" labelWidth="35">
							<view class="label">{{user.province}}{{user.city?user.city:'--'}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.money')" labelWidth="35">
							<view class="label">{{user.money}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.pay')" labelWidth="35">
							<view class="label">{{user.pay}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.score')" labelWidth="35">
							<view class="label">{{user.score}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.usable')" labelWidth="35">
							<view class="label">{{user.usable}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.v')" labelWidth="35">
							<view class="label">{{user.v.text}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.recommender')" labelWidth="35">
							<view class="label">{{user.recommender.text}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.birthday')" labelWidth="35">
							<view class="label">{{user.birthday?user.birthday:'--'}}</view>
						</uni-forms-item>
						<uni-forms-item :label="$t('user.list.detail.field.create_time')" labelWidth="35">
							<view class="label">{{user.create_time}}</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				list: [],
				search: '',
				page: 1,
				loading: false,
				formData: {
					mode: 10,
					money: '',
					remark: ''
				},
				// 单选数据源
				mode: [{
					text: '充值',
					value: 10
				}, {
					text: '赠送',
					value: 40
				}, {
					text: '扣除',
					value: 50
				}],
				rules: {
					money: {
						rules: [{
								required: true,
								errorMessage: '变更金额必须是大于0的整数',
							}
						]
					}
				},
				user:{},//用户详情
				rechargeLoading: false,
			}
		},
		onLoad() {
			let _this = this;
			_this.getList();
		},
		methods: {
			/**
			 * 会员详情
			 */
			detailOpen(index){
				let _this = this;
				_this.user = _this.list.data[index];
				_this.$refs.detail.open()
			},
			/**
			 * 充值
			 */
			recharge() {
				let _this = this;
				_this.$refs.form.validate().then(result => {
					_this.rechargeLoading = true;
					result.user_id = _this.user.user_id;
					//数据验证没有问题
					App._post_form('user/recharge', result, result => {
						App.showSuccess(result.msg, function() {
							_this.user = {};
							_this.rechargeLoading = false;
							_this.$refs.recharge.close();
							_this.getList();
						});
					}, false, () => {});
				}).catch(err => {
					console.log('表单提交错误');
				});
			},
			/**
			 * 开启充值窗口
			 */
			rechargeOpen(index) {
				let _this = this;
				_this.user = _this.list.data[index];
				_this.$refs.recharge.open()
			},
			/**
			 * 获取列表
			 */
			getList() {
				let _this = this;
				_this.loading = true;
				App._get('user/lists', {
					page: _this.page,
					search: _this.search
				}, function(result) {
					_this.list = result.data;

				}, false, function(result) {
					_this.loading = false;
					_this.search = '';
				});
			},
			// 分页触发
			change(e) {
				let _this = this;
				_this.page = e.current;
				_this.getList();
			},
			// 搜索
			getSearch() {
				let _this = this;
				if (_this.search == '') {
					App.showError('搜索内容为空');
					return false;
				}
				_this.page = 1;
				_this.getList();
			}
		}
	}
</script>

<style lang="scss">
	.popup-350 {
		.title {
			padding: 0 10px 10px 10px;
			border-bottom: #f0f0f0 solid 1px;

			.close {
				display: inline-block;
				float: right;
			}
		}

		.form {
			padding: 15px;
			font-size: 18px;
			.label{
				padding-top: 9px;
			}
		}
	}

	/* #ifndef H5 */
	page {
		padding-top: 85px;

	}
	/* #endif */
	.avatar {
		width: 60px;
		height: 60px;
	}
	
	.scroll{
		width: 100%;
		height: calc(100vh - 166px - (var(--top-window-height)));
	}
</style>
