<template>
	<!-- 财务-提现申请 -->
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="card_pd">
				<!-- 查询条件 -->

				<template>
					<Tabs :value="formValidate.status" @on-click="selChange">
						<TabPane v-for="(item, index) in treeData.withdrawal" :label="item.title" :name="item.value">
						</TabPane>
					</Tabs>
				</template>
			</div>
		</Card>
		<Card :bordered="false" dis-hover>
			<!-- 表格 -->
			<Table ref="table" :columns="columns" :data="tabList" class="ivu-mt" :loading="loading" no-data-text="暂无数据"
				no-filtered-data-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="nickname">
					<div>
						用户昵称: {{ row.nickname }} <br />
						用户id:{{ row.uid }}
					</div>
				</template>
				<template slot-scope="{ row }" slot="createModalFrame" v-if="row.extract_type != 'balance'">
					<a v-if="row.status==0" href="javascript:void(0);" @click="adopt(row)">审核</a>
					<Divider v-if="row.status==0" type="vertical" />
					<a href="javascript:void(0);" @click="showDetail(row)">详细</a>
					<Divider type="vertical" />
					<a href="javascript:void(0);" @click="extractprint(row)">导出</a>
				</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>

		<!-- 编辑表单-->
		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
		<!-- 拒绝通过-->
		<Modal v-model="modals" scrollable closable title="审核" :mask-closable="false">
			<Input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
			<div slot="footer">
				<Button size="large" @click="modals=false">关闭</Button>
				<!-- <Button type="error" size="large" :loading="modal_loading" @click="oks">拒绝</Button> -->
				<Button type="primary" size="large" :loading="modal_loading" @click="oks">通过</Button>
			</div>
		</Modal>
		<!-- 显示详情弹窗 -->
		<Modal v-model="showalert" scrollable closable title="详情" width="1000">
			<Form ref="formValidate" :model="alertDetail">
				<FormItem label="姓名：">
					{{alertDetail.bank_account}}
				</FormItem>
				<FormItem label="手机号：" v-if="alertDetail.bank_lists">
					{{alertDetail.bank_lists[0].mobile}}
				</FormItem>
				<FormItem label="银行卡：">
					{{alertDetail.bank_code_desc}}
				</FormItem>
				<FormItem label="身份证正面：">
					<img width='600px' height='400px' :src="alertDetail.cer_front_img" preview fit="fill" />
				</FormItem>
				<FormItem label="身份证反面：">
					<img width='600px' height='400px' :src="alertDetail.cer_reverse_img" preview fit="fill" />
				</FormItem>
				<FormItem label="提现金额：">
					{{alertDetail.real_money}}
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" size="large" long @click="showalert=false">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
	import cardsData from "@/components/cards/cards";
	import {
		mapState
	} from "vuex";
	import {
		orderListApi,
		getOrderDetailApi,
		extractprint,
		extractorder
	} from "@/api/new.js";
	import {
		formatDate
	} from "@/utils/validate";
	import editFrom from "@/components/from/from";
	import timeOptions from "@/utils/timeOptions";
	import {
		Loading
	} from 'element-ui';
	export default {
		name: "cashApply",
		components: {
			cardsData,
			editFrom
		},
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, "yyyy-MM-dd hh:mm");
				}
			},
		},
		data() {
			return {
				alertDetail: {}, //显示详情
				showalert: false, //显示详情
				modal_loading: false,
				options: timeOptions,
				fail_msg: {
					message: "输入信息不完整或有误!",
				},
				modals: false,
				total: 0,
				// cardLists: [],
				loading: false,
				columns: [{
						title: "批次",
						key: "enterprise_order_id",
						width: 80,
					},
					{
						title: "SN编号",
						key: "enterprise_order_sn",
						minWidth: 180,
					},
					{
						title: "提现总金额",
						key: "total_money",
						minWidth: 90,
					},
					{
						title: "添加时间",
						key: "created_time",
						minWidth: 130,
					},
					{
						title: "审核状态",
						key: "status_desc",
						minWidth: 80,
					},
					{
						title: "备注",
						key: "reason",
						minWidth: 100,
					},
					{
						title: "操作",
						slot: "createModalFrame",
						fixed: "right",
						width: 180,
					},
				],
				tabList: [],
				fromList: {
					title: "选择时间",
					custom: true,
					fromTxt: [{
							text: "全部",
							val: ""
						},
						{
							text: "昨天",
							val: "yesterday"
						},
						{
							text: "今天",
							val: "today"
						},
						{
							text: "本周",
							val: "week"
						},
						{
							text: "本月",
							val: "month"
						},
						{
							text: "本季度",
							val: "quarter"
						},
						{
							text: "本年",
							val: "year"
						},
					],
				},
				treeData: {
					withdrawal: [{
							title: "未审核",
							value: "0",
						},
						{
							title: "企业内部审核通过",
							value: "1",
						},
						{
							title: "服务商审核通过",
							value: "2",
						},
						{
							title: "已部分打款",
							value: "3",
						},
						{
							title: "已全部打款",
							value: "4",
						},
						{
							title: "审核不通过",
							value: "5",
						},
						{
							title: "全部打款失败",
							value: "6",
						},
					],
				},
				formValidate: {
					status: 0,
					page: 1,
					limit: 20,
				},
				extractStatistics: {},
				timeVal: [],
				FromData: null,
				extractId: 0,
			};
		},
		watch: {
			$route() {
				if (
					this.$route.fullPath === "/finance/user_extract/index?status=0"
				) {
					this.getPath();
				}
			},
		},
		computed: {
			...mapState("admin/layout", ["isMobile"]),
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		// created() {
		//     if(this.$route.query.key == 0){
		//         this.formValidate.status = parseInt(this.$route.query.key)
		//     }
		// },
		mounted() {
			if (this.$route.fullPath === "/finance/user_extract/index?status=0") {
				this.getPath();
			} else {
				this.getList();
			}
			// this.getList();
		},
		methods: {
			// 导出
			extractprint(item) {
				const loading = Loading.service({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				extractprint({
					id: item.enterprise_order_id
				}).then((res) => {
					window.open(res.data.url)
					loading.close();
				})
			},
			// 显示详情
			showDetail(item) {
				const that = this;
				const loading = Loading.service({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				getOrderDetailApi({
					id: item.enterprise_order_id
				}).then((res) => {
					loading.close();
					that.alertDetail = res.data.list[0];
					that.showalert = true;
				})
			},
			getPath() {
				this.formValidate.page = 1;
				this.formValidate.status = parseInt(this.$route.query.status);
				this.getList();
			},
			// 无效
			invalid(row) {
				this.extractId = row.id;
				this.modals = true;
			},
			// 确定
			oks() {
				this.modal_loading = true;
				refuseApi(this.extractId, this.fail_msg)
					.then(async (res) => {
						this.$Message.success(res.msg);
						this.modal_loading = false;
						this.modals = false;
						this.getList();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 通过
			adopt(row) {
				this.$modalForm(extractorder({
					id: row.enterprise_order_id
				})).then(() => this.getList());
			},
			// 具体日期
			onchangeTime(e) {
				this.timeVal = e;
				this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
				this.formValidate.page = 1;
				this.getList();
			},
			// 选择时间
			selectChange(tab) {
				this.formValidate.page = 1;
				this.formValidate.data = tab;
				this.timeVal = [];
				this.getList();
			},
			// 选择
			selChange(res) {
				console.log(res, 'res');
				this.formValidate.status = res;
				this.formValidate.page = 1;
				this.getList();
			},
			reset() {
				this.formValidate = {
					status: "",
					page: 1,
					limit: 20
				};
				this.timeVal = [];
				// this.$refs.formValidate.resetFields()
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
				orderListApi(this.formValidate)
					.then(async (res) => {
						let data = res.data;
						this.tabList = data.list;
						this.total = data.pagination.total_count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						if (res.msg == '暂无数据') {
							this.tabList = [];
							this.total = 0;
						}else{
						this.$Message.error(res.msg);
						}
					});
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 编辑
			edit(row) {
				this.modals = true;
			},
			// 编辑提交成功
			submitFail() {
				this.getList();
			},
		},
	};
</script>
<style scoped lang="stylus">
	.btn-add {
		margin: 0 14px 0 -90px;
	}

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

	.card_pd {
		padding: 20px 20px 0;
	}

	.Refresh {
		font-size: 12px;
		color: #1890FF;
		cursor: pointer;
	}

	.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>