<template>
  <GList
    class="flex-1"
    style=" background: #F1F2F4;;"
    :scroll-top="scrollTop"
  >
    <view>
      <view class="banner px-20 flex-center">
        <image
          class="flex-1"
          style="width: 730rpx;"
          src="@/static/images/signIn.png"
          mode="aspectFit"
          @click="signIn"
        />
      </view>
      <view class="myPursue mb-40">
        <view class="header mb-28">
          <text class="header-text">
            我的追剧
          </text>
          <view
            v-if="dataList.bookcase.length || isEdit" 
            class="flex-row flex-center"
            @click="editPursue"
          >
            <u-icon
              size="36rpx"
              name="/static/icon/pursue-edit.png"
            />
            <text class="header-edit">
              {{ isEdit ? '完成' : '编辑' }}
            </text>
          </view>
        </view>
        <view
          v-if="dataList.bookcase.length !== 0"
          class="flex-row GpursueData"
        >
          <GpursueItem
            v-for="(item, index) in dataList.bookcase"
            :key="index"
            :is-edit="isEdit"
            :data="item"
            :class="(index + 1) % 3 === 0 ? 'mb-28' : 'mb-28 mr-20'"
            @del="delItem"
          />
        </view>
        <GNoData
          v-else
          text="去追剧~"
        />
      </view>
      <view class="myPursue mb-60">
        <view class="header mb-28">
          <text class="header-text">
            精选推荐
          </text>
        </view>
        <view class="flex-row GpursueData">
          <GpursueItem
            v-for="(item, index) in dataList.likelist"
            :key="index"
            :class="(index + 1) % 3 === 0 ? 'mb-28' : 'mb-28 mr-20'"
            :data="item"
          />
        </view>
      </view>
    </view>

    <!-- #ifndef H5 -->
    <u-gap height="160" />
    <!-- #endif -->
  </GList>
</template>

<script>
import { chasingdrama, signin, chasingdramadel } from '@/api/index.js';
export default {
	props: {
		tabIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			dataList: {
				likelist: [],
				bookcase: []
			},
			isEdit: false,
			editList: [],
			scrollTop:0
		};
	},
	watch: {
		tabIndex() {
			this.isEdit = false;
			this.editList = [];
			if(this.tabIndex === 0){
				this.getList();
			}
		}
	},
	
	methods: {
		signIn() {
			signin().then(res => {
				this.$emit('signIn', res);
			});
		},
		getList() {
			chasingdrama().then(res => {
				this.dataList = res || { bookcase: [], likelist: [] };
			});
		},
		editPursue() {
			if (this.isEdit && this.editList.length !==0) {
				const data = this.editList.join(',');
				chasingdramadel({ ids: data }).then((ss) => {
					this.editList = [];
					
				});
			}
			this.isEdit = !this.isEdit;
		},
		delItem(e) {
			if (this.isEdit) {
				this.editList.push(e.articleid);
				const index = this.dataList.bookcase.findIndex(
					r => r.id === e.id
				);
				this.dataList.bookcase.splice(index, 1);
			}
		}
	}
};
</script>

<style lang="scss">
.banner {
	height: 190rpx;
	width: 750rpx;
}
.myPursue {
	padding: 40rpx 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
	margin: 0 20rpx;
	.header {
		flex-direction: row;
		justify-content: space-between;
		.header-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #1a1a1a;
		}
		.header-edit {
			font-size: 30rpx;
			font-weight: 500;
			color: #1a1a1a;
			margin-left: 6rpx;
		}
	}
	.GpursueData {
		flex-wrap: wrap;
	}
}
</style>
