<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: 1
			},
			{
				name: "女生",
				index: 0
			},

			],
			list: [],
			current: 0,
			img: ['../../assets/imgs/rank_1.png', '../../assets/imgs/rank_2.png', '../../assets/imgs/rank_3.png']
		}
	},
	async onInit(option) {
    let sex = option.sex == 1 ? 0:1;
		this.current = sex;
		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>
