<template>
	<div>
		<el-card :bordered="false" shadow="never" class="ivu-mb-16" :body-style="{ padding: 0 }">
			<div class="padding-add">
				<el-form ref="formValidate" :model="formValidate" :label-width="labelWidth" label-position="right"
					inline @submit.native.prevent>
					<el-form-item label="时间选择：">
						<el-date-picker clearable v-model="timeVal" type="daterange" :editable="false"
							@change="onchangeTime" format="yyyy/MM/dd" value-format="yyyy/MM/dd"
							start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
							style="width: 250px" class="mr20"></el-date-picker>
					</el-form-item>
					<el-form-item label="奖励类型：">
						<el-select clearable v-model="formValidate.type" placeholder="请选择" @change="selChange"
							class="form_content_width">
							<el-option value="" label="全部"></el-option>
							<el-option v-for="(item, index) in typeList" :key="index" :value="item.id"
								:label="item.name"></el-option>
						</el-select>
						<el-button type="primary" @click="selChange">查询</el-button>
						<el-button type="primary" @click="modals= true">发放奖励</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<cards-data @clickitem='clickitem'  :cardLists="cardLists" v-if="extractStatistics"></cards-data>
		<el-card :bordered="false" shadow="never">
			<el-table ref="table" :data="tabList" v-loading="loading" empty-text="暂无数据" class="mt14">
				<el-table-column label="ID" width="80">
					<template slot-scope="scope">
						<span>{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" min-width="130">
					<template slot-scope="scope">
						<span>{{ scope.row.add_time|formatDate }} </span>
					</template>
				</el-table-column>
				<el-table-column label="金额" min-width="100">
					<template slot-scope="scope">
						<div>{{ scope.row.num }}</div>
					</template>
				</el-table-column>
				<el-table-column label="类型" min-width="100">
					<template slot-scope="scope">
						<span v-for="item in typeList" v-if="item.id==scope.row.type">{{item.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="备注" min-width="130">
					<template slot-scope="scope">
						<span>{{ scope.row.mark }}</span>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog :visible.sync="modals" title="发放奖励" :close-on-click-modal="false" width="540px">
			<el-form ref="formValidate" :model="formValidate" :label-width="labelWidth" label-position="right" inline
				@submit.native.prevent>
				<el-form-item label="奖励类型：">
					<el-select clearable v-model="sendType" placeholder="请选择" class="form_content_width">
						<el-option value="" label="全部"></el-option>
						<el-option v-for="(item, index) in typeList" :key="index" :value="item.id"
							:label="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发放金额：">
					<el-input v-model="sendMoney" type="number" placeholder="请输入发放金额" />
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button type="primary" size="small" @click="oks">确定</el-button>
				<el-button type="primary" size="small" @click="modals=false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import cardsData from '../card/cards.vue';
	import {
		mapState
	} from 'vuex';
	import {
		formatDate
	} from '@/utils/validate';
	import editFrom from '@/components/from/from';
	import {
		award_lake,
		award_lake_log,
		award_lake_post,
		award_set,
	} from "@/api/newApi";
	export default {
		name: 'rechargeBonus',
		components: {
			cardsData
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, 'yyyy-MM-dd hh:mm');
				}
			},
		},
		data() {
			return {
				sendType: '', //发放奖励的奖池类型
				sendMoney: '', //发放奖励金额
				typeList: [],
				tabList: [],
				fail_msg: {
					message: '输入信息不完整或有误!',
				},
				modals: false,
				total: 0,
				cardLists: [],
				loading: false,
				pickerOptions: this.$timeOptions,
				formValidate: {
					data: "",
					type: "",
					change_type: '',
					excel: 0,
					page: 1,
					limit: 20,
				},
				extractStatistics: {},
				timeVal: [],
				extractId: 0,
			};
		},
		watch: {
			$route() {
				if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
					this.getPath();
				}
			},
		},
		computed: {
			...mapState('media', ['isMobile']),
			labelWidth() {
				return this.isMobile ? undefined : '80px';
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			},
		},
		mounted() {
			if (this.$route.fullPath === this.$routeProStr + '/finance/user_extract/index?status=0') {
				this.getPath();
			} else {
				this.get_award_lake();
				this.getList();
			}
		},
		methods: {
			clickitem(item){
				this.$modalForm(award_set({ id: item.id })).then(() => this.get_award_lake());
			},
			oks() {
				award_lake_post({
						type: this.sendType,
						num: this.sendMoney
					})
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			getPath() {
				this.formValidate.page = 1;
				this.formValidate.status = parseInt(this.$route.query.status);
				this.getList();
			},
			// 奖励类型
			get_award_lake() {
				award_lake()
					.then(async (res) => {
						this.typeList = res.data;
						this.getUserRecharge(this.typeList);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			getUserRecharge(item) {
				this.cardLists = item.map((res) => {
					return {
						col: 6,
						count: res.award,
						name: res.name,
						id: res.id,
						user: res.user,
						// className: "md-basket",
					}
				})
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.formValidate.data = this.timeVal ? this.timeVal.join('-') : '';
				this.formValidate.page = 1;
				this.getList();
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.page = 1;
				this.formValidate.data = tab;
				this.timeVal = [];
				this.getList();
			},
			// 选择
			selChange() {
				this.formValidate.page = 1;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
				award_lake_log(this.formValidate)
					.then(async (res) => {
						let data = res.data;
						this.tabList = data.list;
						this.total = data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$message.error(res.msg);
					});
			},
		},
	};
</script>
<style scoped lang="stylus">
	.ivu-mt .type .item {
		margin: 3px 0;
	}

	.tabform {
		margin-bottom: 10px;
	}

	.Refresh {
		font-size: 12px;
		color: var(--prev-color-primary);
		cursor: pointer;
	}

	.ivu-form-item {
		margin-bottom: 10px;
	}

	.status>>>.item~.item {
		margin-left: 6px;
	}

	.status>>>.statusVal {
		margin-bottom: 7px;
	}

	/*.ivu-mt >>> .ivu-table-header*/
	/*    border-top:1px dashed #ddd!important*/
	.type {
		padding: 3px 0;
		box-sizing: border-box;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>