<template>
	<Layout :index="-1" :banner="0"  :img="'/static/img/about.jpg'" :titles="'个人中心'" :title_content="'个人中心'">
		<view class="bg ptm-80">
			<view class="content">
				<view class="content_left">
					<memberleft :index="'4'"></memberleft>
				</view>
				<view class="content_right">
					<view class="mtitle">
						<image src="../static/img/member/fkx.png" class="mimg"></image>
						付款记录
					</view>
					<view class="lines"></view>
					<view class="content_r">
						<view class="d-b-c">
							<view class="selecet" >
								<!-- 订单状态筛选 -->
								 <span class="selecet-text">订单状态：</span>
								 <el-select v-model="order_status" placeholder="请选择订单状态">
									<el-option label="全部" value=""></el-option>
									<el-option label="待支付" value="unpaid"></el-option>
									<el-option label="已支付" value="paid"></el-option>
									<el-option label="退款审核中" value="refunding"></el-option>
									<el-option label="退款中" value="refund_processing"></el-option>
									<el-option label="退款成功" value="refunded"></el-option>
									<el-option label="退款驳回" value="refund_rejected"></el-option>
									<el-option label="退款已取消" value="refund_cancelled"></el-option>
									<el-option label="订单已取消" value="cancelled"></el-option>
								 </el-select>
							</view>
							<view class="search-box d-c-c">
								<input type="text" v-model="name" class="search-name" name="param" placeholder="请输入资产名称"  value="" placeholder-class="search-names">
								<view class="adds" id="btn_sub" @tap="getData()">
									<image src="../static/img/member/ss.png" class="addimgs"></image>
									搜索
								</view>
							</view>
						</view>
					    <view class="qqtable">
						<el-table
						    :data="listData"
							:cell-style="{ textAlign: 'center', fontSize: '12px', color: '#1D2129'}"
							 class="center-table"
						    style="width: 100%">
						    <el-table-column
						      fixed
						      prop="order_no"
						      label="订单编号"
						      width="150">
						    </el-table-column>
							<el-table-column
						      prop="amount"
						      label="订单金额"
						      width="120">
						    </el-table-column>

							<el-table-column
						      prop="pay_time_text"
						      label="支付时间"
						      width="90">
						    </el-table-column>
							<el-table-column
						      prop="pay_type_text"
						      label="支付方式"
						      width="120">
						    </el-table-column>
						    <el-table-column
						      prop="asset_name"
						      label="资产名称"
						      width="140">
						    </el-table-column>
						    <el-table-column
						      prop="province"
						      label="资产类型"
						      width="110">
							  <template slot-scope="scope" v-if="scope.row.asset_type == 'game'">
							    <span>游戏数字资产包</span>
							  </template>
							  <template slot-scope="scope" v-else>
							    <span>微短剧</span>
							  </template>
						    </el-table-column>
						 
							  <el-table-column
							      prop="status"
							      label="订单状态"
							      width="100">
							      <template slot-scope="scope">
									<span v-if="scope.row.pay_status == 10&&scope.row.refund_status =='none'&&scope.row.order_status ==10" class="red">未支付</span>
							        <span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='none'" class="green">已支付</span>
							        <span v-if="scope.row.pay_status == 10&&scope.row.order_status ==20" class="black">已取消</span>
									<span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='success'" class="green">已退款</span>
									<span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='processing'" class="green">退款中</span>
									<span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='pending'" class="green">退款审核中</span>
									<span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='rejected'" class="green">退款驳回</span>
									<span v-if="scope.row.pay_status == 20&&scope.row.refund_status =='cancelled'" class="black">退款已取消</span>
							      </template>
							    </el-table-column>
							<el-table-column
							  prop="fulfillment_status_text"
							  label="履约进度" width="100">
							</el-table-column>
						    <el-table-column
						      fixed="right"
						      label="操作">
						      <template slot-scope="scope">
								<el-button @tap="goEdit(scope.row.id)"  type="text" size="small" class="asset_e" >查看详情</el-button>
								<el-button @click="showRefundDialog(scope.row)" type="text" size="small" class="asset_l" v-if="scope.row.pay_status == 20&&scope.row.refund_status =='none'">申请退款</el-button>
								<el-button 
									@tap="openPayDialog(scope.row)" 
									type="text" 
									size="small" 
									class="asset_l" 
									v-if="scope.row.pay_status == 10&&scope.row.order_status ==10"
								>
									去支付
								</el-button>
								<el-button @click="cancelRefund(scope.row)" type="text" size="small" class="asset_l" v-if="scope.row.pay_status == 20&&scope.row.refund_status =='pending'">撤销退款</el-button>
						      </template>
						    </el-table-column>
						  </el-table>
						</view>
							
						<el-pagination v-if="total>10" background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>	
							
					</view>
					
				</view>
			</view>
			
		</view>

		<el-dialog  :visible.sync="dialogFormVisible" custom-class="tuikuan_dialog" center>
			<view class="tuikuan_content">
				<view class="tuikuan_title">申请退款</view>
				<!-- 展示订单编号 支付金额 支付方式 -->
				<view class="tuikuan_content_order" >
					<view style="display: flex; align-items: center; margin-right: 24px;">
						<view class="tuikuan_content_order_title"><view class="red"></view>订单编号：</view>
						<view class="tuikuan_content_order_value">{{tuikuan_order.order_no || '--'}}</view>
					</view>
					<view style="display: flex; align-items: center;">
						<view class="tuikuan_content_order_title">支付金额：</view>
						<view class="tuikuan_content_order_value">{{tuikuan_order.amount ? tuikuan_order.amount + '元' : '--'}}</view>
					</view>
				</view>
				<view class="tuikuan_content_order" >
					<view style="display: flex; align-items: center; margin-right: 24px;">
					<view class="tuikuan_content_order_title"><view class="red"></view>支付方式：</view>
					<view class="tuikuan_content_order_value">{{tuikuan_order.pay_type_text || '--'}}</view>
					</view>
				</view>
				<view class="tuikuan_content_order" >
				<view class="tuikuan_content_title"><view class="red">*</view>退款原因：</view>
				<view class="tuikuan_content_input">
					<textarea v-model="tuikuan_reason" autocomplete="off" placeholder="请输入退款原因，最多不超过200字。" maxlength="200"></textarea>
				</view>
			</view>
			</view>
			<view class="tuikuan_footer">
				<el-button type="primary" @click="tuikuan_confirm">提交申请</el-button>
			</view>
		</el-dialog>
		<!-- 支付弹窗 调用part/pay 组件优化，支持直接插入并控制显示状态 -->
		<el-dialog 
			:visible.sync="dialogPayVisible" 
			custom-class="pay_dialog" 
			center
			width="70vh"
			:show-close="true"
			@close="dialogPayVisible = false"
		>
			<pay 
				v-if="dialogPayVisible" 
				:order-id="currentOrderId" 
				@pay-success="handlePaySuccess" 
				@close="dialogPayVisible = false"
			/>
		</el-dialog>
	</Layout>
</template>

<script>
	import Layout from './part/layouts.vue';
	import memberleft from './part/member_left.vue';
	import pay from './part/pay.vue';
	export default {
		components:{
			Layout,
			memberleft,
			pay
		},
		data(){
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				name:'',
				order_status:'',
				dialogFormVisible: false,
				dialogPayVisible:false,
				currentOrderId: '',
				tuikuan_reason: '',
				tuikuan_order: {}, // 记录当前退款订单对象
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 30;
			}
			let obj = this.$Route.query;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
			}
			
		},
		onShow() {
			this.getData();
		},
		
		methods:{
			openPayDialog(e) {
				this.currentOrderId = e.asset_id;
				this.dialogPayVisible = true;
			},
			showRefundDialog(row) {
				// 优化：弹窗展示对应订单详情
				this.tuikuan_order = { 
					order_no: row.order_no,
					amount: row.amount,
					pay_type_text: row.pay_type_text,
					id:row.id,
					// 若有扩展字段可在此补充
				};
				this.tuikuan_reason = '';
				this.dialogFormVisible = true;
			},
			// 新增：提交退款申请逻辑
			tuikuan_confirm() {
				if (!this.tuikuan_reason.trim()) {
					this.$message.error('请输入退款原因');
					return;
				}
				if (!this.tuikuan_order.id) {
					this.$message.error('订单信息有误');
					return;
				}
				this._post(
					'asset.Asset/refund',
					{
						id: this.tuikuan_order.id,
						reason: this.tuikuan_reason
					},
					res => {
						this.$message.success('退款申请提交成功');
						this.dialogFormVisible = false;
						this.getData();
					},
					err => {
						const msg = (err && err.data && err.data.msg) ? err.data.msg : '操作失败，请重试';
						this.$message.error(msg);
					}
				);
			},
			downloadPDF(e) {
				 if(!e){
				 	 this.$message.error('评估报告生成中~');
				 }else{
					window.open(e, '_blank'); 
				 }
				// 下载
				// const pdfUrl = e; 
				// const a = document.createElement('a');
				// a.href = pdfUrl;
				// a.download = '评估报告.pdf'; 
				// a.click();
				// document.body.removeChild(a); 
			 },
			goEdit(e){
				if(uni.getStorageSync('apply_status')==3){
					this.$message.error('用户认证审核中');
					return false;
				}
				if(uni.getStorageSync('apply_status')==2){
					this.$message.error('用户认证失败，请重新提交审核');
					return false;
				}
				this.$router.push({
					path: 'pay_detail',
					query: {
						id: e
					}
				})
			},
			finds(e){
				uni.showModal({
				    title: '审核意见', 
				    content: e.auth_remark?e.auth_remark:"无审核意见说明", 
				    showCancel: true, 
				    cancelText: '取消', 
				    cancelColor: '#cccccc', 
				    confirmText: '确定', 
				    confirmColor: '#F78A30', 
				    success: function (res) {
				        if (res.confirm) {
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    },
				    fail: function (err) {
				        console.log('调用失败：', err);
				    },
				    complete: function () {
				    }
				});
			},
			asset_add(){
				if(uni.getStorageSync('apply_status')==3){
					this.$message.error('用户认证审核中');
					return false;
				}
				if(uni.getStorageSync('apply_status')==2){
					this.$message.error('用户认证失败，请重新提交审核');
					return false;
				}
				if(uni.getStorageSync('third_auth_status')==0){
					this.$message.error('请提交实名认证');
					return false;
				}
				if(uni.getStorageSync('third_auth_status')==2){
					this.$message.error('未注册天府信用通账号，请联系管理员');
					return false;
				}
				uni.navigateTo({
				  url: '/asset_add'
				});
			},
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getData(){
				this._get('asset.Asset/paymentRecords',{
					page: this.page,
					limit: this.list_rows,
					name: this.name,
					status: this.order_status,
				},res=>{
					this.listData = res.data.data;
					this.total = res.data.total;
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			//取消退款
			cancelRefund(e) {
				// 优化加上二次确认
				this.$confirm && typeof this.$confirm === 'function'
				? this.$confirm('确定要取消退款申请吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this._post('/asset.Asset/cancelRefund', {
							id: e.id,
						}, res => {
							uni.showToast({
								icon: 'none',
								title: '操作成功'
							})
							this.getData();
						}, err => {
							uni.showToast({
								icon: 'none',
								title: err.data.msg
							})
							return;
						});
					}).catch(() => {
						// 用户取消
					})
				:'';
			}
		}
	}
</script>

<style lang="scss">
	.bg{
		width: 100%;
		background: #F1F1F1;
		min-height: 800px;
	}
	.content{
		width: 1290px;
		margin: 0 auto;
		padding-top: 14px;
		display: flex;
		justify-content: space-between;
	}
	.content_left{
		width: 245px;
		min-height: 789px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
		border-radius: 0px 0px 0px 0px;
	}
	.content_right{
		width: 1024px;
		min-height: 789px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
		border-radius: 0px 0px 0px 0px;
	}
	.mtitle{
		font-weight: 500;
		font-size: 16px;
		color: #3D3D3D;
		width: 985px;
		margin:0 auto;
		height: 48px;
		line-height: 48px;
		display: flex;
		align-items: center;
	}
	.lines{
		width: 985px;
		height: 0px;
		border: 1px solid #D8D8D8;
		opacity: 0.6;
		margin:0 auto;
	}
	.mimg{
		width: 20px;
		height: 20px;
		margin-right: 6px;
		margin-left: 20px;
		margin-top: 2px;
	}
	.content_r{
		padding: 34px 22px;
	}
	.addimg{
		width: 12px;
		height: 12px;
		margin-left: 5px;
	}
	.addimgs{
		width: 16px;
		height: 16px;
		margin-left: 8px;
	}
	.adds{
		width: 80px;
		height: 32px;
		background: #F78A30;
		border-radius: 4px 4px 4px 4px;
		font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.search-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 358px;
	}
	.search-name{
		width: 232px;
		height: 32px;
		background: #F7F8FA;
		padding: 0 12px;
		font-size: 14px;
		color: #333333;
		line-height: 32px;
	}
	.search-names{
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}
	.qqtable{
		margin-top: 30px;
	}
	::v-deep .el-table__header th {
	  background-color: #F2F3F5;
		 font-weight: 400;
		 font-size: 14px;
		 color: #1D2129;
		 text-align: center;
	}
	.green{
		font-weight: 400;
		font-size: 12px;
		color: #20BC30;
	}
	.red{
		font-weight: 400;
		font-size: 12px;
		color: #EA3B3B;
	}
	.center-table .el-table__header th,
	.center-table .el-table__body td {
	 color: #EA3B3B !important;
	}
	.asset_e{
		font-weight: 400;
		font-size: 12px;
		color: #F6773C;
	}
	.asset_l{
		font-weight: 400;
		font-size: 12px;
		color: #165DFF;
	}
	::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
		background-color:#ffffff !important;
	}
	
	/* 修改下拉选项选中的文字颜色 */
	::v-deep .el-select-dropdown__item.selected {
		color: #F78A30 !important;
	}

	
	::v-deep .el-select .el-input.is-focus .el-input__inner ,::v-deep .el-select .el-input__inner:focus{
		border-color: #F78A30 !important;
	}
	.selecet-text{
		width: 56px;
		height: 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	::v-deep .el-select .el-input{
		width: 120px !important;
		height: 32px !important;
	}
	::v-deep .el-dialog{
		width: 657px;
		height: 561px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);
		border-radius: 8px 8px 8px 8px;
	}
	.tuikuan_title{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 18px;
		color: #3D3D3D;
		line-height: 22px;
		text-align: center;
		margin-top: -30px;
		margin-bottom: 48px;
	}
	.tuikuan_content_input{
		width: 395px;
		height: 83px;
		background: #F2F3F5;
		border-radius: 0px 0px 0px 0px;
		padding: 8px;
	}
	::v-deep .uni-textarea-textarea{ 
		width: 100%;
		height: 83px;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
	}
	::v-deep .uni-textarea-placeholder{ 
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}
	::v-deep .el-dialog__headerbtn{
		top: 18px !important;
		right: 18px !important;
	}
	.tuikuan_content_order{
		display: flex;
		justify-content: space-between;
		width: 489px;
		margin: 0 auto;
		margin-bottom: 33px;
	}
	.tuikuan_content_title{
		width: 100px;
		height: 22px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 22px;
		text-align: left;
		position: relative;
		overflow: hidden;
		display: flex;
	}
	.tuikuan_content_order .red{
		font-size: 12px;
		width: 10px;
	}
	.tuikuan_content_order_title{
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		display: flex;
	}
	.tuikuan_content_order_value{
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
	}
	.tuikuan_footer{
		display: flex;
		justify-content: center;
		z-index: 9999;
		position: relative;
	}
	.tuikuan_footer button{
		width: 236px;
		height: 46px;
		background-color: #F78A30;
		border-radius: 4PX;
		border-color:#F78A30;
		margin-top: 20px;

	}
	@media screen and (max-width: 768px) {
	
	}
</style>
