<template>
	<view class="pageBgImg">
		<topNavbar title="教练详情"></topNavbar>
		<view class="pad">
			<view class="infoBox">
				<info :showSign="true" :item="info"></info>
			</view>
			<comments :list="list" @changeNav="changeNav"></comments>
			<view style="padding-bottom: 20rpx;" v-if="list.length>4">
				<u-loadmore :status="status" />
			</view>
			<nodata v-if="!list.length&&status=='nomore'"></nodata>
		</view>
		
	</view>
</template>

<script>
	import comments from './comp/comments.vue'
	import info from './comp/info.vue'
	import { coachDetail, coachCommentPage } from '@/config/api.js'
	export default {
		components: { comments, info},
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 20,
					coachId: '',
					coachType: 1,
					condition: 0
				},
				total: 20,
				list: [],
				coachList: [],
				status: 'loading',
				info: {}
			}
		},
		onLoad(options) {
			this.params.coachId = options.id
			this.coachDetailFn()
			this.coachCommentPageFn()
		},
		methods: {
			// 获取教练详情
			async coachDetailFn() {
				const {data: res} = await coachDetail({id: this.params.coachId})
				this.info = res
			},
			changeNav(val) {
				this.params.condition = val
				this.initList()
			},
			initList() {
				this.params.pageNo = 1
				this.status = 'loading'
				this.list = []
				this.coachCommentPageFn()
			},
			async coachCommentPageFn() {
				const {data: res} = await coachCommentPage(this.params)
				this.params.pageNo ++
				this.total = res.total
				let arr = res.list.map(item=>{
					if(item.images) {
						item.images = item.images.split(',')
					}
					return item
				})
				this.list.push(...arr)
				if(this.list.length>=this.list.length) this.status = 'nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>