<template>
	<!-- 财务-充值记录 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<!-- 查询条件 -->
				<Form ref="formValidate" :model="formValidate" :label-width="labelWidth" inline
					:label-position="labelPosition" class="tabform" @submit.native.prevent>
					<FormItem label="时间选择：">
						<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal"
							format="yyyy/MM/dd HH:mm" type="datetimerange" placement="bottom-start" placeholder="自定义时间"
							class="input-width" :options="options"></DatePicker>
					</FormItem>

					<FormItem label="奖励类型：">
						<Select v-model="formValidate.type" class="input-add">
							<Option value="">全部</Option>
							<Option v-for="(item,ind) in typeList" :value="item.id">{{item.name}}</Option>
						</Select>
						<Button type="primary" @click="orderSearch()" class="mr">查询</Button>
						<Button type="primary" @click="dialogVisible= true" class="mr">发放奖励</Button>
					</FormItem>
				</Form>
			</div>
		</Card>
		<!-- 中间数据卡片 -->
		<cards-data @clickitem='clickitem' :cardLists="cardLists" v-if="cardLists.length >= 0"></cards-data>
		<Card :bordered="false" dis-hover>
			<!--      <div>充值记录列表</div>-->
			<!-- 表格 -->
			<Table ref="table" :columns="columns" :data="tabList" class="ivu-mt" :loading="loading" no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="add_time">
					<span>{{ row.add_time|formatDate }} </span>
				</template>
				<template slot-scope="{ row }" slot="type">
					<span v-for="item in typeList" v-if="item.id==row.type">{{item.name}}</span>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="formValidate.page" show-elevator show-total @on-change="pageChange"
					:page-size="formValidate.limit" />
			</div>
		</Card>
		<Drawer title="发放奖励" :closable="false" width="500" class-name="order_box" v-model="dialogVisible" :styles="{ padding: 20 }">
			<Form ref="formValidate" :label-width="labelWidth" inline
				:label-position="labelPosition" class="tabform" @submit.native.prevent>
				<FormItem label="奖励类型：">
					<Select v-model="sendType" class="input-add">
						<Option value="">全部</Option>
						<Option v-for="(item,ind) in typeList" :value="item.id">{{item.name}}</Option>
					</Select>
				</FormItem>
				<FormItem label="发放金额：">
				  <Input
					placeholder="请输入发放金额"
					class="input-add"
					type="number"
					v-model="sendMoney"
					clearable
				  />
				</FormItem>
				<FormItem >
					<Button type="primary" @click="sendBonus()" class="mr">确定</Button>
					<Button @click="dialogVisible=false" class="mr">取消</Button>
				</FormItem>
			</Form>
		</Drawer>
	</div>
</template>
<script>
	import cardsData from "../card/cards";
	import {
		mapState
	} from "vuex";
	import exportExcel from "@/utils/newToExcel.js";
	import {
		award_lake,
		award_lake_log,
		award_lake_post,
		award_set,
	} from "@/api/newApi";
	import timeOptions from "@/utils/timeOptions";
	import { formatDate } from "@/utils/validate";
	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:[],//奖池类型
				formValidate: {
					data: "",
					type: "",
					change_type:'',
					excel: 0,
					page: 1,
					limit: 20,
				},
				total: 0,
				cardLists: [],
				loading: false,
				columns: [{
						title: "ID",
						key: "id",
						sortable: true,
						width: 80,
					},
					{
						title: "创建时间",
						slot: "add_time",
						minWidth: 160,
					},
					{
						title: "备注",
						key: "mark",
						minWidth: 150,
					},
					{
						title: "金额",
						key: "num",
						minWidth: 110,
					},
					{
						title: "类型",
						slot: "type",
						minWidth: 100,
					},
					// {
					// 	title: "操作",
					// 	slot: "right",
					// 	minWidth: 100,
					// },
				],
				tabList: [],
				options: timeOptions,
				timeVal: [],
				dialogVisible:false,//显示弹窗
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 80;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		mounted() {
			this.getList();
			this.get_award_lake()
		},
		methods: {
			clickitem(item){
				console.log('item',item)
				console.log(	this.$modalForm);
				this.$modalForm(award_set({ id: item.id })).then(() => this.get_award_lake());
			},
			// 发放奖励
			sendBonus(){
				award_lake_post({
					type:this.sendType,
					num:this.sendMoney
				})
					.then(async (res) => {
						this.$Message.success(res.msg);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 奖励类型
			get_award_lake(){
				award_lake()
					.then(async (res) => {
						this.typeList = res.data;
						this.getUserRecharge(this.typeList);
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 编辑提交成功
			submitFail() {
				this.getList();
				// this.get_award_lake();
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
				this.formValidate.page = 1;
				this.getList();
				// this.get_award_lake();
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.data = tab;
				this.timeVal = [];
				this.formValidate.page = 1;
				this.getList();
				// this.get_award_lake();
			},
			// 列表
			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);
					});
			},
			// 搜索
			orderSearch() {
				this.formValidate.page = 1;
				this.getList();
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 小方块
			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",
				  }
				})
				
				  // {
				  //   col: 6,
				  //   count: this.extractStatistics.price,
				  //   name: "待提现金额",
				  //   className: "md-basket",
				  // },
				  // {
				  //   col: 6,
				  //   count: this.extractStatistics.brokerage_count,
				  //   name: "佣金总金额",
				  //   className: "md-pricetags",
				  // },
				  // {
				  //   col: 6,
				  //   count: this.extractStatistics.priced,
				  //   name: "已提现金额",
				  //   className: "md-cash",
				  // },
				  // {
				  //   col: 6,
				  //   count: this.extractStatistics.brokerage_not,
				  //   name: "未提现金额",
				  //   className: "ios-cash",
				  // },
				
				// userRechargeApi({
				// 		data: this.formValidate.data,
				// 		paid: this.formValidate.paid,
				// 		nickname: this.formValidate.nickname,
				// 	})
				// 	.then(async (res) => {
				// 		let data = res.data;
				// 		this.cardLists = data;
				// 	})
				// 	.catch((res) => {
				// 		this.$Message.error(res.msg);
				// 	});
			},
			// 数据导出；
			async exports() {
				let [th, filekey, data, fileName] = [
					[],
					[],
					[], ""
				];
				//   let fileName = "";
				let excelData = JSON.parse(JSON.stringify(this.formValidate));
				excelData.page = 1;
				for (let i = 0; i < excelData.page + 1; i++) {
					let lebData = await this.getExcelData(excelData);
					if (!fileName) fileName = lebData.filename;
					if (!filekey.length) {
						filekey = lebData.filekey;
					}
					if (!th.length) th = lebData.header;
					if (lebData.export.length) {
						data = data.concat(lebData.export);
						excelData.page++;
					} else {
						exportExcel(th, filekey, fileName, data);
						return;
					}
				}
			},
		},
	};
</script>
<style scoped lang="stylus">
	.input-add {
		width: 250px;
		margin-right: 14px;
		display: inline-table;
	}

	.ivu-mt .type .item {
		margin: 3px 0;
	}

	.tabform {
		margin-bottom: 10px;
	}

	.Refresh {
		font-size: 12px;
		color: #1890FF;
		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 */
</style>