<import name="x-book" src="../../components/book/book.ux"></import>

<template>
	<div class="leaderboard-wrap">
		<div class="type-bar">
			<block for="type in typeList">
				<div class="type-item" @click="typeChange(type.index)">
					<text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
					<text class="choose-bar" show="{{type.index === current}}"></text>
				</div>
			</block>
		</div>
		<list>
			<block for="book in list">
				<list-item type="multi" class="book-list__wrap book-list__wrap--multi">
					<div class="book-list__multi">

						<div class="book-item">
							<div style="width:60px;margin-right:15px">
								<image if="$idx<3" src="{{img[$idx]}}" class="book-index"></image>
								<div else class="book-index_follow">
									<text>{{$idx+1}}</text>
								</div>
							</div>
							<x-book multi="{{true}}" width="{{150}}" book="{{book}}">
								<div class="book-info__multi">
									<text class="name">{{book.book_name}}</text>
									<text class="intro">{{book.book_summary}}</text>
								</div>
							</x-book>
						</div>

					</div>
				</list-item>
			</block>
		</list>
	</div>
</template>

<script>
import { getRank } from "../../api";

export default {
	data() {
		return {
			typeList: [
				{
					name: "女生",
					index: 0
				},
				{
					name: "男生",
					index: 1
				},
			],
			list: [],
			current: 0,
			img: ['../../assets/imgs/rank_1.png', '../../assets/imgs/rank_2.png', '../../assets/imgs/rank_3.png']
		}
	},
	async onInit() {
		await this.getCityListByTabChange();
		this.$watch('current', 'getCityListByTabChange')
	},
	onShow() { },
	typeChange(index) {
		this.current = index;
	},
	async getCityListByTabChange(index = 0) {
		let sex = index ? "1" : "2";
		let ret = await getRank(sex);
		this.list = ret;
		console.log(this.list)
	}
}
</script>

<style lang="less">
@import "../../assets/less/leaderboard.less";
</style>
