<template>
	<c-tabbar :current="1">
		<view>
			<view class="p-30">
				<view class="type-change">
					<view class="item flex flex-col justify-center items-center" :class="{active: type == 1}"
						@click="changeType(1)">
						<text class="t1">短剧列表</text>
						<text class="t2">多平台 多剧场变现</text>
					</view>
					<view class="item flex flex-col justify-center items-center" :class="{active: type == 2}"
						@click="changeType(2)">
						<text class="t1">我的推广</text>
						<text class="t2">推广链接再次使用</text>
					</view>
				</view>

				<view style="padding-top: 50upx;">
					<u-search v-model="keyword" :show-action="false" borderColor="#fff"
						bgColor="#fff" placeholder="请输入剧名" @search="search"></u-search>
				</view>
			</view>
			<view>
				<u-tabs style="padding: 20upx 0;" :list="tabs" lineWidth="30" lineColor="#007aff" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab">
				</u-tabs>
				<view class="search-box">
					<sl-filter style="border-radius: 30upx 30upx 0 0;" :ref="'slFilter'" :topFixed="false"
						:isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
						:menuList="menuList" @result="result"></sl-filter>
				</view>
				
				<view>
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<view class="search-result">
							<view class="search-item" v-for="item in list" :key="item.id">
								<view class="img-wrap" @click.stop="navigateTo('/pages/shortPlay/info/info')">
									<text class="label">{{sourceType[item.sourceType]}}</text>
									<view class="type flex flex-row items-center justify-center"><u-icon name="attach" color="#ffffffd9"></u-icon>{{item.itemTypeName}}</view>
									<image :src="item.coverPic" mode="widthFix"></image>
								</view>
								<view class="content-wrap">
									<view class="name ellipsis">{{item.videoName}}</view>
									<view class="desc">{{item.completeNot ? '未完结' : '已完结'}} 共{{item.numberEpisode}}集</view>
								</view>
							</view>
							<!-- <view class="search-item">
								<view class="img-wrap">
									<text class="label">快手</text>
									<view class="type flex flex-row items-center justify-center"><u-icon name="attach" color="#ffffffd9"></u-icon>红火剧场</view>
									<image src="https://resali.ssread.cn/cppartner/4x1/41x0/410x0/41000102244/41000102244.jpg?t=1708324420602" mode="widthFix"></image>
								</view>
								<view class="content-wrap">
									<view class="name ellipsis">下山后我被美女包围了</view>
									<view class="desc">已完结 共17集</view>
								</view>
							</view> -->
						</view>
					</mescroll-body>
					
				</view>
			</view>
		</view>
	</c-tabbar>
</template>

<script>
	import CTabbar from '@/components/gTabbar.vue'
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getItemList, getTypeList }  from '@/api/index.js'
	import { currentDate } from '@/utils/common.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			CTabbar,
			slFilter
		},
		data() {
			return {
				type: 1,
				keyword: '',
				tabs: [{
					name: '全部'
				}, {
					name: '抖音'
				}, {
					name: '快手'
				}, {
					name: '视频号'
				}],
				themeColor: '#007aff',
				titleColor: '#666666',
				filterResult: '',
				menuList: [{
						'title': '剧方筛选',
						'isMutiple': false,
						'key': 'playSource',
						'detailList': []
					},
					{
						'title': '上架时间',
						'key': 'date',
						'isSort': true,
						'reflexTitle': true,
						'detailList': [{
								'title': '默认时间',
								'value': ''
							},
							{
								'title': '7天',
								'value': '7'
							},
							{
								'title': '15天',
								'value': '15'
							},
							{
								'title': '30天',
								'value': '30'
							},
							{
								'title': '半年',
								'value': '180'
							}
						]
					}
				],
				list: [],
				sourceType: {
					'1': '抖音',
					'2': '快手',
					'3': '视频号'
				},
				filter: {
					sourceType: '',
					itemType: '',
					createBeginTime: '',
					createEndTime: ''
				}
			}
		},
		created() {
			this.getPlayType()
			console.log(currentDate(), currentDate(false, -7));
		},
		methods: {
			async getPlayType() {
				const res = await getTypeList({})
				const getData = res.data.map(i => {
					return {
						title: i.name,
						value: i.id
					}
				})
				this.menuList[0].detailList = [
					{
						'title': '全部剧方',
						'value': ''
					},
					...getData
				]
			},
			changeType(type) {
				this.type = type
			},
			result(val) {
				this.filter.itemType = val.playSource
				if(val.date) {
					this.filter.createBeginTime = currentDate(false, -parseInt(val.date)) + ' 00:00:00'
					this.filter.createEndTime = currentDate() + ' 00:00:00'
				} else {
					this.filter.createBeginTime = '';
					this.filter.createEndTime = '';
				}
				this.search()
			},
			changeTab(e){
				this.filter.sourceType = e.index ? e.index : ''
				this.search()
			},
			search(){
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async getList(pageNum) {
				const res = await getItemList(pageNum, 10, {
					...this.filter,
					videoName: this.keyword
				})
				if(res.success) {
					this.mescroll.endBySize(res.data.list.length, parseInt(res.data.total));
					if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data.list);
				} else {
					this.mescroll.endErr();
				}
			},
			upCallback(page) {
				this.getList(page.num)
			},
		}
	}
</script>

<style lang="scss">
	.type-change {
		display: flex;
		flex-direction: row;

		.item {
			width: 335upx;
			padding: 40upx;
			border-radius: 20upx;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				bottom: -40upx;
				left: 50%;
				margin-left: -15upx;
				border-top: 30upx solid transparent;
				border-left: 30upx solid transparent;
				border-right: 30upx solid transparent;
				border-bottom: 30upx solid transparent;
			}

			&:first-child {
				background-color: #eceefb;
				color: #071e7a;

				&.active {
					background-color: $uni-theme;
					color: #fff;

					&::before {
						border-top: 30upx solid $uni-theme;
					}
				}
			}

			&:last-child {
				background-color: #fee8e8;
				color: #b5615e;
				margin-left: 20upx;

				&.active {
					background-color: #fe6767;
					color: #fff;

					&::before {
						border-top: 30upx solid #fe6767;
					}
				}
			}

			.t1 {
				font-size: 40upx;
			}

			.t2 {
				font-size: 25upx;
			}
		}
	}

	.search-box {
		background-image: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 100%);
		border-radius: 30upx 30upx 0 0;
		height: 100upx;
	}
	
	.search-result {
		padding: 0 30upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.search-item {
			width: 216.66upx;
			margin-right: 20upx;
			background-color: #fff;
			border-radius: 15upx;
			overflow: hidden;
			margin-bottom: 20upx;
			&:nth-child(3n) {
				margin-right: 0;
			}
			.img-wrap {
				width: 100%;
				position: relative;
				image {
					width: 100%;
				}
				.label{
				    border-radius: 15upx 0 15upx 0;
				    background: $uni-theme;
				    color: #fff;
				    padding: 10upx 15upx;
				    text-align: center;
				    position: absolute;
				    top: 0;
				    left: 0;
					z-index: 1;
					font-size: 25upx;
				}
				.type {
					border-radius: 5upx;
					background: rgba(0,0,0,.55);
					color: rgba(255,255,255,.85);
					padding: 8upx 10upx;
					position: absolute;
					bottom: 20upx;
					left: 10upx;
					z-index: 1;
					font-size: 22upx;
				}
			}
			.content-wrap {
				padding: 10upx 15upx;
				padding-bottom: 20upx;
				.name {
					color: #323333;
					font-size: 28upx;
				}
				.desc {
					color: #999;
					font-size: 25upx;
				}
			}
			
			
		}
	}
</style>