<template>
	<view class="live-list-group">
		<view @tap="navToInfo(it)" :key="i" v-for="(it,i) in myList" class="live-item-body">
			<image mode="aspectFill" class="live-item-background" :src="it.cover"></image>
			<view class="live-item">
				<view class="live-status-group">
					<view class="live-status" :style="{backgroundImage:`url(${stateIcon})`}">
						<image :src="haveIcon"></image>
						<text>{{showStateText(it)}}</text>
					</view>
					<text class="live-id">ID:{{it.users.number}}</text>
				</view>

				<view class="live-watch-number">
					<image :src="peopleNumberIcon"></image>
					<text>{{it.statistics.numberVisitors}}人观看</text>
				</view>

				<view class="live-item-bottom">
					<view class="live-user-group" :style="{justifyContent:it.liveState === 'END'?'space-between':'left'}">
						<view class="live-user">
							<image :src="it.users.userInfo.headPortrait"></image>
							<text>{{it.users.userInfo.name}}</text>
							<text class="pre" v-if="it.liveState === 'PREPARE'">预告</text>
						</view>
						<view>
							<text class="pre" v-if="it.liveState === 'END'"><text class="pre-weight">·</text>回放</text>
						</view>
					</view>

					<text class="live-item-note text-overflow-nowrap">
						{{it.name}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		LiveState,
		navToInfoLive,
		staticUrl
	} from '../js/request'
	const haveIcon = staticUrl('/icon/live-have.png')
	const peopleNumberIcon = staticUrl('/icon/live-people-number.png')
	const stateIcon = staticUrl('/icon/live-have-b.png')

	export default {
		props: ['list'],
		created() {},
		data() {
			return {
				myList: this.parse(),
				stateIcon,
				haveIcon,
				peopleNumberIcon,
				...{
					LiveState
				}
			}
		},
		watch: {
			list(val) {
				console.log(val)
				this.myList = this.parse(val)
			}
		},
		methods: {
			async navToInfo(item) {
				await navToInfoLive(item)
			},
			showStateText(it) {
				const state = it.liveState
				let text = LiveState[state].text
				switch (state) {
					case 'PREPARE':
						text = this.$dateFormat(it.startDateEstimate, 'MM/DD HH:mm') + '开播'
						break;
					case 'END':
						text = '时长2.5小时'
						break;
				}
				return text
			},
			parse(list = this.list || []) {
				return this.list.map(it => {
					return it.broadcastRecord || it
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../static/scss/lives.scss';
</style>
