<template>
	<div class="article-manager">
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form ref="artFrom" :model="artFrom" :label-width="75" label-position="right" @submit.native.prevent>
				<Row type="flex" :gutter="24">
					<Col v-bind="grid">
						<FormItem label="提现类型：" >
							<Select v-model="artFrom.extract_type"  @on-change="userSearchs" clearable placeholder="请选择提现类型">
							    <Option
							      label="全部"
							      value="">
							    </Option>
								<Option
								  label="银行"
								  value="bank">
								</Option>
								<Option
								  label="支付宝"
								  value="ali">
								</Option>
							  </Select>
						</FormItem>
					</Col>
					<Col v-bind="grid">
						<FormItem label="审核状态：" >
							<Select v-model="artFrom.status"  @on-change="userSearchs" clearable placeholder="请选择提现类型">
							    <Option
							      label="全部"
							      value="">
							    </Option>
								<Option
								  label="审核中"
								  :value="0">
								</Option>
								<Option
								  label="通过"
								  :value="1">
								</Option>
								<Option
								  label="未通过"
								  :value="-1">
								</Option>
							  </Select>
						</FormItem>
					</Col>
					<Col v-bind="grid">
						<FormItem label="商户搜索：">
							<Input search enter-button placeholder="请输入支付宝号/银行卡号" v-model="artFrom.field_key"
								@on-search="userSearchs" />
						</FormItem>
					</Col>
				</Row>
			</Form>
			<div class="Button" style="display: flex; justify-content: flex-start; align-items: center;">
				<Button type="primary" @click="add('添加')" class="bnt mr15" icon="md-add">申请提现</Button>
				<div>可提现金额：{{allmoney}}</div>
			</div>
			
			<Table ref="table" :columns="columns"
				:data="tableList" class="ivu-mt mt25" :loading="loading" highlight-row no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="extract_type">
					<div v-if="row.extract_type=='ali'">
						支付宝
					</div>
					<div v-else-if="row.extract_type=='bank'">
						银行
					</div>
					<div v-else>
						其他
					</div>
				</template>
				<template slot-scope="{ row }" slot="extract_detail">
					<div v-if="row.extract_type=='ali'">
						支付宝账号：{{row.alipay_code}}
					</div>
					<div v-else-if="row.extract_type=='bank'">
						开户行：{{row.bank_address}}<br />
						银行卡：{{row.bank_code}}<br />
						用户名：{{row.real_name}}<br />
					</div>
					<div v-else>
						其他
					</div>
				</template>
				<template slot-scope="{ row }" slot="action">
					<div v-if="row.status==0">
						审核中
					</div>
					<div v-else-if="row.status==1">
						通过
					</div>
					<div v-else-if="row.status==-1">
						拒绝
					</div>
				</template>
			</Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current="artFrom.page" show-elevator show-total @on-change="pageChange"
					:page-size="artFrom.limit" />
			</div>
		</Card>
		<!-- 新增编辑-->
		<Modal v-model="modals" @on-cancel="onCancel" scrollable footer-hide closable title="申请提现"
			:mask-closable="false" width="700">
			<Form ref="formInline" :model="formInline" :rules="ruleValidate" :label-width="150"
				:label-position="labelPosition2" @submit.native.prevent>
				<FormItem label="提现类型：" label-for="extract_type" prop="extract_type">
					<Select v-model="formInline.extract_type" placeholder="请选择提现类型">
						<Option
						  label="银行"
						  value="bank">
						</Option>
						<Option
						  label="支付宝"
						  value="ali">
						</Option>
					  </Select>
				</FormItem>
				<FormItem label="姓名：" label-for="real_name" prop="real_name">
					<Input placeholder="请输入提现人员姓名" v-model="formInline.real_name" />
				</FormItem>
				<FormItem v-if="formInline.extract_type=='bank'" label="银行卡号：" prop='bank_code'>
					<Input placeholder="请输入银行卡号" v-model="formInline.bank_code" />
				</FormItem>
				<FormItem v-if="formInline.extract_type=='bank'" label="开户行：" label-for="account" prop="account">
					<Input placeholder="请输入开户行" v-model="formInline.bank_address" />
				</FormItem>
				<FormItem v-if="formInline.extract_type=='ali'"  label="支付宝：" label-for="alipay_code" prop="alipay_code">
					<Input placeholder="请输入支付宝账号" v-model="formInline.alipay_code" />
				</FormItem>
				<FormItem label="提现金额：" label-for="extract_price" prop="extract_price">
					<Input type="number" placeholder="请输入提现金额" v-model="formInline.extract_price" />
				</FormItem>
				<Button type="primary" size="large" long @click="handleSubmit('formInline')">提交</Button>
			</Form>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getExtractList,
		shopExtract
	} from '@/api/shopOrder';
	import {
		addadmin,
	} from '@/api/shop';
	export default {
		name: 'shop_extract',
		computed: {
			labelPosition2() {
				return this.isMobile ? 'top' : 'right';
			},
		},
		data() {
			return {
				allmoney:'',
				template: false,
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				artFrom: {
					page: 1,
					limit: 10,
					status: '',
					extract_type: '',
					field_key:''
				},
				tableList: [],
				loading: false,
				columns: [{
						title: 'ID',
						key: 'id',
						width: 80,
					},
					{
						title: '提现方式',
						slot: 'extract_type',
						minWidth: 80,
					},
					{
						title: '提现信息',
						slot: 'extract_detail',
						minWidth: 200,
					},
					{
						title: '提现金额',
						key: 'extract_price',
						minWidth: 100,
					},
					{
						title: '审核状态',
						slot: 'action',
					},
				],
				data: [],
				total: 0,
				modals: false,
				formInline: {
					extract_type: 'bank',
					real_name: '',
					bank_code: '',
					bank_address: '',
					alipay_code: '',
					extract_price: '',
				},
				ruleValidate: {
					real_name: [{
						required: true,
						message: '请输入用户名称',
						trigger: 'blur'
					}],
					extract_type: [{
						required: true,
						message: '请选择提现类型',
						trigger: 'blur'
					}],
					extract_price: [{
						required: true,
						message: '请输入提现金额',
						trigger: 'blur'
					}],
				},
			};
		},
		// watch: {
		// 	$route() {
		// 		if (this.$route.fullPath === this.$routeProStr + '/product/product_list?type=5') {
		// 			this.getPath();
		// 		}
		// 	},
		// },
		created() {
			// this.gettype();
			// this.getclassify();
			this.getDataList();
		},
		activated() {
			// this.goodHeade();
			// this.goodsCategory();
			// if (this.$route.fullPath === this.$routeProStr + '/product/product_list?type=5') {
			// 	this.getPath();
			// } else {
			// 	this.getDataList();
			// }
		},
		methods: {
			// 商户列表
			getDataList() {
				this.loading = true;
				getExtractList(this.artFrom)
					.then((res) => {
						let data = res.data;
						this.tableList = data.list;
						this.total = data.count;
						this.allmoney = +data.mer_price.mer_money
						// this.$nextTick(() => {
						// 	//确保dom加载完毕
						// 	this.setChecked();
						// });
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			pageChange(status) {
				this.artFrom.page = status;
				this.getDataList();
			},
			// 表格搜索
			userSearchs() {
				this.artFrom.page = 1;
				this.getDataList();
			},
			// 添加
			add(name) {
				this.modals = true;
			},
			handleSubmit(name) {
				const that = this;
				that.$refs[name].validate((valid) => {
					if (valid) {
						if(that.formInline.extract_type=='bank'){
							if(!that.formInline.bank_code){
								return  this.$Message.warning('请输入银行卡号')
							}
							if(!that.formInline.bank_address){
								return  this.$Message.warning('请输入开户行')
							}
						}
						if(that.formInline.extract_type=='ali'){
							if(!that.formInline.alipay_code){
								return  this.$Message.warning('请输入支付宝账号')
							}
						}
						shopExtract(that.formInline)
							.then(async (res) => {
								that.$Message.success(res.msg);
								that.modals = false;
								that.getDataList();
								that.$refs[name].resetFields();
							})
							.catch((res) => {
								that.$Message.error(res.msg);
							});
					} else {
						return false;
					}
				});
			},
			onCancel() {
				this.$refs['formInline'].resetFields();
			},
		},
	};
</script>
<style scoped lang="stylus">
	/deep/.ivu-modal-mask {
		z-index: 999 !important;
	}

	/deep/.ivu-modal-wrap {
		z-index: 999 !important;
	}

	.Box {
		>>>.ivu-modal-body {
			height: 700px;
			overflow: auto;
		}
	}

	.batch-box {
		>>>.ivu-modal-body {
			overflow: auto;
			min-height: 350px;
		}
	}

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

		img {
			width: 100%;
			height: 100%;
		}
	}

	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 11;
	}

	/deep/.happy-scroll-content {
		width: 100%;

		.demo-spin-icon-load {
			animation: ani-demo-spin 1s linear infinite;
		}

		@keyframes ani-demo-spin {
			from {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate(180deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.demo-spin-col {
			height: 100px;
			position: relative;
			border: 1px solid #eee;
		}
	}

	.labelInput {
		border: 1px solid #dcdee2;
		width: 20%;
		padding: 0 5px;
		border-radius: 5px;
		min-height: 30px;
		cursor: pointer;

		.span {
			color: #c5c8ce;
		}

		.iconxiayi {
			font-size: 12px;
		}
	}
</style>