<template>
	<div class="app-container">

		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">


			<el-form-item label="申请日期" prop="beginTime">
				<div class="block">
					<el-date-picker v-model="queryParams.beginTime" value-format="yyyy-MM-dd" type="date"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="" prop="endTime">
				<div class="block">
					<el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="放款日期" prop="beginTime">
				<div class="block">
					<el-date-picker v-model="queryParams.beginTime1" value-format="yyyy-MM-dd" type="date"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>
			<el-form-item label="" prop="endTime">
				<div class="block">
					<el-date-picker v-model="queryParams.endTime1" type="date" value-format="yyyy-MM-dd"
						placeholder="选择日期" style="width: 200px;">
					</el-date-picker>
				</div>
			</el-form-item>

			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status" style="width: 200px" clearable placeholder="请选择提现状态">
					<el-option v-for="(item,index) in options1" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="店铺名称" prop="shopName" v-if="this.$auth.hasPermi('system:goodsPaymentTX:shopName')">
				<el-autocomplete class="inline-input" v-model="queryParams.shopName" :fetch-suggestions="querySearch"
					placeholder="请输入店铺名称" @select="handleSelect" :trigger-on-focus="false"></el-autocomplete>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery()">搜索</el-button>
				<span>
					<span style="margin: 0 20px;">放款金额：<span style="color: red;">{{fkje}}</span></span> 待放款金额：<span
						style="color: red;">{{dfkje}}</span>
				</span>
			</el-form-item>
		</el-form>

		<el-table :row-class-name="tableRowClassName" border :data="tableData" style="width: 100%">
			<el-table-column prop="createTime" label="申请时间">
				<!-- <template slot-scope="scope">
					<span>{{scope.row.createTime.slice(0,16)}}</span>
				</template> -->
			</el-table-column>
			<el-table-column prop="shopName" label="店铺名称">
			</el-table-column>
			<el-table-column prop="txMoney" label="收款金额">
			</el-table-column>
			<!-- <el-table-column prop="amountConfirmed" label="放款金额">
			</el-table-column> -->
			<el-table-column prop="payeeName" label="收款人姓名">
			</el-table-column>
			<el-table-column prop="payeeAccount" label="收款人账号">
			</el-table-column>
			<el-table-column prop="payeeAccountName" label="收款人账号名称">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status=='S'">已放款</span>
					<span v-if="scope.row.status=='T'">提现中</span>
					<span v-if="scope.row.status=='BH'">驳回</span>
				</template>
			</el-table-column>
			<el-table-column prop="paymentAccount" label="打款账户">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.payment_account" :value="scope.row.paymentAccount" />
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="放款时间" width="200px">
			</el-table-column>
			<el-table-column prop="updateBy" label="操作人">
			</el-table-column>
			<el-table-column prop="remark" label="备注">
			</el-table-column>
			<el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="small" type="success" v-if="scope.row.status=='T'"
						v-hasPermi="['system:goodsPaymentTX:fk']" @click="handleUpdate1(scope.row)">放款
					</el-button>
					<el-button size="small" type="primary" v-if="scope.row.status=='S'" v-hasPermi="['system:goodsPaymentTX:info']"
						@click="handleUpdate1(scope.row)">详情
					</el-button>
					<el-button size="small" type="warning" @click="copyText(scope.row)">复制
					</el-button>
					<el-button size="small" type="danger" v-if="scope.row.status=='T'"
						v-hasPermi="['system:goodsPaymentTX:fk']" @click="handleUpdate2(scope.row)">驳回
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<!-- 驳回信息 -->
		<el-dialog v-if="bohui" title="驳回" :visible.sync="bohui" append-to-body width="800px">
			<div style="display: flex;flex-wrap: wrap;">
				<el-form ref="bohuidata" :model="bohuidata" :rules="bohuiRules">
					<el-row>
						<el-col :span="12">
							<el-form-item label="驳回原因" prop="remark">
								<el-input style="width: 500px;" v-model="bohuidata.remark" type="textarea" :rows="2"
									placeholder="请输入驳回原因" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-form>

				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="bohuiSubmit">确 定</el-button>
				<el-button @click="bohui=false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog v-if="open" title="放款详情" :visible.sync="open" append-to-body width="1000px">
			<el-form ref="form1" :model="form1" :rules="rules" label-width="200px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="收款人" prop="payeeName">
							<el-input v-model="form1.payeeName" disabled placeholder="请输入收款人" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收款账户" prop="payeeAccount">
							<el-input v-model="form1.payeeAccount" disabled placeholder="请输入收款账户" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="收款方式" prop="payeeAccountName">
							<el-input v-model="form1.payeeAccountName" disabled placeholder="请输入收款方式" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收款金额" prop="txMoney">
							<el-input v-model="form1.txMoney" disabled placeholder="请输入收款金额" />
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="放款金额" prop="amountConfirmed">
							<el-input v-model="form1.amountConfirmed" placeholder="请输入放款金额" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="放款方式" prop="lendingMethods">
							<el-select filterable v-model="form1.lendingMethods" style="width: 100%;" clearable
								placeholder="请选择放款方式">
								<el-option v-for="(item,index) in fkOptions" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
							<!-- <el-input v-model="form1.lendingMethods" placeholder="如微信、支付宝、XX银行" /> -->
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
							<el-select filterable disabled v-model="form1.status" style="width: 100%;" clearable
								placeholder="请选择状态">
								<el-option v-for="(item,index) in dkOptions" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="打款账户" prop="dkzh">
							<el-select v-model="form1.paymentAccount" @change="checkbp" style="width: 100%" clearable
								placeholder="请选择打款账户">
								<el-option v-for="dict in dict.type.payment_account" :key="dict.label"
									:label="dict.label" :value="dict.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>

					<el-col :span="12">
						<el-form-item label="申请时间" prop="createTime">
							<el-input disabled v-model="form1.createTime" placeholder="请选择申请时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="form1.remark" placeholder="请输入备注" />
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>

					<el-col :span="24">
						<el-form-item label="放款凭证" prop="credentials">
							<div class="img_list" v-if="form1.status=='S'">
								<div style="position: relative;width: 100%;height: 100px;">
									<span style="color: red;" v-if="form1.credentials==null">无凭证</span>
									<image-preview style="margin-right: 10px;" v-else
										v-for="item in form1.credentials.split(',')"
										:src="'https://static.taohaowan.com/'+item" :width="100" :height="100" />
								</div>
							</div>
							<el-upload ref="upload" :action="uploadImgUrl"
								list-type="picture-card" :before-upload="beforeAvatarUpload"
								:on-success="handleAvatarSuccess" :on-remove="handleRemove" :on-change="changeUpload"
								:show-file-list="true" accept="image/png, image/jpeg, application/pdf" :multiple="true"
								:headers="headers">
							</el-upload>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button v-if='form1.status=="T"' type="primary" @click="submitForm1">确 定
				</el-button>
				<el-button v-else type="success" @click="submitForm1">修 改
				</el-button>
				<el-button @click="open=false">取 消</el-button>
			</div>
		</el-dialog>





	</div>
</template>

<script>
	import {
		goodsPaymentQX,
		queryTBusShop,
		querentx,
		getInfoTx,
		refusal
	} from "@/api/data/withdrawal";
	import {
		getToken
	} from "@/utils/auth";
	import Cookies from "js-cookie";
	export default {
		dicts: ['payment_account'],
		data() {
			return {
				fkje: 0,
				dfkje: 0,
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
				headers: {
					Authorization: "Bearer " + getToken(),
				},
				open: false,
				// 提现状态
				options1: [{
					value: 'S',
					label: '已放款'
				}, {
					value: 'T',
					label: '提现中'
				}],
				fkOptions: [{
						value: "wx",
						label: '微信'
					}, {
						value: "zfb",
						label: '支付宝'
					},
					{
						value: "yh",
						label: 'XX银行'
					}
				],
				dkOptions: [{
					value: "S",
					label: '已放款'
				}, {
					value: "T",
					label: '提现中'
				}],
				bohuidata: {},
				bohui: false,
				bohuiRules: {
					remark: [{
						required: true,
						message: '请输入确认金额',
						trigger: 'blur'
					}]
				},
				rules: {

					amountConfirmed: [{
						required: true,
						message: '请输入确认金额',
						trigger: 'blur'
					}],
					lendingMethods: [{
						required: true,
						message: '请输入放款方式',
						trigger: 'blur'
					}, ],
					credentials: [{
						required: true,
						message: '请上传放款凭证',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择放款状态',
						trigger: 'blur'
					}]
				},
				tableData: [],
				//店铺名称
				restaurants: [],
				options8: [],
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 显示搜索条件
				showSearch: true,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					publishStatus: null,
					deleteStatus: null,
					updateStatus: null,
					goodsName: null,
					gameName: null,
					partnerName: null,
					beginTime: this.$moment().subtract(15, 'days').format("YYYY-MM-DD"), // 当前时间往前推 15 天
					endTime: this.$moment().format("YYYY-MM-DD"), // 获取当前日期,
					paymentStatus: null,
					originalPrice: null,
					shopId: null,
					shopName: null,
					quxianStatus: null,
					deptId: null,
				},
				queryForm: {
					publishStatus: null,
					deleteStatus: null,
					updateStatus: null,
					goodsName: null,
					gameName: null,
					partnerName: null,
				},
				form1: {},
				// 表单参数
				form2: {
					electronicDataList: [],
				},
			};
		},
		created() {
			this.getList();
		},
		mounted() {
			this.restaurants = this.loadAll();
		},
		methods: {
			copyText(item) {
				// 使用navigator.clipboard API复制文本
				let text =
					`收款人账号名称：${item.payeeAccountName}\n收款人账号：${item.payeeAccount}\n收款人姓名：${item.payeeName}\n收款金额：${item.txMoney}`
				navigator.clipboard.writeText(text)
					.then(() => {
						// 复制成功
						this.$modal.msgSuccess("复制成功");
					})
					.catch((err) => {
						// 复制失败，可能是浏览器不支持或权限问题
						this.$modal.msgError('复制失败:' + err)
					});
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1 || Number.isInteger((rowIndex - 1) / 4)) {
					return 'warning-row';
				} else if (rowIndex === 3 || Number.isInteger((rowIndex - 3) / 4)) {
					return 'success-row';
				}
				return '';
			},
      beforeAvatarUpload(){

      },
			// 上传成功
			handleAvatarSuccess(res) {
				this.form1.credentials = res.data.url
        this.form1.pictures.push(this.form1.credentials)
			},
			// 删除
			handleRemove(file, fileList) {
				this.form2.electronicDataList = this.form2.electronicDataList.filter(item => item !== file.response.data
					.webUrl);
        this.form1.pictures = this.form1.pictures.filter(item => item !== file.response.data
          .webUrl);
			},
			// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
			changeUpload(file, fileList) {
				if (file.status === 'success') {
					this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((item) => {
						return item.raw.size / 1024 / 1024 < 50
					})
					this.tobase64(file, fileList)
				}
			},
			tobase64(file, fileList) {
				var reader = new FileReader()
				reader.readAsDataURL(file.raw)
				reader.onload = (e) => {
					const tempobj = {
						data: file.response.data.webUrl,
						suffix: '.' + file.raw.type.split('/')[1],
						fileName: file.name
					}
					this.form2.electronicDataList.push(tempobj.data)
				}

			},
			submitForm1() {
				if(!this.form1.credentials){
					this.form1.credentials = this.form2.electronicDataList;
					this.form1.credentials = this.form1.credentials.join(',');
				}
				console.log("!!!!",this.form1.pictures )
				this.$refs["form1"].validate(valid => {
					if (valid) {
						this.$modal.confirm('确认放款吗？').then(function() {

						}).then(() => {
							querentx(this.form1).then(res => {
								this.getList();
								this.open = false;
								this.form2.electronicDataList=[];
								this.$modal.msgSuccess("放款成功");
							})
						}).catch(() => {});
					}
				})

			},
			//店铺名称
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
				};
			},
			loadAll() {
				queryTBusShop().then(response => {
					response.data.forEach((item) => {
						this.options8.push({
							label: item.id,
							value: item.name,
						});
					});
				});
				return this.options8;
			},
			handleSelect(item) {

			},
			//确认放款
			handleUpdate1(row) {
				Cookies.set('id', row.id)
				let query = {
					id: row.id
				}
				getInfoTx(query).then(res => {
					if (res.code == 200) {
						this.form1 = res.data;
						this.open = true;
					}
				})
			},
			handleUpdate2(row) {
				Cookies.set('bohuiId', row.id);
				this.bohui = true;
				this.bohuidata = {};
			},
			bohuiSubmit() {
				let id = Cookies.get('bohuiId')
				let query = {
					id: id,
					remark: this.bohuidata.remark
				}
				this.$refs["bohuidata"].validate(valid => {
					if (valid) {
						this.$modal.confirm('确认驳回吗？').then(function() {

						}).then(() => {
							refusal(query).then(res => {
								if (res.code == 200) {
									this.getList();
									this.bohui = false;
									this.$modal.msgSuccess("已驳回");
								}
							})
						}).catch(() => {});
					}
				})
			},

			/** 查询提现列表 */
			getList() {
				this.loading = true;
				goodsPaymentQX(this.queryParams).then(response => {
					// console.log(response)
					this.tableData = response.data.table.rows;
					this.total = response.data.table.total;
					this.fkje = response.data.txMoney_s;
					this.dfkje = response.data.txMoney_t;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
		}
	};
</script>
<style>
	.father {
		height: 80px;
		line-height: 80px;
		font-size: 25px;
		display: flex;
		justify-content: space-around;
	}

	.el-icon-loading {
		color: green;
		margin-right: 5px;
	}

	.el-icon-message-solid {
		color: green;
		margin-right: 5px;
	}

	.el-icon-check {
		color: green;
		margin-right: 5px;
	}

	.el-icon-coin {
		color: green;
		margin-right: 5px;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
