<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<el-card>
			<!-- 搜索区域 -->
			<el-col>
				<div class="flex" style="justify-content: space-between;padding-bottom: 20px;">
					<el-button type="primary" @click="openBuy">提现</el-button>
					<el-button type="primary" icon="el-icon-refresh-right" @click="reload">刷新</el-button>
				</div>
				<div style="margin-bottom: 20px;">
					<el-select v-model="value" placeholder="请选择支付方式" @change="optChange">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
						</el-option>
					</el-select>
				</div>
			</el-col>
			<!-- 订单表格区域 -->
			<el-table :data="list" border style="width: 100%">
				<el-table-column prop="id" label="id" width="180">
				</el-table-column>
				<el-table-column prop="type" label="提现方式" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type == 0" type="warning">银行卡</el-tag>
						<el-tag v-if="scope.row.type == 1" type="success">微信</el-tag>
						<el-tag v-if="scope.row.type == 2" >支付宝</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="withdraw_num" label="提现金额(元)" width="150"></el-table-column>
				<el-table-column prop="card_no" label="银行卡" width="250"></el-table-column>
				<el-table-column prop="card_name" label="开户行" width="250"></el-table-column>
				<el-table-column prop="image" label="收款码" width="150">
					<template slot-scope="scope">
						<el-image style="width: 100px; height:100px" :src="scope.row.qrimage" v-if="scope.row.qrimage"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="审核结果" width="150">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status == 1">已通过</el-tag>
						<el-tag type="info" v-if="scope.row.status == 0">待审核</el-tag>
						<el-tag type="danger" v-if="scope.row.status == 2">未通过</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="创建时间" width="200">
					<template slot-scope="scope">
						{{showTime(scope.row.createtime)}}
					</template>
				</el-table-column>
			</el-table>
			<div style="height: 20px;"></div>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 修改地址对话框 -->
		<el-dialog title="提现" :visible.sync="dialogTableVisible">
			<el-form :model="form">
				<!-- <el-form-item label="提现方式" :label-width="formLabelWidth">
					<el-select v-model="form.type" placeholder="请选择支付方式" @change="optChanget">
						<el-option v-for="item in takType" :key="item.value" :label="item.label" :value="item.value" >
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="姓名" :label-width="formLabelWidth">
					<el-input v-model="form.name" type="text"></el-input>
				</el-form-item>
				<el-form-item label="提现金额" :label-width="formLabelWidth">
					<el-input v-model="form.withdraw_num" type="number"></el-input>
				</el-form-item>
				<template v-if="form.type == 0">
					<el-form-item label="银行卡号" :label-width="formLabelWidth">
						<el-input v-model="form.card_no" type="text"></el-input>
					</el-form-item>
					<el-form-item label="开户行" :label-width="formLabelWidth">
						<el-input v-model="form.card_name" type="text"></el-input>
					</el-form-item>
				</template>
				<el-form-item label="收款码" :label-width="formLabelWidth" v-else>
					<el-upload class="avatar-uploader" action="http://www.pingguozhushou.shop/api/common/upload"
						:show-file-list="false" :headers="headers" :on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="form.qrimage" :src="form.qrimage" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item> -->
				<el-form-item label="提现地址" :label-width="formLabelWidth">
					<el-input v-model="form.address" type="text"></el-input>
				</el-form-item>
				<el-form-item label="提现金额" :label-width="formLabelWidth">
					<el-input v-model="form.withdraw_num" type="number"></el-input>
				</el-form-item>
			</el-form>
			<div class="t-r">
				到账： {{((form.withdraw_num*1 || 0)/(baseInfo.to_rmb*1)).toFixed(2)}}U
			</div>
			<div class="t-r">
				当前余额： {{userInfo.money*1}}元
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="goBuy">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
			mapState,
			mapMutations
		} from 'vuex';
	import {
		createCode,
		getCodeList,
		getUserList,
		getIndex
	} from '@/request/agent.js'
	import {
		getRechangeList,
		rechange,
		getTransferList,
		transfer,
		withdrawalList,
		getUserInfo,
		withdrawal
	} from '@/request/user.js'
	import {
		showTime
	} from '@/assets/js/tools.js'

	export default {
		name: 'Order',
		data() {
			return {
				loading: false,
				formLabelWidth: '80px',
				form: {
					withdraw_num: '',
					address: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					type: -1, //-1->全部 0->银行卡 1->微信 2->支付宝 
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				dataloading: false,
				headers: {},
				takType: [{
					value: 0,
					label: '银行卡'
				}, {
					value: 1,
					label: '微信'
				}, {
					value: 2,
					label: '支付宝'
				}],
				takValue: 0,
				options: [{
					value: -1,
					label: '全部'
				}, {
					value: 0,
					label: '银行卡'
				}, {
					value: 1,
					label: '微信'
				}, {
					value: 2,
					label: '支付宝'
				}],
				value: -1,
			}
		},
		computed: {
			...mapState(['userInfo','baseInfo'])
		},
		created() {
			this.getIndex()
			this.getList()
			this.getUserInfo()
			this.headers['token'] = window.sessionStorage.getItem('token')
		},
		methods: {
			...mapMutations(['setUserInfo','setBaseInfo']),
			showTime,
			getIndex() {
				getIndex().then(res => {
					this.setBaseInfo(res.data)
				})
			},
			reload() {
				this.getList('reload')
				this.getUserInfo()
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.setUserInfo(res.data)
				})
			},
			optChange(data) {
				console.log(data);
				this.getList('reload')
			},
			optChanget(data) {
				that.form.type = data
			},
			handleAvatarSuccess(res, file) {
				this.form.qrimage = res.data.fullurl;
				console.log(this.form.image, 'this.form.avatar');
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg/png';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// return isJPG && isLt2M;
				return true
			},
			handleAvatarError() {

			},
			openBuy() {
				this.dialogTableVisible = true
			},
			goBuy() {
				let that = this
				if (that.loading) {
					return
				}
				// if(that.form.name == '') {
				// 	return that.$msg.error('请输入姓名')
				// }
				if(!that.form.withdraw_num) {
					return that.$msg.error('请输入提现金额')
				}
				if(that.form.address == '') {
					return that.$msg.error('请输入提现地址')
				}
				if(that.userInfo.money*1 < that.form.withdraw_num*1) {
					return that.$msg.error('您当前账号的余额不足')
				}
				// if(that.form.type == 0) {
				// 	if(that.form.card_name == '') {
				// 		return that.$msg.error('请输入开户行')
				// 	}
				// 	if(that.form.card_no == '') {
				// 		return that.$msg.error('请输入银行卡号')
				// 	}
				// }else {
				// 	if(that.form.qrimage == '') {
				// 		return that.$msg.error('请上传收款码')
				// 	}
				// }
				that.loading = true
				withdrawal(that.form).then(res => {
					console.log(res);
					that.$msg.success('提交成功，请等待审核')
					that.dialogTableVisible = false
					that.loading = false
					that.getList('reload')
					this.getUserInfo()
				}).catch(err => {
					that.loading = false
				})
			},
			getList(type) {
				let that = this
				if (type == 'reload') {
					that.queryInfo.page = 1
					that.queryInfo.type = that.value
					that.dataloading = false
				}
				if (that.dataloading) {
					return
				}
				that.dataloading = true
				withdrawalList(that.queryInfo).then(res => {
					that.total = res.data.count
					that.list = res.data.data
					that.dataloading = false
				}).catch(err => {
					that.dataloading = false
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
		},

	}
</script>

<style scoped lang="scss">
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 10px;
	}
	.t-r {
		text-align: right;
		padding-top: 10px;
	}
</style>