<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="pay_nav">
						<text class="">付款记录</text> > <text class="pay_xq">查看详情</text>
					</view>
					<view class="content_r">
						<view class="pay_num" v-if="payinfo && payinfo.order_info">
							<view class="pay_num_l">
								<image src="../static/img/member/pwzf.png" class="pay_num_img" v-if="payinfo.pay_status != 20"></image>
								<image src="../static/img/member/yzf.png" class="yzf_img" v-if="payinfo.pay_status == 20"></image>
								<view class="pay_num_title">
									<view class="pay_status" v-if="payinfo.pay_status != 20">
										订单未支付
									</view>
									<view class="pay_desc" v-if="payinfo.pay_status != 20">
										支付后，开启评估服务~
									</view>
									<view class="pay_status" v-if="payinfo.pay_status == 20">
										订单已支付
									</view>
									<view class="pay_desc" v-if="payinfo.pay_status == 20">
										报告评估中，请耐心等待
										<!-- {{ payinfo.evaluate_info && payinfo.evaluate_info.fulfillment_status_text ? payinfo.evaluate_info.fulfillment_status_text : '报告评估中，请耐心等待' }} -->
									</view>
								</view>
							</view>
							<view class="pay_num_r">
								<view class="pay_aount">
									¥{{ payinfo.amount || (payinfo.order_info.amount ? Number(payinfo.order_info.amount).toFixed(2) : '0.00') }}
								</view>
								<view class="pay_desc2" v-if="payinfo.pay_status != 20">
									待支付金额
								</view>
								<view class="pay_desc2" v-if="payinfo.pay_status == 20">
									支付金额
								</view>
							</view>
						</view>
						<view class="pay_title">
							<view class="xian"></view>订单信息
						</view>
						<view class="order_detail" v-if="payinfo && payinfo.order_info">
							<view class="order_list">
								订单编号
								<view class="order_list_value">{{ payinfo.order_info.order_no || '-' }}</view>
							</view>
							<view class="order_list">
								订单状态
								<view class="order_list_value">
									<view class="order_list_status" v-if="payinfo.record_status != 'paid'">{{payinfo.record_status_text}}</view>
									<view class="order_list_status2" v-else>已支付</view>
								</view>
							</view>
							<view class="order_list">
								资产名称
								<view class="order_list_value">{{ payinfo.order_info.asset_name || '-' }}</view>
							</view>
							<view class="order_list">
								资产类型
								<view class="order_list_value">
									{{ payinfo.order_info.asset_type === 'game' ? '游戏资产包' : payinfo.order_info.asset_type || '-' }}
								</view>
							</view>
							<view class="order_list">
								资产编号
								<view class="order_list_value">{{ payinfo.order_info.asset_no || '-' }}</view>
							</view>
							<view class="order_list">
								支付方式
								<view class="order_list_value">{{ payinfo.order_info.pay_type_text || '-' }}</view>
							</view>
							<view class="order_list">
								支付时间
								<view class="order_list_value">{{ payinfo.order_info.pay_time_text || '-' }}</view>
							</view>
							<view class="order_list">
								支付金额
								<view class="order_list_value">{{ payinfo.amount ? payinfo.amount + '元' : ((payinfo.order_info.amount ? payinfo.order_info.amount+'元' : '-')) }}</view>
							</view>
							<view class="order_list boder-none">
								支付方
								<view class="order_list_value">{{ payinfo.order_info.payer || '-' }}</view>
							</view>
							<view class="order_list boder-none">
								交易单号
								<view class="order_list_value">{{ payinfo.order_info.transaction_id || '-' }}</view>
							</view>
						</view>
						<view class="pay_title">
							<view class="xian"></view>评估服务信息
						</view>
						<view class="order_detail2" v-if="payinfo && payinfo.evaluate_info">
							<view class="order_list">
								报告编号
								<view class="order_list_value">{{ payinfo.evaluate_info.report_no || '-' }}</view>
							</view>
							<view class="order_list">
								履约进度
								<view class="order_list_value">
									<view
										class="order_list_status3"
										v-if="payinfo.evaluate_info.fulfillment_status === 'pending'">
										{{ payinfo.evaluate_info.fulfillment_status_text || '报告评估中' }}
									</view>
									<view 
										class="order_list_status2"
										v-else-if="payinfo.evaluate_info.fulfillment_status === 'done'">
										{{ payinfo.evaluate_info.fulfillment_status_text || '已完成' }}
									</view>
									<view 
										class="order_list_status"
										v-else>
										{{ payinfo.evaluate_info.fulfillment_status_text || '-' }}
									</view>
								</view>
							</view>
							<view class="order_list boder-none">
								预计交付
								<view class="order_list_value">{{ payinfo.evaluate_info.expected_delivery_time_text || '-' }}</view>
							</view>
							<view class="order_list boder-none">
								权属方
								<view class="order_list_value">{{ payinfo.evaluate_info.owner || '-' }}</view>
							</view>
						</view>
						<view class="pay_btns" v-if="payinfo && payinfo.actions">
							<el-button
								v-if="true"
								@click="() => $router.back()"
								type="text"
								size="small"
								class="asset_l"
							>返回</el-button>
							<!-- 退款按钮 -->
							<el-button
								v-if="payinfo.actions.refund"
								@click="dialogFormVisible = true"
								type="text"
								size="small"
								class="asset_l"
							>申请退款</el-button>
							<!-- 取消付款 -->
							<el-button
								v-if="payinfo.actions.pay"
								@click="showCancelRefundConfirm"
								type="text"
								size="small"
								class="asset_l"
							>取消付款</el-button>
							<!-- 去支付 -->
							<el-button
								v-if="payinfo.actions.pay"
								@tap="openPayDialog(payinfo.order_info)"
								type="text"
								size="small"
								class="asset_pay"
							>去支付</el-button>
							<!-- 下载评估报告 -->
							<el-button
								v-if="payinfo.actions.download_report"
								@click="downloadPDF(payinfo.evaluate_info && payinfo.evaluate_info.report_url)"
								type="text"
								size="small"
								class="asset_2"
							>下载评估报告</el-button>
						</view>
					</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">{{ payinfo.order_info && payinfo.order_info.order_no ? payinfo.order_info.order_no : '-' }}</view>
					</view>
					<view style="display: flex; align-items: center;">
						<view class="tuikuan_content_order_title">支付金额：</view>
						<view class="tuikuan_content_order_value">{{ payinfo.amount ? payinfo.amount + '元' : ((payinfo.order_info && payinfo.order_info.amount ? payinfo.order_info.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">{{ payinfo.order_info && payinfo.order_info.pay_type_text ? payinfo.order_info.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="480px"
			:show-close="true"
			@close="dialogPayVisible = false"
		>
			<pay 
				v-if="dialogPayVisible" 
				:order-id="currentOrderId" 
				@pay-success="handlePaySuccess" 
				@close="dialogPayVisible = false"
			/>
		</el-dialog>

		<!-- 取消退款二次确认弹窗（使用uniapp的模态框，不再用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 {
				payinfo: {},
				total: 0,
				name:'',
				order_status:'0',
				dialogFormVisible: false,
				dialogPayVisible:false,
				currentOrderId: '',
				tuikuan_reason: '',
				id:'',
				showCancelRefundDialog: false,   // 新增：控制取消付款确认弹窗
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 30;
			}
			
			
		},
		onShow() {
			let obj = this.$Route.query;
			if(obj.hasOwnProperty('id')){
				this.id = Number(obj.id);
			}
			this.getData();
		},
		
		methods:{
			// 新增：提交退款申请逻辑
			tuikuan_confirm() {
				if (!this.tuikuan_reason.trim()) {
					this.$message.error('请输入退款原因');
					return;
				}
				this._post(
					'asset.Asset/refund',
					{
						id: this.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);
					}
				);
			},
			openPayDialog(e) {
				this.currentOrderId = e.id;
				this.dialogPayVisible = true;
			},
			downloadPDF(e) {
				 if(!e){
				 	 this.$message.error('评估报告生成中~');
				 }else{
					window.open(e, '_blank'); 
				 }
			},
			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: 'asset_add',
					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 () {
				    }
				});
			},
			getData(){
				this._get('asset.Asset/paymentDetail',{
					id: this.id,
				},res=>{
					console.log(res.data,22222222222222);
					this.payinfo = res.data;
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
				});
			},

			// 新增：展示取消退款的二次确认弹窗
			showCancelRefundConfirm() {
				uni.showModal({
					title: '确认取消付款？',
					content: '是否确定要取消本次付款？',
					showCancel: true,
					cancelText: '取消',
					cancelColor: '#cccccc',
					confirmText: '确定',
					confirmColor: '#F78A30',
					success: (res) => {
						if (res.confirm) {
							this.cancelRefundAction();
						}
						// 不需要设置showCancelRefundDialog
					}
				});
			},
			// 新增：二次确认确定调用接口
			cancelRefundAction() {
				this._post(
					'asset.Asset/cancelPayment',
					{
						id: this.id
					},
					res => {
						this.$message.success('取消付款成功');
						this.getData();
					},
					err => {
						const msg = (err && err.data && err.data.msg) ? err.data.msg : '取消付款失败，请重试';
						this.$message.error(msg);
					}
				);
			},

		}
	}
</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;
	}
	.pay_nav{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 12px;
		color: #A1A1A1;
		line-height: 17px;
		text-align: left;
		margin-left: 23px;
		margin-top: 12px;
	}
	.pay_xq{
		color: #F38D5D;
	}

	.content_r{
		padding: 20px 22px;
	}
	.pay_num{
		background-image: url('/static/img/member/pbg.png');
		background-size: cover;
		width: 948px;
		height: 150px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pay_num_l{
		margin-left: 56px;
		display: flex;
		align-items: center;
	}
	.pay_num_img{
		width: 134px;
		height: 102px;
	}
	.yzf_img{
		width: 138px;
		height: 120px;
	}
	.pay_num_r{
		margin-right: 116px;
	}
	.pay_num_title{
		margin-left: 10px;
	}
	.pay_status{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 26px;
		color: #3D3D3D;
		line-height: 38px;
		text-align: left;
	}
	.pay_desc{
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 14px;
		color: #767676;
		line-height: 19px;
		text-align: left;
		margin-top: 6px;
	}
	.pay_desc2{
		font-family: Segoe UI, Segoe UI;
		font-weight: 400;
		font-size: 14px;
		color: #767676;
		line-height: 19px;
		text-align: left;
		margin-top: 12px;
	}
	.pay_aount{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 32px;
		color: #F6773C;
		line-height: 31px;
		text-align: left;
	}
	.pay_title{
		display: flex;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 18px;
		color: #252B33;
		line-height: 26px;
		text-align: left;
		margin-top: 28px;
		margin-left: 14px;
	}
	.xian{
		width: 4px;
		height: 22px;
		background: #F78A30;
		border-radius: 3px 3px 3px 3px;
		margin-right: 10px;
	}
	.order_detail{
		margin: 0 auto;
		margin-top: 14px;
		width: 900px;
		height: 270px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid #E5E6EB;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		padding: 19px 24px;
		overflow: hidden;
	}
	.order_detail2{
		margin: 0 auto;
		margin-top: 14px;
		width: 900px;
		height: 98px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border: 1px solid #E5E6EB;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-between;
		padding: 19px 24px;
		overflow: hidden;
	}
	.order_list{
		width: 435px;
		height: 54px;
		border-radius: 0px 0px 0px 0px;
		border-bottom: 1px solid #E5E6EB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #A1A1A1;
		line-height: 20px;
		text-align: left;
	}
	.boder-none{
		border: none;
	}
	.order_list_value{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 20px;
		text-align: left;
		width: 354px;
	}
	.order_list_status{
		width: 63px;
		height: 27px;
		border-radius: 14px;
		background: #FFF7E9;
		border: 1px solid #F5B865;
		text-align: center;
		line-height: 27px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 12px;
		color: #F6773C;
	}
	.order_list_status2{
		width: 63px;
		height: 27px;
		border-radius: 14px;
		background: #F2FFE9;
		border: 1px solid #95DC6B;
		text-align: center;
		line-height: 27px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 12px;
		color: #46AF1F;
	}
	.order_list_status3{
		width: 86px;
		height: 27px;
		border-radius: 14px;
		background: #FFF7E9;
		border: 1px solid #F5B865;
		text-align: center;
		line-height: 27px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 12px;
		color: #F6773C;
	}
	.pay_btns{
		margin-top: 90px;
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
	}
	.asset_l{
		height: 40px;
		background: #FFFFFF;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #DFDFDF;
		padding: 9px 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		text-align: center;
		margin-right: 22px;
	}
	.asset_2{
		height: 40px;
		background: #B5B5B5;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #B5B5B5;
		padding: 9px 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #ffffff;
		text-align: center;
		margin-right: 22px;
	}
	.asset_pay{
		width: 101px;
		height: 40px;
		background: #F78A30;
		border-radius: 4px 4px 4px 4px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #ffffff;
		text-align: center;
	}

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

	}
	::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;
	}
	.cancel-refund-dialog .el-dialog__header {
		text-align: center;
		font-weight: 600;
		font-size: 18px;
	}
	.cancel-refund-dialog .el-dialog__body {
		padding: 0 30px !important;
	}
	.cancel-refund-dialog .dialog-footer {
		text-align: center;
	}
	@media screen and (max-width: 768px) {
	
	}
</style>
