<template>
	<Layout :index="-1" :banner="0"  :img="'/static/img/pro.jpg'" :titles="'资产中心'" :title_content="'寻找您心仪的游戏'">
		<view class="detail_bg ptm-120">
		    
			<view class="max-width">
				<view class="detail_game_nav"> <text @tap="goPath('/game')">资产中心</text> > {{detail.name}}</view>
				<view class="detail_game">
					  <view class="detail_swiper">
						 <view class="screen-swiper-box">
						 			<swiper class="screen-swiper" indicator-dots="false" circular="true" :autoplay="!autoplay"
						 				interval="3500" duration="500" :current="currentIndex" @change="handleSwiperChange">
						 				<swiper-item v-if="detail.video">
						 					<video id="myVideo" :src="detail.video.file_path" @play="BoFang()" @pause="ZanTing()" @error="videoErrorCallback" controls></video>
						 				</swiper-item>
						 				<swiper-item v-for="(item,index) in detail.image" :key="index">
						 					<image class="swiperImage" :src="item.file_path" mode="aspectFit"></image>
						 				</swiper-item>
										
						 			</swiper>
						 	</view>
							<view class="zhishi" v-if="detail.video" >
								<view @tap="next(0)" class="swiperZhishi" :class="{'xz':currentIndex==0}"><video  class="swiperZhishi" :src="detail.video.file_path"  mode="aspectFit" :controls="false" :show-center-play-btn="false"></video></view>
								<image @tap="next(index+1)" :class="{'xz':currentIndex==index+1}" v-for="(item,index) in detail.image" :key="index"  class="swiperZhishi" :src="item.file_path" mode="aspectFit"></image>
							</view>
							<view class="zhishi" v-else>
								<image @tap="next(index)" :class="{'xz':currentIndex==index}" v-for="(item,index) in detail.image" :key="index"  class="swiperZhishi" :src="item.file_path" mode="aspectFit"></image>
							</view>
					  </view>
					  <view class="details">
					  	  <!-- <image class="detail__tu" :src="detail.image[0].file_path" mode="heightFix"></image> -->
						  <view class="details_title">
							  <view class="details_t">{{detail.name}}</view>
						  	  <view class="game_star">
						  	     <text class="iconfont icon-star" :class="{'icon-h':detail.score>0}"></text>
						  	     <text class="iconfont icon-star" :class="{'icon-h':detail.score>1}"></text>
						  	     <text class="iconfont icon-star" :class="{'icon-h':detail.score>2}"></text>
						  	     <text class="iconfont icon-star" :class="{'icon-h':detail.score>3}"></text>
						  	     <text class="iconfont icon-star" :class="{'icon-h':detail.score>4}"></text>
						  	     <text class="star_text">{{detail.score+'.0'}}</text>
						  	  </view>
						  </view>
						  <view class="details_desc">
							  发行商:{{detail.issuing_company}}
						  </view>
						  <view class="details_desc">
							  研发商:{{detail.make_company}}
						  </view>
						  <view class="details_desc">
						  	 出版单位:{{detail.publish_company}}
						  </view>
						  <view class="details_desc">
						  	游戏版号:{{detail.publish_no}}
						  </view>
						  <view class="details_desc" style="display: flex;flex-direction: row">
						  	<view style="width: 40%;">版权登记及上链信息:</view>
							<view style="width: 60%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:4;overflow: hidden;text-overflow: ellipsis;">{{detail.copyright}}</view>
						  </view>
						  <view class="details_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount>0">
						  	 项目融资需求:{{detail.financing_amount}}万
						  </view>
						  <!-- <view class="details_desc" v-else-if="detail.is_financing==2">
						  	 项目融资需求:待定
						  </view>
						  <view class="details_desc" v-else>
						  	 项目融资需求:无需融资
						  </view> -->
						  
						  <view class="details_desc">
							  发行日期：{{detail.issuing_time}}
						  </view>
					  </view>
				</view>
				<view class="detail_title">
					   <image class="detail__tj" src="../static/img/index/detail1.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc">
					  <rich-text :nodes="detail.desc"></rich-text>
				</view>
				<view class="detail_title">
					   <image class="detail__tj" src="../static/img/index/detail2.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc">
					   <rich-text :nodes="detail.team_desc"></rich-text>
				</view>
				
				<!-- <view class="detail_title" v-if="detail.evaluation">
					   <image class="detail__tj" src="../static/img/evaluation.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc" v-if="detail.evaluation">
					   <rich-text :nodes="detail.evaluation"></rich-text>
				</view> -->
                <!-- 游戏资产评估 -->
				<view class="detail_title" v-if="!detail.evaluate_file||detail.evaluate_file==0">
					   <image class="detail__tj" src="../static/img/game/pg1.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc" v-if="!detail.evaluate_file||detail.evaluate_file==0">
					   <text>未完成评估</text>
				</view>
                <view class="detail_title" v-if="detail.evaluate_file>0">
					   <image class="detail__tj" src="../static/img/game/pg1.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc" v-if="detail.evaluate_file>0">
					   <text>已完成评估</text>
				</view>
				<view class="detail_title" v-if="detail.asset_status=='talk'||detail.asset_status=='financing'||detail.asset_status=='frozen'">
					   <image class="detail__tj" src="../static/img/game/pg2.png" mode="heightFix"></image>
				</view>
				<!-- talk-洽谈对接中;financing-需要融资;frozen-质押冻结中;disposing-待处置;disposed-处置完成 -->
				<view class="detail_desc" v-if="detail.asset_status=='talk'">
					   <text>洽谈对接中</text>
				</view>
				<view class="detail_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount>0">
					   <text>需要融资{{detail.financing_amount}}万</text>
				</view>
				<view class="detail_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount==0">
					   <text>需要融资</text>
				</view>
				<view class="detail_desc" v-if="detail.asset_status=='frozen'">
					   <text>质押冻结中</text>
				</view>
				<view class="detail_title" v-if="detail.asset_status=='disposing'||detail.asset_status=='disposed'">
					   <image class="detail__tj" src="../static/img/game/pg3.png" mode="heightFix"></image>
				</view>
				<view class="detail_desc" v-if="detail.asset_status=='disposing'">
					   <text>待处置</text>
				</view>
				<view class="detail_desc" v-if="detail.asset_status=='disposed'">
					   <text>处置完成</text>
				</view>
				<!-- <view class="detail_title">
					   <image class="detail__tj" src="../static/img/index/detail3.png" mode="heightFix"></image>
				</view> -->
			</view>
		</view>
	</Layout>
</template>


<script>
	import Layout from './part/layoutNo.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				id: '',
				detail:[],
				index: 2,
				currentIndex: 0,
				autoplay: false,
				videoSrc: '',
				imageSrc: '../static/img/index/detailbanner.png',
				star:4
			
			}
		},
		onReady: function(res) {
			if(this.detail.video){
				// #ifndef MP-ALIPAY
				this.videoContext = uni.createVideoContext('myVideo')
				// #endif
			}
					
		},
		watch: {
		  //监听路由
		  $route(to, from) {
			let obj = this.$Route.query;
			this.id = obj.id;
			// if(obj.hasOwnProperty('index')){
			// 	this.index = Number(obj.index);
			// 	this.banner = Number(obj.index);
			// }
			this.getData();
		  }
		},
		created() {
			let obj = this.$Route.query;
			this.id = obj.id;
			// if(obj.hasOwnProperty('index')){
			// 	this.index = Number(obj.index);
			// 	this.banner = Number(obj.index);
			// }
			this.getData();
			
		},
		methods:{
			handleSwiperChange(event) {
						const current = event.detail.current;
						this.currentIndex = current;
						// console.log("当前轮播到第", current, "个索引");
					},
			next(e) {
				this.currentIndex = e;
			},
			videoErrorCallback: function(e) {
							uni.showModal({
								content: e.target.errMsg,
								showCancel: false
							})
						},
			BoFang() {
				if (this.autoplay == false) {
					this.autoplay = true;
				}
			},
			ZanTing() {
				if (this.autoplay == true) {
					this.autoplay = false;
				}
			},
			getData(){
				this._get('game.index/detail',{
					id: this.id,
				},res=>{
					this.detail = res.data.detail;
					// this.getVideoBase64(this.detail.video.file_path);
					//console.log(this.detail,22222)
					uni.setNavigationBarTitle({
						title: this.detail.name + '-COG可信资产服务平台！'
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.zhishi{
		display: flex;
		.swiperZhishi{
			width: 200px;
			height: 148px;
			opacity: 0.5;
		}
		.swiperZhishi{
			width: 200px;
			height: 148px;
			opacity: 0.5;
			border: 1px solid #111111;
		}
		.xz{
			opacity: 1;
			border: 1px solid #F48612;;
		}
	}
	.detail_bg{
		width: 100%;
		min-height: 800px;
		background-image: url(../static/img/index/gbgs.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.detail_title{
		margin-top: 80px;
		margin-bottom: 32px;
		.detail__tj{
			width: 230px;
			height: 82px;
		}
	}
	.detail_desc{
		font-size: 21px;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 32px;
	}
	.detail_game{
		width: 100%;
		height: 741px;
		display: flex;
		background-color: #383838;
		.detail_swiper{
			width: 800px;
			height: 741px;
			.screen-swiper-box {
						position: relative;
						height: 593px;
						width: 100%;
						.screen-swiper {
							width: 100%;
							position: absolute;
							height: 100%;
							.swiperImage {
								width: 100%;
								position: absolute;
								height: 100%;
							}
							#myVideo {
								width: 100%;
								position: absolute;
								height: 100%;
							}
						}
					}
		}
		.details{
			width: 800px;
			height: 424px;
			padding: 41px 53px;
			.detail__tu{
				width: 611px;
				height: 159px;
			}
			.details_title{
				display: flex;
				justify-content: space-between;
				margin: 13px 0 43px 0;
				align-items: flex-end;
				.details_t{
					// width: 263px;
					// height: 50px;
					font-size: 50px;
					font-weight: 400;
					color: #FFFFFF;
					// line-height: 32px;
				}
					.game_star{
						.icon-star{
							color: #727272;
							font-size: 20px;
						}
						.icon-h{
							color: #F48612 !important;
						}
						.star_text{
							font-size: 19px;
							font-weight: 400;
							color: #F48612;
							line-height: 24px;
							margin-left: 12px;
						}
					}
				
			}
			.details_desc{
				font-size: 30px;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 46px;
				margin-top: 20px;
			}
		}
	}
	.detail_game_nav{	
		font-weight: 400;
		font-size: 14px;
		color: #878686;
        padding: 20px 0;
		cursor: pointer;
	}
	
	@media screen and (max-width: 768px) {
		.details_title{
			flex-direction: column;
			align-items: flex-start !important;
		}
		.detail_desc{
			font-size: 12px !important;
			line-height: 18px !important;
		}
		.detail__tj{
			height: 30px !important;
		}
	}
</style>
