<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<view class="uni-title">{{$t('pact.title')}}</view>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="search" @confirm="getSearch"
					:placeholder="$t('pact.form.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('pact.form.field.id')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.linkman')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.phone')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.people')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.pact_time')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.status')}}</uni-th>
					<uni-th align="center">{{$t('pact.form.field.message')}}</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">{{item.pact_id}}</uni-td>
					<uni-td align="center">{{item.linkman}}</uni-td>
					<uni-td align="center">{{item.phone}}</uni-td>
					<uni-td align="center">{{item.people}}</uni-td>
					<uni-td align="center">{{item.pact_time.text}}</uni-td>
					<uni-td align="center">
						<text v-if="item.status.value == 10" class="hm-col-warning">
							{{item.status.text}}
						</text>
						<text v-if="item.status.value == 20" class="hm-col-error">
							{{item.status.text}}
						</text>
						<text v-if="item.status.value == 30" class="hm-col-success">
							{{item.status.text}}
						</text>
						<text v-if="item.status.value == 40" class="hm-col-info">
							{{item.status.text}}
						</text>
					</uni-td>
					<uni-td align="center">{{item.message?item.message:'--'}}</uni-td>
					<uni-td width="180" align="center">
						<view class="uni-group">
							<button @click="action(item.pact_id)" class="uni-button" size="mini"
								type="primary">{{$t('common.operate')}}</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="action" :is-mask-click="false">
			<view class="popup-350">
				<view class="title">
					{{$t('pact.action')}}
					<view @click="$refs.action.close()" class="close">
						<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
					</view>
				</view>
				<view class="box hm-p-10">
					<uni-row gutter="50">
						<uni-col :span="6">
							<view class="item" @click="edit(10)">
								<uni-icons type="calendar-filled" size="50" color="#ff9900"></uni-icons>
								<view class="text">{{$t('pact.status10')}}</view>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view class="item" @click="edit(20)">
								<uni-icons type="clear" size="50" color="#fa3534"></uni-icons>
								<view class="text">{{$t('pact.status20')}}</view>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view class="item" @click="edit(30)">
								<uni-icons type="checkbox-filled" size="50" color="#19be6b"></uni-icons>
								<view class="text">{{$t('pact.status30')}}</view>
							</view>
						</uni-col>
						<uni-col :span="6">
							<view class="item" @click="edit(40)">
								<uni-icons type="minus-filled" size="50" color="#8f939c"></uni-icons>
								<view class="text">{{$t('pact.status40')}}</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</uni-popup>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				pact_id:'',
				list: [],
				search: '',
				page: 1,
				loading: false,
			}
		},
		onLoad() {
			let _this = this;
			_this.getList();
		},
		methods: {
			/**
			 * 操作
			 */
			action(id) {
				let _this = this;
				_this.pact_id = id;
				_this.$refs.action.open();
				
				
				
				_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('表单提交错误');
				});
			},
			/**
			 * 开启充值窗口
			 */
			edit(status) {
				let _this = this,
				title = '';
				if(status == 10){
					title='进行中';
				}
				if(status == 20){
					title='已过期';
				}
				if(status == 30){
					title='已守约';
				}
				if(status == 40){
					title='已取消';
				}
				uni.showModal({
					title: "提示",
					content: "确定要把状态设置为："+title+"？",
					success: function(o) {
						if (o.confirm) {
							App._get('pact/status', {
								status:status,
								id:_this.pact_id
							}, result => {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 获取列表
			 */
			getList() {
				let _this = this;
				_this.loading = true;
				App._get('pact/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;
			}
		}
		.box {
			padding: 15px;
			font-size: 14px;
			.label{
				padding-top: 9px;
			}
		}
	}

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

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