<template>
  <u-popup
    :show="show"
    round="20"
    @open="open"
    @close="show=false"
  >
    <view class="content px-30">
      <view
        class="flex-row mb-40"
        style="justify-content: space-between; "
      >
        <view style="flex-direction:row;align-items: center;">
          <text class="title">
            {{ watchInfo.title }}
          </text>
          <text class="num ml-40">
            全{{ listThen }}集
          </text>
        </view>
        <image
          src="@/static/icon/arrowBottom.png"
          mode="aspectFill"
          style="width:44rpx;height: 44rpx;"
          @click="close"
        />
      </view>

      <u-tabs
        :list="list"
        line-width="0"
        line-height="0"
        :current="tabIndex"
        :inactive-style="{
          width: '150rpx',
          height: '64rpx',
          'border-radius': '32rpx',
          background: '#f8f8f8',
          'text-align': 'center',
          'line-height': '64rpx',
          color: '#666666',
          padding: 0,
          marginRight: '20rpx'
        }"
        :active-style="{
          width: '150rpx',
          height: '64rpx',
          'border-radius': '32rpx',
          background: '#FFE5EB',
          'text-align': 'center',
          'line-height': '64rpx',
          color: '#FF779E',
          padding: 0,
          marginRight: '20rpx'
        }"
        :item-style="{
          padding: 0
        }"
        @click="tabClick"
      />

      <view class="sidContent flex-1">
        <swiper
          class="flex-1"
          :current="tabIndex"
          style="height: 900rpx;"
          @change="swiperChange"
        >
          <swiper-item
            v-for="(each, index) in anthologyList"
            :key="index"
            class="flex-1"
          >
            <scroll-view
              scroll-y="true"
              style="height: 900rpx;"
              class="mt-30"
			  
              :scroll-into-view="toview"
              :scroll-with-animation="true"
            >
              <view
                class="flex-row"
                style="flex-wrap: wrap;padding-bottom: 60rpx;"
              >
                <view
                  v-for="(item, i) in each"
                  :id="`video-${index}-${i}`"
                  :key="i"
                  class="sidContent-item"
                  :style="
                    (i + 1) % 3 != 0
                      ? 'margin-right: 30rpx;'
                      : ''
                  "
                  :class="
                    item.id == current.id ? 'check' : ''
                  "
                  @click="seeSidContent(item.id)"
                >
                  <image
                    style="width: 210rpx;height: 288rpx;"
                    :src="watchInfo.cover"
                    mode="aspectFill"
                  />
                  <view
                    v-if="
                      item.isvip == 1 ||
                        item.id == current.id
                    "
                    class="flex-center"
                    style="width: 210rpx;height: 288rpx;position: absolute;top: 0;left:0;background-color: rgba(26, 26, 26, 0.4);"
                  >
                    <u-icon
                      v-if="item.isvip == 1"
                      name="/static/images/videoLock.png"
                      size="64rpx"
                    />
                    <u-icon
                      v-else-if="item.id == current.id"
                      name="/static/images/playIcon.gif"
                      size="100rpx"
                    />
                  </view>
                  <view class="jishu flex-center">
                    <text class="jishu-text">
                      第{{ item.order }}集
                    </text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </u-popup>
</template>
<script>
	import {episode} from '@/config/index.js';
export default {
	data() {
		return {
			show: false,
			tabIndex: 0,
			list: [
			
			],
			anthologyList: [[], [], [], []],
			reject: null,
			resolve: null,
			current: {},
			timer: null,
			dataList: [],
			watchInfo: {},
			listThen: 0,
			toview: ''
		};
	},
	methods: {
		tabClick(e) {
			if (this.tabIndex !== e.index) {
				this.tabIndex = e.index;
			}
		},
		swiperChange(e) {
			const index = e.detail.current;
			if (this.tabIndex !== index) {
				this.tabIndex = index;
			}
		},
		open(list, index, watchInfo) {
			return new Promise((resolve, reject) => {
				const data = list || [];
				if (data.length) {
					this.listThen = data.length;
					this.current = data[index];
					this.watchInfo = watchInfo;
					this.list = [];
					let arr = [];
					for (var i = 0; i < data.length; i += episode) {
						arr.push(data.slice(i, i + episode));
					}
					arr.forEach((r, i) => {
						if (i === 0) {
							this.list.push({
								name: `01-${(i + 1) * episode}`
							});
						}
						if (i > 0) {
							this.list.push({
								name: `${i * episode + 1}-${(i + 1) * episode}`
							});
						}
						if (arr.length === i + 1) {
							this.list[i].name = `${i === 0 ? '1' : i * episode + 1}-${
								data.length
							}`;
						}
					});
					this.show = true;
					arr.forEach((item, index) => {
						item.forEach((each, i) => {
							if (each.id === this.current.id) {
								this.tabIndex = index;
								this.toview = `video-${index}-${i}`;
								
							}
						});
					});
					this.anthologyList = arr || [[]];
					this.reject = reject;
					this.resolve = resolve;
				}
			});
		},
		close() {
			this.reject();
			this.show = false;
			// console.log('close');
		},
		seeSidContent(id) {
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.resolve(id);
				this.show = false;
			});
		}
	}
};
</script>
<style lang="scss">
.content {
	width: 750rpx;
	height: 1100rpx;
	background: linear-gradient(180deg, #ffe2e2 0%, #ffffff 11%);
	border-radius: 40rpx 40rpx 0px 0px;
	box-shadow: 0px -11px 17px 0px rgba(0, 0, 0, 0.2);
	padding-top: 56rpx;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #222222;
	}
	.num {
		font-size: 26rpx;
		font-weight: 400;
		color: #222222;
	}
	.select {
		margin-top: 60rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.sidContent {
		flex-direction: row;
		flex-wrap: wrap;

		.sidContent-item {
			width: 210rpx;
			height: 288rpx;
			background: #eeeeee;
			border-radius: 16rpx;
			color: #1a1a1a;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-bottom: 32rpx;
			overflow: hidden;
			position: relative;
		}

		.check {
			background: #ff779e !important;
			color: #ffffff;
		}
	}
}
.jishu {
	position: absolute;
	bottom: 0;
	width: 210rpx;
	height: 54rpx;
	background-color: rgba(26, 26, 26, 0.7);
	.jishu-text {
		color: #ffffff;
		font-size: 14px;
	}
}
</style>
