<template>
	<!-- 用户-用户分组 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 相关操作 -->
			<Row type="flex">
				<Col v-bind="grid">
				<Button v-auth="['admin-user-group']" type="primary" @click="add">添加游戏</Button>
				</Col>
			</Row>
			<!-- 用户分组表格 -->
			<Table :columns="columns1" :data="groupLists" ref="table" class="mt25" :loading="loading" highlight-row
				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row, index }" slot="outGame">
					<p>获得奖金{{row.fail_award}}%</p>
					<p>返还余额{{row.fail_return}}%</p>
				</template>
				<template slot-scope="{ row, index }" slot="onGame">
					<!-- <p>绿积分{{row.win_integral}}%</p> -->
					<p>红积分{{row.red_integral}}%</p>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<!-- <a @click="openGame(row,'是否开奖',index)">开奖</a>
					<Divider type="vertical" /> -->
					<a @click="edit(row.id)">修改</a>
					<Divider type="vertical" />
					<a @click="del(row,'删除游戏',index)">删除</a>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" show-elevator show-total @on-change="pageChange" :page-size="groupFrom.limit" />
			</div>
		</Card>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		gameEdit,
		gameCreate,
		gameList
	} from '@/api/user';
	export default {
		name: "user_group",
		data() {
			return {
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24
				},
				loading: false,
				columns1: [{
						title: 'ID',
						key: 'id',
						width: 80
					},
					{
						title: '游戏名称',
						key: 'name',
						minWidth: 120
					},
					{
						title: '结束参与时间',
						key: 'finish_time',
						minWidth: 100
					},
					{
						title: '开奖时间',
						key: 'open_time',
						minWidth: 100
					},
					{
						title: '中奖率',
						key: 'win_rate',
						minWidth: 100
					},
					{
						title: '未中奖',
						slot: 'outGame',
						minWidth: 150
					},
					// {
					// 	title: '中奖',
					// 	slot: 'onGame',
					// 	minWidth: 150
					// },
					{
						title: '底池',
						key: 'win_integral',
						minWidth: 150
					},
					{
						title: '红积分比例',
						key: 'red_integral',
						minWidth: 150
					},
					{
						title: '每日参与次数',
						key: 'join_limit',
						minWidth: 100
					},
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 120,
						maxWidth: 140
					}
				],
				groupFrom: {
					page: 1,
					limit: 10
				},
				groupLists: [],
				total: 0
			}
		},
		computed: {
			...mapState('admin/layout', [
				'isMobile'
			]),
			labelWidth() {
				return this.isMobile ? undefined : 75;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		created() {
			this.getList();
		},
		methods: {
			// 添加
			add() {
				this.$modalForm(gameCreate()).then(() => this.getList());
			},
			// 分组列表
			getList() {
				this.loading = true;
				gameList(this.groupFrom).then(async res => {
					let data = res.data;
					this.groupLists = data.list;
					this.total = data.count;
					this.loading = false;
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				})
			},
			pageChange(index) {
				this.groupFrom.page = index;
				this.getList();
			},
			//修改
			edit(id) {
				this.$modalForm(gameEdit(id)).then(() => this.getList());
			},
			openGame(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `api/test`,
					method: "post",
					ids: "",
					userApi:true,
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 删除
			del(row, tit, num) {
				let delfromData = {
					title: tit,
					num: num,
					url: `game/game/${row.id}`,
					method: "DELETE",
					ids: "",
				};
				this.$modalSure(delfromData)
					.then((res) => {
						this.$Message.success(res.msg);
						this.groupLists.splice(num, 1);
						this.groupLists = [];
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
		}
	}
</script>