<template>
	<scroll-view
		style="height: 100%"
		scroll-y
		refresher-enabled="true"
		refresher-background="none"
		:refresher-threshold="100"
		:refresher-triggered="refreshTriggered"
		@refresherrefresh="refresh"
		@scrolltolower="getData"
	>
		<view class="condition-box" @touchmove.stop>
			<template v-for="(item, index) in condition" v-show="list.length">
				<u-tabs
					:line-width="0"
					:line-height="0"
					:item-style="{ height: '35px', padding: '0 5px' }"
					:inactive-style="{ padding: '2px 10px', fontSize: '14px', color: '#AAABAF' }"
					:active-style="{ padding: '2px 10px', fontSize: '13px', fontWeight: 500, color: '#DA2538', background: '#FEEEEF', borderRadius: '4px' }"
					:list="item.data"
					:current="item.current"
					class="tabs"
					@click="tabsClick(index, $event)"
				>
					<view slot="right" v-if="item.data && item.data.length > 6" style="padding: 0 10px" @click="openAll(index, item)">
						<u-icon name="list-dot" size="24" color="#fff"></u-icon>
					</view>
				</u-tabs>
			</template>
		</view>
		<view class="vod-container">
			<view v-for="(vod, vodIndex) in list" :key="vodIndex">
				<vod-item :item="vod" />
				<adv-item v-if="(vodIndex + 1) % 8 === 0 && banner_adv.length" :adv="banner_adv[Math.floor(Math.random() * banner_adv.length)]" />
			</view>
		</view>
		<sortListAll ref="popup" :item="item" :itemIndex="itemIndex" @tabClick="tabsClick"></sortListAll>
		<view class="load-more">
			<u-loadmore :status="loadStatus" loading-icon="semicircle" :line="true" />
		</view>
	</scroll-view>
</template>

<script>
import vodItem from '@/components/vod-item-row.vue';
import advItem from '@/components/adv-item.vue';
import sortListAll from '@/components/sortListAll.vue';
import { app } from '@/utils/api';

export default {
	components: {
		vodItem,
		advItem,
		sortListAll
	},
	data() {
		return {
			condition: {
				type: {
					current: 0,
					data: [{ id: '', name: '全部' }]
				},
				type_child: {
					current: 0,
					data: []
				},
				// area: {
				//   current: 0,
				//   data: [{id: '', name: '全部'}]
				// },
				// year: {
				//   current: 0,
				//   data: [{id: '', name: '全部'}]
				// },
				class: {
					current: 0,
					data: []
				},
				// lang: {
				//   current: 0,
				//   data: [{id: '', name: '全部'}]
				// },
				sort: {
					current: 0,
					data: [{ id: '', name: '默认' }]
				}
			},
			list: [],
			page: 1,
			loaded: false,
			refreshTriggered: false,
			loadStatus: 'loadmore',
			banner_adv: [],
			interval_adv: [],
			item: {},
			itemIndex: ''
		};
	},
	methods: {
		openAll(index, item) {
			this.itemIndex = index;
			this.item = item;
			this.$refs.popup.open();
		},
		init() {
			if (this.loaded === false) {
				this.getVodClass();
			} else {
				const type_current = this.condition.type.data.findIndex((item) => {
					if (item.id == getApp().globalData.switchChannel.type_pid) return true;
				});
				let type_child_current = 0;
				if (this.condition.type.current != type_current) {
					this.condition.type_child.data = this.condition.type.data[type_current].child;
				}
				if (this.condition.type_child.data) {
					type_child_current = this.condition.type_child.data.findIndex((item) => {
						if (item.id == getApp().globalData.switchChannel.type) return true;
					});
				}
				if (this.condition.type.current != type_current || this.condition.type_child.current != type_child_current) {
					this.condition.type.current = type_current;
					this.condition.type_child.current = type_child_current;
					// this.condition.area.current = 0
					// this.condition.year.current = 0
					// this.condition.class.current = 0
					// this.condition.lang.current = 0
					this.condition.sort.current = 0;
					this.loadStatus = 'loadmore';
					this.list = [];
					this.page = 1;
					this.getData();
				}
			}
		},
		tabsClick(key, data) {
			if (this.condition[key].current != data.index) {
				if (key == 'type') {
					this.condition.type_child.data = this.condition.type.data[data.index]['child'];
					this.condition.class.data = this.condition.type?.data?.[data.index]?.['class']?.length ? this.condition.type.data[data.index]['class'] : [];
					this.condition.type_child.current = 0;
					this.condition.class.current = 0;
					getApp().globalData.switchChannel.type_pid = data.id;
					getApp().globalData.switchChannel.type = 0;
				}
				if (key == 'type_child') {
					getApp().globalData.switchChannel.type = data.id;
				}
				this.condition[key].current = data.index;
				this.loadStatus = 'loadmore';
				this.list = [];
				this.page = 1;

				this.getData();
			}
		},
		//   async getVodClass() {
		//     await app.vodClass().then(res => {
		//   console.log(res);
		//       const resData = res.data
		//       this.condition.type.data = resData.type || []

		//       // this.condition.area.data = resData.area|| []
		//       // this.condition.year.data = resData.year|| []
		//       // this.condition.class.data = resData.class|| []
		//       // this.condition.lang.data = resData.lang|| []
		//       this.condition.sort.data = resData.sort|| []
		//       this.$nextTick(() => {
		//         this.condition.type.current = this.condition.type.data.findIndex(item => {
		//           if (item.id == getApp().globalData.switchChannel.type_pid) return true
		//         })
		//         this.condition.type_child.data = this.condition.type.data[this.condition.type.current].child
		//         if (this.condition.type_child.data) {
		//           this.condition.type_child.current = this.condition.type_child.data.findIndex(item => {
		//             if (item.id == getApp().globalData.switchChannel.type) return true
		//           })
		//         } else {
		//           this.condition.type_child.current = 0
		//         }
		//         this.getData()
		//       })
		//       this.loaded = true
		//     }).catch(e => {})
		//     this.refreshTriggered = false
		//   },
		async getVodClass() {
			await app.vodClass().then((res) => {
				const resData = res.data;
				if (resData) {
					this.condition.type.data = resData.type || [];

					// this.condition.area.data = resData.area|| []
					// this.condition.year.data = resData.year|| []
					// this.condition.class.data = resData.class|| []
					// this.condition.lang.data = resData.lang|| []
					this.condition.sort.data = resData.sort || [];
					this.$nextTick(() => {
						this.condition.type.current = this.condition.type.data.findIndex((item) => {
							if (item.id == getApp().globalData.switchChannel.type_pid) return true;
						});
						this.condition.type_child.data = this.condition.type.data[this.condition.type.current].child;
						if (this.condition.type_child.data) {
							this.condition.type_child.current = this.condition.type_child.data.findIndex((item) => {
								if (item.id == getApp().globalData.switchChannel.type) return true;
							});
						} else {
							this.condition.type_child.current = 0;
						}
						this.condition.class.data = this.condition.type?.data?.[this.condition.type.current]?.['class']?.length
							? this.condition.type.data[this.condition.type.current]['class']
							: [];
						this.getData();
					});
					this.loaded = true;
				} else {
					uni.reLaunch({
						url: '/pages/splash/splash'
					});
				}
			});
		},
		async getData() {
			if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
				return;
			}
			this.loadStatus = 'loading';
			const type_pid = this.condition.type.data[this.condition.type.current].id;
			const type = type_pid > 0 && this.condition.type_child.data.length > 0 ? this.condition.type_child.data[this.condition.type_child.current].id : 0;
			const vodclass = this.condition.class.data.length ? this.condition.class.data[this.condition.class.current].id : 0;
			// const area = this.condition.area.data[this.condition.area.current].id
			// const year = this.condition.year.data[this.condition.year.current].id
			// const vodclass = this.condition.class.data[this.condition.class.current].id
			// const lang = this.condition.lang.data[this.condition.lang.current].id
			const sort = this.condition.sort.data[this.condition.sort.current].id;

			await app
				.vodList(type, type_pid, sort, vodclass, this.page)
				.then((res) => {
					const resData = res.data;
					this.banner_adv = resData.adv_list.banner_adv;
					this.interval_adv = resData.adv_list.interval_adv;
					if (resData.page < resData.page_total) {
						this.loadStatus = 'loadmore';
						this.page++;
					} else {
						this.loadStatus = 'nomore';
					}
					if (this.interval_adv.length) {
						resData.list.forEach((item, index) => {
							// 判断是否是每8个数据项的后面
							if ((index + 1) % 8 === 0) {
								resData.list.push(this.interval_adv[Math.floor(Math.random() * this.interval_adv.length)]);
							}
						});
					}
					this.list = this.list.concat(resData.list);
					this.loaded = true;
				})
				.catch((e) => {
					this.loadStatus = 'loadmore';
				});

			this.refreshTriggered = false;
		},
		refresh() {
			this.refreshTriggered = true;
			this.loadStatus = 'loadmore';
			this.page = 1;
			this.list = [];
			this.getVodClass();
		}
	}
};
</script>

<style lang="scss">
.condition-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tabs {
		width: 100%;
	}
}
</style>
