<template>
	<view class="mall-my-collect-page">
		<view class="page-content padding-bottom-safe-footer-20">
			<view class="">
				<!--  -->
				<view class="" v-if="isLoadMyCollectFinish && myCollectList.length">
					<view class="jc-header bg-ff">
						<view class="line-height-header padding-lr-30 flex align-center">
							<view class="flex-one">
								<ty-bar-search :value.sync="keyword" @search="search"></ty-bar-search>
							</view>
							<view class="margin-left-25 text-30 text-4d" @click="isEdit = !isEdit">
								{{isEdit ? '完成' : '管理'}}
							</view>
						</view>
					</view>

					<view class="margin-top-title-header-20">
						<view
							class=" margin-tb-20 padding-tb-20 padding-left-30 padding-right-35 radius-20 bg-ff flex align-center"
							v-for="(item,index) in myCollectList" :key="index">
							<view style="width:60rpx;" @click="choose(index)" v-if="isEdit">
								<text
									:class="item.is_select == 0 ? 'tyIcon-quan text-34 text-cc' : 'tyIcon-xuanzhong1 text-40 text-2f9'"></text>
							</view>

							<view class="flex-one flex" @click="goDetail(item.product_id)">
								<image class="goodsImg" :src="item.cover_img" mode="aspectFill">
								</image>


								<view class="margin-left-20 flex-one">
									<view class="height-90 text-cut-two flex align-center">
										<!-- v-if="item.is_effective == 0" -->
										<!-- <view class="margin-right-10 inline-block">
											<ty-text-label text="失效" radius="5" bg-color="#FF8534"></ty-text-label>
										</view> -->
										<text class="text-30 line-45">{{item.name}}</text>
									</view>

									<view class="margin-top-90 text-cut-one">
										<text
											class="icon-icon-gongsi iconfont  text-24 text-ff85 margin-right-5"></text>
										<text class="text-24 text-77">{{item.company_name}}</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>


				<view v-if="isLoadMyCollectFinish && !myCollectList.length">
					<view class="margin-top-title-header-30">
						<ty-text-no-data text="您还没有收藏过消防材料" :image="'/static/home/empty3.png'"
							@btnClick="go('/pages/home/index',3)">
						</ty-text-no-data>
					</view>
				</view>
			</view>



			<!-- 底部条 -->
			<view class="jc-footer-safe " :class="isEdit ? 'bg-ff' : ''">
				<view class="line-height-footer  padding-lr-30 flex align-center justify-between" v-if="isEdit">
					<!-- 全选按钮 -->
					<view class="flex align-center">
						<view style="width:60rpx;">
							<text
								:class="isAllChoose ? 'tyIcon-xuanzhong1 text-40 text-2f9' : 'tyIcon-quan text-34 text-cc'"
								@click="chooseAll"></text>
						</view>
						<view class="text-28 text-4d">全选</view>

					</view>
					<view class="btn margin-left-40 bg-2f9 text-center text-30 text-ff" @click="collectCancel">
						取消收藏</view>
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否加载完成
				isLoadMyCollectFinish: false,
				// 是否编辑模式
				isEdit: false,
				// 是否全选
				isAllChoose: false,
				// 距离页面顶部距离
				scrollTop: 0,
				// 关键字
				keyword: '',
				// 我的收藏列表
				myCollectList: [],
				// 下拉刷新状态 true--正在下拉 false--没有在下拉
				isPullDownIng: false,
				// 列表状态
				load_status: '',


			}
		},
		onReady() {
			// 加载我的收藏商品
			this.loadMyCollectList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onPullDownRefresh() {
			// 下拉刷新状态为进行中
			this.isPullDownIng = true
			// 加载我的收藏商品
			this.loadMyCollectList()
		},

		methods: {
			search(e) {
				this.loadMyCollectList()
			},
			loadMyCollectList() {
				this.rq.getData('fire/api/Fire/getCollectProductList', {
					keyword: this.keyword
				}).then(res => {
					if (res.code == 0) {
						res.data.list.forEach((item,index)=>{
							item.is_select = 0
						})
						this.myCollectList = res.data.list
						this.isLoadMyCollectFinish = true
						// 正在下拉状态时，停止下拉刷新
						if (this.isPullDownIng) {
							uni.stopPullDownRefresh()
							this.isPullDownIng = false;
						}
					}
				})
			},
			choose(index) {
				this.myCollectList[index].is_select = this.myCollectList[index].is_select == 1 ? 0 : 1

				this.loadBottom()
			},
			goDetail(id){
				if(!this.isEdit){
					uni.navigateTo({
						url:'/pages/material/detail?id='+id
					})
				}
			},

			/**
			 * 全选商品
			 * @date 2022-12-01
			 */
			chooseAll() {
				this.isAllChoose = !this.isAllChoose
				let isAllChoose = this.isAllChoose ? 1 : 0
				this.myCollectList.forEach(value => {
					value.is_select = isAllChoose
				})
			},

			/** 
			 * 重新加载底部栏
			 * @date 2022-12-01
			 */
			loadBottom() {
				let isAllChoose = true
				this.myCollectList.forEach(value => {
					if (value.is_select == 0) {
						isAllChoose = false
					}
				})
				this.isAllChoose = isAllChoose
			},

			/**
			 * 取消收藏
			 * @date 2022-12-01
			 */
			collectCancel() {
				let collectIds = []
				for (let i = 0; i < this.myCollectList.length; i++) {
					if (this.myCollectList[i].is_select == 1) {
						collectIds.push(this.myCollectList[i].id)
					}
				}

				if (collectIds.length == 0) {
					this.cn.toast('请选择需要取消收藏的商品~')
					return false
				}
				this.rq.getData('fire/api/Fire/cancelProductCollect', {
					collect_id: collectIds.join(',')
				}).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg)
						this.isEdit = false
						this.loadMyCollectList()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.btn {
		width: 220rpx;
		height: 73rpx;
		line-height: 73rpx;
		border-radius: 36rpx;
	}

	.goodsImg {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.btn_block {
		position: fixed;
		right: 30rpx;
		bottom: calc(var(--window-bottom) + 98rpx + 40rpx);
	}
</style>
