<template>
	<div class="market">
		<div class="sell_bg_div">
			<div class="sell_bg_div_cont" v-if="activeName=='first'">
				<div class="data_box">
					<p class="sell_title">Floor Price<span class="font12 colorf80 marginL4">(7day)</span></p>
					<div class="data_part clearfix">
						<div class="noborder">
							<p class="font24 special-font num_p flex_p planet_num_p"><img
									src="@/assets/images/sell/bnb-icon.png" class="icon_img" />{{floorPrice0}}</p>
						</div>
					</div>
				</div>
				<div class="data_box">
					<p class="sell_title">Highest Sale Price<span class="font12 colorf80 marginL4">(7day)</span></p>
					<div class="data_part clearfix">
						<div class="noborder">
							<p class="font24 special-font num_p flex_p planet_num_p"><img
									src="@/assets/images/sell/bnb-icon.png" class="icon_img" />{{highestPrice0}}</p>
						</div>
					</div>
				</div>
				<div class="data_box">
					<p class="sell_title">Average Sale Price<span class="font12 colorf80 marginL4">(7day)</span></p>
					<div class="data_part clearfix">
						<div class="noborder">
							<p class="font24 special-font num_p flex_p planet_num_p"><img
									src="@/assets/images/sell/bnb-icon.png" class="icon_img" />{{averagePrice0}}</p>
						</div>
					</div>
				</div>
				<div class="data_box">
					<p class="sell_title">Total Sales Volume<span class="font12 colorf80 marginL4">(7day)</span></p>
					<div class="data_part clearfix">
						<div class="noborder">
							<p class="font24 special-font num_p flex_p planet_num_p"><img
									src="@/assets/images/sell/bnb-icon.png" class="icon_img" />{{totalPrice0}}</p>
						</div>
					</div>
				</div>
				<div class="data_box">
					<p class="sell_title">Transactions<span class="font12 colorf80 marginL4">(All)</span></p>
					<div class="data_part clearfix">
						<div class="noborder">
							<p class="font24 special-font num_p planet_num_p">{{totalCount0}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="market_cont">
			<div class="main_border">
				<div class="main_box">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane :label="m_blindbox" name="first">
							<div class="kitty_div">
								<div v-if="!showfirstdetail">
									<div class="top_select_part_hide">
										<div class="top_select_part">
											<div class="order_search">
												<div class="order_btn clearfix" @click="changeboderTime()">
													<span class="order_words">Shelf time</span>
													<span class="caret_span">
														<i class="el-icon-caret-top"
															:class="timeorder=='asc'?'active':''"></i>
														<i class="el-icon-caret-bottom"
															:class="timeorder=='desc'?'active':''"></i>
													</span>
												</div>
                        <div class="order_btn clearfix" @click="changeboderLevel()">
													<span class="order_words">Level</span>
													<span class="caret_span">
														<i class="el-icon-caret-top"
															:class="levelorder=='asc'?'active':''"></i>
														<i class="el-icon-caret-bottom"
															:class="levelorder=='desc'?'active':''"></i>
													</span>
												</div>
												<div class="order_btn bottom_btn clearfix" @click="changeboderPrice()">
													<span class="order_words">Price</span><span
														class="caret_span"><i class="el-icon-caret-top"
															:class="priceorder=='asc'?'active':''"></i><i
															class="el-icon-caret-bottom"
															:class="priceorder=='desc'?'active':''"></i></span>
												</div>
											</div>
										</div>
									</div>
									<div class="cat_list_div" v-loading="loading"
										element-loading-background="rgba(7, 16, 48, 1)">
										<ul class="clearfix" v-if="!loading&&totalcat>0">
											<li v-for="(item,index) in catsList" :key="index">
												<label class="id_label">#{{item.token_id}}</label>
												<div class="cat_data_div">
													<div class="cat_img_div">
														<img :src="item.image" />
													</div>
													<div class="cat_title_div">
														<p class="cat_name">
															<span class="gradualcolor">Hero</span>
														</p>
													</div>
                          <div class="cat_img_b">Lv:<span style="font-weight:500">2</span></div>
													<div class="cat_img_b"><img src="@/assets/images/BNB-2.png"
															class="coin"
															style="width: 14px;height: 14px;margin-right: 4px;" />{{item.price}}<span
															class="marginL">(${{item.usdt_price}})</span></div>
												</div>
											</li>
										</ul>
										<div v-if="!loading&&!totalcat>0"
											style="text-align: center;padding: 120px 0;color: #eee;">
											No Data
										</div>
									</div>
									<!-- <div class="">
										<el-pagination @current-change="handleCurrentChange"
											:current-page.sync="currentPage" :page-size="pageSize" background
											layout="prev, pager, next, jumper" :total="totalcat" :pager-count="5">
										</el-pagination>
									</div> -->
								</div>
								<!-- <div v-if="showfirstdetail">
									<CatDetail :catview="catdata" @hideDetail="hideDetail"></CatDetail>
								</div> -->
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	// import global_ from '@/global.js';
	// import Utils from '@/util/Utils.js';
	// import { mapMutations } from 'vuex'
	// import CatDetail from './CatDetail.vue'
	// import PlanetDetail from './PlanetDetail.vue'
	export default {
		name: 'market',
		components: {
			// CatDetail,
			// PlanetDetail
		},
		data() {
			return {
				activeName: 'first',
				catsList: [
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
          {
            token_id:'601823',
            image:require("../assets/images/sell/box.png"),
            price:0,
            usdt_price:0,
          },
        ],
				totalcat: 7,
				currentPage: 1,
				pageSize: 10,
				priceorder: '',
				timeorder: '',
				era: 0,
				options2: [{
					value: -1,
					label: 'All'
				}, {
					value: 0,
					label: 0
				}, {
					value: 1,
					label: 1
				}, {
					value: 2,
					label: 2
				}, {
					value: 3,
					label: 3
				}, {
					value: 4,
					label: 4
				}, {
					value: 5,
					label: 5
				}],
				level: -1,
				m_blindbox: 'Blind Box',
				showfirstdetail: false,
				catdata: '',
				myaddress: null,
				loading: false,
				boarddata: null,
				floorPrice0: 0,
				highestPrice0: 0,
				averagePrice0: 0,
				totalPrice0: 100,
				totalCount0: 688,
				planetsortval: '',
				planetsorttype: '',
				planetdata: '',
				showseconddetail: false,
				pageSize: 10,
				planetsList: [],
				totalplanet: 0,
				seccurrentPage: 1,
				planettimeorder: '',
				planetpriceorder: '',
				levelorder: ''
			}
		},
		methods: {
			goHome() {
				this.$router.push('/')
			},
			handleClick(tab) {
				if (this.activeName == 'first') {
					this.currentPage = 1
					this.getBoard(1)
					this.getMCatList()
				} else if (this.activeName == 'second') {
					this.seccurrentPage = 1
					this.getBoard(2)
					this.getMPlanetList()
				}
			},
			handleCurrentChange(val) {
				// console.log('当前页', val)
				this.currentPage = val
				// this.getMCatList()
			},
			phaseClick() {
				this.currentPage = 1
				// this.getMCatList()
			},
			reproductionClick() {
				this.currentPage = 1
				// this.getMCatList()
			},
			// 定时器
			minReturn(item, _time) {
				let $this = this
				let t = setInterval(() => {
					_time--
					let movetime = Utils.formatDaySeconds(_time)
					item.remain_time = movetime
					if (_time <= 0) {
						clearInterval(t)
					}
				}, 1000)
			},
			async getMCatList() {
				let $this = this
				let api = global_.market_catlist
				let data = {
					params: {
						token: localStorage.getItem('authdataToken'),
						order_by_price: $this.priceorder,
						order_by_time: $this.timeorder,
						phase: $this.era,
						reproduction_times: $this.level,
						page: this.currentPage,
						per_page: this.pageSize,
					}
				}
				await this.axios.get(api, data).then(resp => {
					let respdata = resp
					if (respdata.code == 10000) {
						this.myaddress = localStorage.getItem('authaddress')
						this.catsList = respdata.data.list.data
						this.totalcat = respdata.data.list.total
						if (this.totalcat > 0) {
							for (let i of this.catsList) {
								if (i.contract_cat.breeding_times >= 0) {
									if (i.contract_cat.breeding_times > 5) {
										i.contract_cat.breeding_times = 5
									}
									let breedingtimes = 5 - i.contract_cat.breeding_times
									$this.$set(i.contract_cat, "remainbreedingtimes", breedingtimes)
								}
								if (i.end > Date.parse(new Date()) / 1000) {
									let remaintime = i.end - Date.parse(new Date()) / 1000
									let movetime = Utils.formatDaySeconds(remaintime)
									$this.$set(i, "remain_time", movetime)
									$this.minReturn(i, remaintime)
								} else {
									let movetime = Utils.formatDaySeconds(0)
									$this.$set(i, "remain_time", movetime)
								}
								i.price = Utils.myTofixed(i.price, 2)
							}
						}
						this.loading = false
					}
				})
			},
			changeboderTime() {
				this.currentPage = 1
				if (this.timeorder == '') {
					this.timeorder = 'desc'
				} else {
					this.timeorder = (this.timeorder == 'asc') ? 'desc' : 'asc'
				}
				this.priceorder = ''
        this.levelorder = ''
				// this.getMCatList()
			},
      changeboderLevel() {
				this.currentPage = 1
				if (this.levelorder == '') {
					this.levelorder = 'desc'
				} else {
					this.levelorder = (this.levelorder == 'asc') ? 'desc' : 'asc'
				}
				this.priceorder = ''
        this.timeorder = ''
				// this.getMCatList()
			},
			changeboderPrice() {
				this.currentPage = 1
				if (this.priceorder == '') {
					this.priceorder = 'asc'
				} else {
					this.priceorder = (this.priceorder == 'asc') ? 'desc' : 'asc'
				}
				this.timeorder = ''
        this.levelorder = ''
				// this.getMCatList()
			},
			gotoDetail(_i) {
				this.showfirstdetail = true
				this.catdata = _i
			},
			hideDetail() {
				this.showfirstdetail = false
				this.getMCatList()
			},
			async getBoard(_type) {
				let $this = this
				let api
				let data = {
					params: {
						duration: 7,
					}
				}
				if (_type == 1) {
					api = global_.market_board
				} else if (_type == 2) {
					api = global_.market_p_board
				}
				await this.axios.get(api, data).then(resp => {
					if (resp.code == 10000) {
						this.boarddata = resp.data
						if (typeof this.boarddata.floorPrice === 'object') {
							this.floorPrice0 = this.boarddata.floorPrice[0]

							this.highestPrice0 = this.boarddata.highestPrice[0]

							this.averagePrice0 = this.boarddata.avgPrice[0]

							this.totalPrice0 = Utils.getBestFormat(this.boarddata.totalVolume[0], 2)

							this.totalCount0 = Utils.getBestFormat(this.boarddata.totalCount[0], 2)
						} else {
							this.floorPrice0 = this.boarddata.floorPrice

							this.highestPrice0 = this.boarddata.highestPrice

							this.averagePrice0 = this.boarddata.avgPrice

							this.totalPrice0 = Utils.getBestFormat(this.boarddata.totalVolume, 2)

							this.totalCount0 = Utils.getBestFormat(this.boarddata.totalCount, 2)
						}
					}
				})
			},
			// 背包----星球 ---star
			changeorderSort(_type) {
				this.seccurrentPage = 1
				this.planetsorttype = _type
				if (this.planetsortval == '') {
					this.planetsortval = 'desc'
				} else {
					this.planetsortval = (this.planetsortval == 'asc') ? 'desc' : 'asc'
				}
				if (_type == 'start') {
					this.planettimeorder = this.planetsortval
					this.levelorder = ''
					this.planetpriceorder = ''
				} else if (_type == 'price') {
					this.planetpriceorder = this.planetsortval
					this.levelorder = ''
					this.planettimeorder = ''
				} else if (_type == 'level') {
					this.levelorder = this.planetsortval
					this.planetpriceorder = ''
					this.planettimeorder = ''
				}
				this.getMPlanetList()
			},
			// 背包----星球 ---end
			showtabs() {
				if (this.$route.params.activeName != null) {
					this.activeName = this.$route.params.activeName
					this.handleClick()
					this.showseconddetail = true
					this.planetdata = {token_id:this.$route.params.tid,star_nft_id:this.$route.params.id}
				}else{
					this.activeName = 'first'
					this.handleClick()
				}
			}
		},
		beforeDestroy() {
		},
		mounted() {
			let $this = this
			// this.showtabs();//跳转到指定tab
		}
	}
</script>
<style scoped>
	.market {
		padding: calc(28.14815px + 6.7037vw) 0 20px;
		box-sizing: border-box;
    background: url(../assets/images/pagebg.png) no-repeat center;
    background-size: cover;
	}

	.market_cont {
		padding: 0 calc(17.59259px + 2.31481vw);
		box-sizing: border-box;
	}

	.flexdiv {
		display: flex;
		align-items: center;
	}

.cat_title_div{padding: 0 12px;}
	.cat_title_div.flexdiv {
		width: 100%;
		justify-content: space-between;
		padding: 12px 0 7px;
	}

	.el-select {
		margin: 0 10px;
	}

	.top_select_part_hide {
		width: 100%;
		min-height: 40px;
		overflow: hidden;
		overflow-x: auto;
	}

	.top_select_part {
		position: relative;
		width: 100%;
		white-space: nowrap;
	}

	.top_select_part_left {
		width: 510px;
	}

	.top_select_part_left>div {
		float: left;
	}

	.right_div {
		margin-left: 20px;
	}

	.order_search {
		position: absolute;
		right: 0;
		top: 0;
	}

	.order_btn {
		display: inline-block;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 8px;
		color: #333;
		height: 40px;
		line-height: 40px;
		padding: 0 42px 0 12px;
		box-sizing: border-box;
		text-align: left;
		margin-right: 8px;
		color: #fff;
		cursor: pointer;
    position: relative;
	}

	.order_btn.clicked {
		border: 1px solid #219EBC;
	}

	.caret_span {
		display: inline-block;
		position: absolute;
		right: 10px;
		top: 6px;
		width: 6px;
		height: 24px;
	}

	.caret_span i {
		position: absolute;
		right: 0;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.2);
	}

	.caret_span i.active {
		color: #fff;
	}

	.caret_span i.el-icon-caret-top {
		top: 0px;
	}

	.caret_span i.el-icon-caret-bottom {
		bottom: 0px;
	}

	.cat_list_div {
		margin: 30px 0;
		min-height: 256px;
	}

	.cat_name {
		font-size: 16px;
		font-weight: 700;
		padding: 8px 0 0;
    text-align: left;
	}

	.cat_list_div ul li {
		float: left;
		width: 228px;
		height: 350px;
		font-size: 14px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		position: relative;
		box-sizing: content-box;
		color: #fff;
		font-weight: 100;
		margin: 0 10px 20px;
		cursor: pointer;
		border: 1px solid transparent;
	}

	.cat_list_div ul li:hover {
		border: 1px solid #EABA99;
	}

	.cat_list_div ul li .id_label {
		display: inline-block;
		font-size: 12px;
		background: #EABA99;
		min-width: 63px;
		border-radius: 0px 100px 100px 0px;
		padding: 3px 6px;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 12px;
	}

	.countdown {
		color: #fff;
		font-size: 12px;
		position: absolute;
		right: 15px;
		top: 14px;
		line-height: 14px;
	}

	.el-icon-time {
		font-size: 14px;
		margin-right: 6px;
	}

	.cat_data_div {
		padding: 0;
    margin-top: 40px;
	}

	.cat_img_div {
		width: 100%;
		height: 230px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cat_data_div img:not(.coin) {
		display: block;
		margin: 0 auto;
		width: auto;
		height: 100%;
		max-height: 228px;
		border-radius: 8px;
	}

	.cat_img_b {
		padding: 4px 12px 0;
		font-weight: 100;
		display: flex;
		align-items: center;
	}

	.cat_img_b .marginL {
		margin-left: 8px;
	}

	/* 暂无 */
	.zw_comingsoon {
		padding: calc(20px + 3.5vw) 0;
	}

	.comesoon {
		width: 90%;
		margin: 0 auto 50px;
		max-width: 320px;
	}

	.zw_comingsoon .ct {
		text-align: center;
	}

	.zw_comingsoon .w1,
	.zw_comingsoon .w2 {
		font-style: italic;
		padding: 12px 0;
		font-size: 14px;
	}

	.zw_comingsoon .w1 {
		font-size: 18px;
	}

	.zw_comingsoon .w2 {
		display: inline-block;
	}

	.kitty_div {
		padding: 30px 60px 0;
	}

	/* 1122 */

	.sell_bg_div {
		background: url(../assets/images/sell/sell-bg.png) no-repeat center;
		padding: 20px 0;
		background-size: cover;
		margin: 40px 0;
		overflow-x: auto;
	}

	.sell_bg_div_cont {
		display: flex;
		max-width: 1320px;
		margin: 0 auto;
	}

	.sell_title {
		text-align: center;
		color: #fff;
		font-size: 14px;
		margin: 0 auto 15px;
	}

	.data_box {
		background: rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		border: 1px solid #FFFFFF;
		width: calc(20% - 30px);
		margin: 0 15px;
		padding: 15px 0 20px;
	}

	.data_part {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.data_part>div {
		border-right: 1px solid rgba(255, 255, 255, 0.6);
		width: calc(50% - 1px);
		text-align: center;
		padding: 2px 0;
	}

	.data_part>div.noborder {
		border: none;
	}

	.num_p {
		line-height: 1em;
		margin-bottom: 10px;
	}

	.num_p.planet_num_p {
		margin-bottom: 0;
	}

	.num_p.flex_p {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.num_p.flex_p .icon_img {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}


	.cats_list.main_border {
		width: 90%;
		margin: 20px auto;
	}

	@media screen and (max-width:1280px) {
		.data_box {
			margin: 0 10px;
			width: calc(20% - 20px);
		}
	}

	@media screen and (max-width:1180px) {
		.sell_bg_div_cont {
			min-width: 1120px;
			overflow-x: auto;
		}

		.kitty_div {
			padding: 10px 20px 0;
		}

		.data_box {
			margin: 0 5px;
			width: calc(20% - 10px);
		}
	}

	@media screen and (max-width:950px) {
		.right_div {
			margin-left: 0;
			margin-top: 18px;
		}

		.top_select_part {
			min-width: 400px;
		}

		.planets_select_part .top_select_part {
			min-width: 300px;
		}

		.top_select_part_left {
			width: 240px;
		}
	}

	@media screen and (max-width:750px) {
		.market {
			padding: calc(28.14815px + 7.7037vw) 0 0;
		}

		.market_cont {
			padding: 0;
		}

		.sell_bg_div {
			margin: 10px 0 0;
		}

		.market .main_border {
			border: 0;
			background-image: none;
		}

		.top_select_part {
			padding-left: 20px;
		}

		.kitty_div {
			padding: 10px 0 0;
		}

		.cat_list_div ul {
			width: 502px;
			margin: 0 auto;
		}
    .order_search{left: 20px;right: auto;}
	}

	@media screen and (max-width:502px) {
		.cat_list_div ul {
			width: auto;
		}

		.cat_list_div ul li {
			margin: 0 auto 20px;
			float: none;
		}

		.cat_img_b .marginL {
			display: inline-block;
			margin: 0 0 0 8px;
		}
	}
</style>