<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="'2'"></memberleft>
				</view>
				<view class="content_right">
					<view class="mtitle">
						<image src="../static/img/member/iconqq.png" class="mimg"></image>
						装备道具资产确权
					</view>
					<view class="lines"></view>
					
					<view class="asset_list_desc">
						<view class="assetDesc">
							<view class="assetDesc_dian"></view>
							您拥有的游戏CDkey，游戏账号游戏道具、装备、饰品都是属于您的资产
						</view>
						<view class="assetDesc">
							<view class="assetDesc_dian"></view>
							您拥有资产的使用权或所有权，您可以在我们平台把资产卖给需要的人去使用
						</view>
					</view>
					
					<view class="content_r">
						<view class="d-b-c">
							<view class="adds" @tap="asset_add()">
								<image src="../static/img/member/add.png" class="addimg"></image>
								新增
							</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="no"
						      label="资产编号"
						      width="150">
						    </el-table-column>
						    <el-table-column
						      prop="name"
						      label="资产名称"
						      width="140">
						    </el-table-column>
						    <el-table-column
						      prop="province"
						      label="资产类型"
						      width="110">
							  <template slot-scope="scope">
							    <span>数字资产</span>
							  </template>
						    </el-table-column>
						    <el-table-column
						      prop="username"
						      label="存证人"
						      width="120">
						    </el-table-column>
						    <el-table-column
						      prop="create_time"
						      label="提交时间"
						      width="90">
						    </el-table-column>
						    
							  <el-table-column
							      prop="auth_status"
							      label="状态"
							      >
							      <template slot-scope="scope">
									<span v-if="scope.row.auth_status == 'draft'" >未提交</span>
							        <span v-if="scope.row.auth_status == 'pending'" >审核中</span>
							        <span v-if="scope.row.auth_status == 'pass'" class="green">审核成功</span>
							        <span v-if="scope.row.auth_status == 'reject'" class="red">审核失败</span>
							      </template>
							    </el-table-column>
							<el-table-column
							  prop="tx_hash"
							  label="存证哈希"
							   width="150">
							</el-table-column>
						    <el-table-column
						      fixed="right"
						      label="操作"
							  width="150"
						     >
						      <template slot-scope="scope">
						      <!--  <el-button @tap="goEdit(scope.row.id)"  type="text" size="small" class="asset_e" v-if="scope.row.auth_status== 'draft'">继续填写</el-button> -->
								<el-button @tap="goEdit(scope.row.id)"  type="text" size="small" class="asset_e" v-if="scope.row.auth_status!= 'reject'">查看详情</el-button>
								<el-button @tap="goEdit(scope.row.id)"  type="text" size="small" class="asset_e" v-if="scope.row.auth_status== 'reject'">修改</el-button>
								<!-- <el-button @click="downloadPDF(scope.row.report_url)" type="text" size="small" class="asset_l" v-if="scope.row.auth_status== 'pass'&&scope.row.asset_status">查看评估报告</el-button> -->
								<el-button @click="downloadPDF(scope.row.report_url)" type="text" size="small" class="asset_l" v-if="scope.row.auth_status== 'pass'&&!scope.row.asset_status== 'fail'">评估中</el-button>
								<el-button @tap="finds(scope.row)" type="text" size="small" class="asset_l" v-if="scope.row.auth_status== 'reject'">查看意见</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>
	</Layout>
</template>

<script>
	import Layout from './part/layouts.vue';
	import memberleft from './part/member_left.vue';
	export default {
		components:{
			Layout,
			memberleft
		},
		data(){
			return {
				page: 1,
				list_rows: 10,
				listData: [],
				total: 0,
				name:'',
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 10;
			}
			let obj = this.$Route.query;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
			}
			
		},
		onShow() {
			this.getData();
		},
		
		methods:{
			 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: 'digital_assets_add',
					query: {
						id: e
					}
				})
			},
			finds(e){
				uni.showModal({
				    title: '审核意见', 
				    content: e.fail_reason?e.fail_reason:"无审核意见说明", 
				    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: '/digital_assets_add'
				});
			},
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getData(){
				this._get('gameasset.GameAsset/index',{
					page: this.page,
					limit: this.list_rows,
					name: this.name,
				},res=>{
					console.log(res.data.data,22222)
					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);
				}
				);
			},
		
		}
	}
</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: 10px;
		margin-left: 23px;
	}
	.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;
	}
	
	.asset_list_desc{
		width: 908px;
		height: 48px;
		background: rgba(255,247,241,0.6);
		border-radius: 8px 8px 8px 8px;
		border: 1px solid #F78A30;
		margin: 24px auto;
		padding: 24px;
	}
	.assetDesc{
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		line-height: 24px;
		text-align: left;
	}
	.assetDesc_dian{
		width: 6px;
		height: 6px;
		border-radius: 100%;
		background-color: #3D3D3D;
		margin-right: 10px;
	}
	@media screen and (max-width: 768px) {
	
	}
</style>
