<template>
    <view>
      <!--  <cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				任务广场
			</block>
            <block slot="right"></block>
            <block slot="right">
				
			</block>
 		</cu-custom> -->
        <u-tabs :list="titles" :is-scroll="false" :current="currentTab" @change="changeTab" active-color="#fc6035" font-size="32"></u-tabs>
		<view v-if="items.length == 0">
			<view v-if="isLoading" class="flex align-center justify-center flex-direction" style="width: 100%; height: 600rpx; text-align: center;">
				<u-loading mode="flower" size="100" style="margin-top: 300rpx;"></u-loading>
				<view style="color: #111111; font-size: 30rpx; margin-top: 50rpx;">
					努力加载中...
				</view>
				
			</view>
			<view v-else>
				<view v-if="currentTab == 0" class="flex align-center justify-center flex-direction" style="width: 100%; height: 600rpx; text-align: center;">
					
					<view style="color: #666666; font-size: 32rpx; margin-top: 300rpx;">
						没有相关数据，或者您未关注任何任务类型
					</view>
					<view class="setting-button-style" @tap="selectCategory()">去设置</view>
				</view>
				<view v-else class="flex align-center justify-center flex-direction" style="width: 100%; height: 600rpx; text-align: center;">
					<image src="../../static/empty.png" class="empty-img"></image>
					<view class="color-66" style="margin: 0rpx 0 80rpx 0;">暂无报价数据</view>
				</view>
				
				
			</view>
			
		</view>
		<view v-else >
			<view v-for="(item, index) in items">
				<view class="publish-item">
					<view class="publish-item-name"  @click="detailsPublish(item)">
						<!-- <image :src="item.publishImageList[0].url" mode="" v-if="item.length>0" style="width:84rpx ;height: 84rpx;" ></image> -->
						<view v-if="currentTab == 0" class="publish-item-name-text" style="display: flex;align-items: center;">
							 
							 
							<u-image :src="item.publishImageList[0].url" :fade="true" style="width:84rpx ;height: 84rpx;margin-right: 20rpx;border-radius: 10rpx;" v-if="item.publishImageList.length>0 &&item.publishImageList[0].type == '001' " >
							       <view slot="error" style="font-size: 24rpx;"><image src="../../static/publish/param_merchant.png" mode="" style="width: 80rpx;height: 80rpx;"></image></view>
							</u-image>
							<image src="../../static/publish/param_merchant.png" v-else style="width:84rpx ;height: 84rpx;margin-right: 20rpx;border-radius: 10rpx;"  mode="aspectFill">
							</image>
							<span style="width: 550rpx;">
								{{item.name}}
							</span>
							
						</view>
						<view v-else class="flex  align-center ">
							<view class="publish-item-name-text" style="flex: 1;">
								{{item.name }}
							</view>
							<view style="width: 84rpx; height: 84rpx; background-color: #008CF8; border-radius: 50%; text-align: center; margin-right: 16rpx;" 
								class="flex align-center justify-center" v-if="item.status == 1">
								<view style="font-size: 22rpx; line-height: 22rpx; color: #FFFFFF; font-weight: bold;">待预约</view>
							</view>
							<view style="width: 84rpx; height: 84rpx; background-color: #FC6035;border-radius: 50% ;text-align: center; margin-right: 16rpx;"
								class="flex align-center justify-center" v-if="item.status == 2">
								<view style="font-size: 22rpx; line-height: 22rpx; color: #FFFFFF; font-weight: bold;">被选中</view>
							</view>
							<view style="width: 84rpx; height: 84rpx; background-color: #D1D5DA; border-radius: 50% ;text-align: center; margin-right: 16rpx;"
								class="flex align-center justify-center" v-if="item.status == 3">
								<view style="font-size: 22rpx; line-height: 22rpx; color: #FFFFFF; font-weight: bold;">被抢单</view>
							</view>
							<view style="width: 84rpx; height: 84rpx; background-color: #D1D5DA;border-radius: 50%; text-align: center; margin-right: 16rpx;"
								class="flex align-center justify-center" v-if="item.status == 4">
								<view style="font-size: 22rpx; line-height: 22rpx; color: #FFFFFF; font-weight: bold;">已下架</view>
							</view>
							
						</view>
					</view>
					<view class="publish-middle-box">
						<view class="flex align-start justify-start" style="margin-bottom: 20rpx;">
							<view style="width: 150rpx; min-width: 150rpx; color: #999999; font-size: 28rpx;">服务类型：</view>
							<view style="font-size: 28rpx; color: #111111; max-width: 490rpx;">
								{{item.parentCategoryName == null ? item.categoryName :  item.parentCategoryName + "-" +  item.categoryName}}
							</view>
							<view class="flex align-center justify-center"
								style="border: 2rpx solid #CCCCCC; border-radius: 40rpx; width: 40rpx; height: 40rpx; margin-left: 20rpx; "
								@click="deleteCategory(item)">
								<!-- <u-icon name="close" color="#666666" size="16"></u-icon> -->
								<image src="../../static/common/close.png" style="width:16rpx;height:16rpx;" ></image>
							</view>
							
						</view>
						<view class="flex align-start justify-start">
							<view style="width: 150rpx; min-width: 150rpx; color: #999999; font-size: 28rpx;">服务地址：</view>
							<view style=" max-width: 550rpx;">{{item.publishAddress.address + "-" + item.publishAddress.detailed}}</view>
						</view>
					</view>
					<view style="width: 680rpx;height: 2rpx;background: #EEEEEE;"></view>
					<view class="flex justify-between align-center" style="padding: 20rpx 10rpx 10rpx 10rpx">
						<view style="color: #999999; font-size: 26rpx;">{{ $timefilter('YY-MM-DD HH:MM',item.createTime)}}</view>
						
						<view style="color: #111111; font-size: 26rpx;">
							<text>有</text>
							<text style="color: #FC6035;">{{item.quoteCount}}</text>
							<text>人报价</text>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view style="z-index: 999;">
			<u-popup v-model="showDeleteCategory" mode="bottom" border-radius="30">
				
				<view style="padding: 50rpx 20rpx 20rpx 20rpx; ">
					<view class="setting-item-box flex align-center justify-start" style="padding: 20rpx;" @click="unfollowCategory()">
						<image src="../../static/publish/unfolow.png" style="width: 36rpx; height: 36rpx; margin-right: 20rpx"></image>
						<view style="font-size: 28rpx;font-weight: bold;color: #333333; line-height: 28rpx; max-width: 600rpx;">
							<text>对【</text>
							<text>{{selectCategoryName}}</text>
							<text>】类型不感兴趣，不再显示</text>
						</view>
					</view>
					<view class="setting-item-box flex align-center justify-between" style="padding: 20rpx;" @click="selectCategory()">
						<view class="flex align-center justify-start">
							<image src="../../static/publish/follow-setting.png" style="width: 36rpx; height: 36rpx; margin-right: 20rpx"></image>
							<view style="font-size: 28rpx;font-weight: bold;color: #333333; line-height: 28rpx;">设置关注类型</view>
						</view>
						<image src="../../static/publish/right-arrow.png" style="width: 28rpx; height: 28rpx;"></image>
					</view>
			
				</view>
				
			</u-popup>
		</view>
		<view style="z-index: 9999;">
			<u-popup v-model="showSelectCategory" mode="bottom" border-radius="30">
				<view style="padding-top: 40rpx;">
					<view class="flex align-center justify-between"
						style="padding: 0rpx 41rpx 27rpx 47rpx;">
						<view style="font-size: 34rpx;font-weight: bold;color: #111111;">选择关注的服务类型</view>
						<view @click="selectAllChange" class="flex ">
							<view style="color: #111111; font-size: 30rpx; font-weight: 500; padding-right: 20rpx;">全选</view>
							<u-radio-group v-if="selectAll == true" class="check-box" :size='40' >
								<u-radio  activeColor="#FC6035" :icon-size='20'></u-radio>
							</u-radio-group>
							<span v-else>
								<view style="width: 40rpx;height: 40rpx; border-radius: 40rpx; border: 2rpx solid #666666;"></view>
							</span>
						</view>
					</view>
					
				</view>
				<view style="padding: 30rpx 30rpx 40rpx 30rpx; ">
					<view class="" class="flex justify-start flex-wrap" >
						<view v-for="(item,index) in categoryList" 
							@click="selectCategoryItem(item.categoryId)"
							class=" flex align-center justify-center category-item" 
							:class="{'category-item-active' : followIds.indexOf(item.categoryId) >= 0}"
							:key="index">
							<text class="item-text">{{item.categoryName}}</text>
							
						</view>
					</view>

				</view>
				<view style="padding: 30rpx 70rpx;" @click="saveTime">
					<view class="select_time_sure">确认</view>
				</view>
			</u-popup>
		</view>
		<u-modal v-model="showModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
		      confirmText='确认' @confirm="confirmDeleteReply()"></u-modal>
		<u-loadmore :status="status" :load-text="loadText" @loadmore="loadmore()"v-show="items.length > 0" />
    </view>
</template>
<script>
export default {
	components: {},
	   data() {
		  return {
			status: "loadmore",
			loadText: {
				loadmore: '点击或上拉加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			titles: [{
				name: '全部',
				id: 0
			}, {
				name: '我报价的',
				id: 1
			}],
			currentTab: 0,
			showSelectCategory: false,
			showDeleteCategory: false,
			selectCategoryId: '',
			selectCategoryName: '',
			selectAll: false,
			categoryList: [],
			followIds: [],
			items: [
				
			],
			showModel: false,
			modelContent: "",
			serverId:'',
			isLoading: true,
		  }
			
	   },
	 watch: {
	},
	// 接收 上个页面传递过来的参数
	onLoad(option) {
		
		// this.id = option.id;
		 this.getUserInfo();
	},
	created(){
		this.serverId = uni.getStorageSync('userInfo').serverId;
		this.initCategoryList()
		this.getList(1)
	},
	mounted(){
	},
	onPullDownRefresh() {
	  // this.load();
	  this.getList(1);
	},
	methods:{
		changeTab(index) {
			this.currentTab = index;
			this.items = [];
			// this.isLoading = true;
			this.getList(1)
			
		},
		getList(pageNum) {
			 
			var that = this;
			let params = {
				pageNum: pageNum,
				pageSize: that.$store.state.pageSizes,
				serverId: that.serverId
			}
			// that.items = []
			uni.showLoading({
				title: '加载中',
				mask:true
			});
			if (that.currentTab == 0) { 	 
				  that.$u.api.getPublishList(params).then(res => {	
					this.isLoading = false;
					console.log(res)
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.code === 200) {
					
						if(res.pageNum == 1) {
							this.items = res.rows;
						} else {
							this.items = this.items.concat(res.rows)
						}
						this.hasNextPage = res.hasNextPage;
						this.pageNum = res.pageNum;
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					}else{
						that.$api.msg(res.msg)
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					}     
				  }).catch(err =>{
					  this.isLoading = false;
					  console.log(err)
					  uni.stopPullDownRefresh();
					  uni.hideLoading();
					  if (this.hasNextPage) {
					  	this.status = "loadmore";
					  } else {
					  	this.status = "nomore";
					  }
				  })	 
			} else {	 
				that.$u.api.getQuotePublishList(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if(res.code === 200) {
						 
						 if (res.pageNum == 1) {
						 	this.items = res.rows;
						 } else {
						 	this.items = this.items.concat(res.rows)
						 }
						 this.hasNextPage = res.hasNextPage;
						 this.pageNum = res.pageNum;
						 if (this.hasNextPage) {
						 	this.status = "loadmore";
						 } else {
						 	this.status = "nomore";
						 }
						 
						 
					}else{
						that.$api.msg(res.msg)
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					}
				}).catch(err =>{
					this.isLoading = false;
					uni.stopPullDownRefresh();
					uni.hideLoading();
					console.log(err)
					if (this.hasNextPage) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
				})
			}
		},	
		onReachBottom() {
			this.loadmore()
		},
		loadmore() {
			console.log("loadmore")
			console.log("查询下一页")
			if (this.status == "loadmore" && this.hasNextPage) {
				this.getList(this.pageNum + 1)
			}
		},
		selectCategory() {
			// todo 两次请求获取分类ID和已关注ID，再去弹窗和初始化是否已选中
			this.showDeleteCategory = false;
			this.showSelectCategory = true;
			this.initSelectAll();
		},
		deleteCategory(item) {
			console.log(item)
			this.selectCategoryName = item.parentCategoryName == null ? item.categoryName : item.parentCategoryName
			this.selectCategoryId = item.parentCateId == null ? item.cateId : item.parentCateId
			this.showDeleteCategory = true;
				 
		},
		getUserInfo() {
		  var that = this;
		  that.serverId = uni.getStorageSync('userInfo').serverId;
		  if (that.serverId == undefined || that.serverId == null || that.serverId == '') {
		    uni.reLaunch({
		      url: '../login/indexChoice'
		    })
		  }
		},
		// 取消关注
		confirmDeleteReply() {
		   console.log(this.selectCategoryId)
		   
		   var that = this;
		   let params = {	
		   	serverUserId: that.serverId,
		   	categoryId:that.selectCategoryId,
		   };
		   that.$u.api.cancelAttention(params).then(res => {
		   	console.log(res)
		   	if (res.code === 200) {
		   		 that.showSelectCategory = false;
		   		 that.$api.msg(res.msg)
		   		that.initCategoryList();
		   		that.getList(1);		
		   	}else{
		   		that.$api.msg(res.msg)
		   	}
		   	that.followIds=[];
			
		   }).catch(err =>{
		   	console.log(err)
		   })
		   
		},
		unfollowCategory() {
			this.showDeleteCategory = false;
			this.showModel = true;
			this.modelContent = "确定取消关注"+this.selectCategoryName+"吗？";
		},
		selectAllChange() {
			if (this.selectAll) {
				this.selectAll = false;
				this.followIds = [];
			} else{
				this.selectAll = true;
				let tempArray = [];
				if (this.categoryList != null && this.categoryList.length > 0) {
					for (let i = 0; i < this.categoryList.length; i++) {
						tempArray.push(this.categoryList[i].categoryId)
					}
				}
				this.followIds = tempArray;
			}
		},
		initSelectAll() {
			if (this.categoryList.length > 0 && this.followIds.length > 0) {
				let tempSelectAll = true;
				for (let i = 0; i < this.categoryList.length; i++) {
					if (this.followIds.indexOf(this.categoryList[i].categoryId) < 0) {
						tempSelectAll = false;
						break;
					}
				}
				this.selectAll = tempSelectAll;
			} else {
				this.selectAll = false;
			}
		},
		initCategoryList() {
			
			this.$u.api.categoriesPublishList({serverId: this.serverId}).then(res => {
				if(res.code==200) {
                    this.categoryList = res.data;
                    for (let i = 0; i < this.categoryList.length; i++) {
                        if(this.categoryList[i].attention) {
                            this.followIds.push(this.categoryList[i].categoryId);
                        }
                    }
                }
			}).catch(err => {
				console.log(err)
			})
		 
			
		},
		selectCategoryItem(categoryId) {
			let index = this.followIds.indexOf(categoryId)
			if (index >= 0) {
				this.followIds.splice(index, 1);
			} else {
				this.followIds.push(categoryId)
			}
			this.initSelectAll();
		},
		// 确认提交关注
		saveTime(){
			var that = this;
			let params = {	
				serverUserId:that.serverId,
				categoryIdList:that.followIds,
				followAll:that.selectAll ? 1 : 0
			};
			that.$u.api.attention(params).then(res => {
				console.log(res)
				if (res.code === 200) {
					 that.showSelectCategory = false;
					 
					that.$api.msg('操作成功')
					that.initCategoryList();
					that.getList(1);
					
					
				}else{
					that.$api.msg(res.msg)
				}
				that.followIds=[];
			}).catch(err =>{
				console.log(err)
			})
		},
		detailsPublish(item){
			console.log("点击跳转详情");
			console.log(item)
			uni.navigateTo({
			  url: `../publish/publishInfo?publishId=`+item.publishId
			});
		}
	}


}
</script>
<style lang='scss' scoped>
	page {
		background: #F6F6F6;
	}
	.setting-button-style {
		color: #FFFFFF;
		background-color: #FC6035;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
	}
	.select_time_sure {
		background: #fc6035;
		box-shadow: 0rpx 5rpx 14rpx 0rpx #eb4553;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
	}
	.check-box {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #FC6035;
	}
	.category-item {
		width: 157rpx; 
		height: 84rpx; 
		border: 1px solid #EEEEEE;
		margin: 0 8rpx 20rpx 8rpx;
		text-align: center;
		background: #FAFAFA;
		border: 2rpx solid #EEEEEE;
		border-radius: 8rpx;
	}
	.category-item-active {
		background: #FFF4F0;
		border: 1px solid #FF511B;
	}
	.item-text {
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.publish-item {
		margin: 15rpx 15rpx 15rpx;
		padding: 18rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
	.publish-item-name {
		background-color: #F7F8F9;
		border-radius: 10rpx;
		width: 100%;
		padding: 30rpx 20rpx;
	}
	.publish-item-name-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #111111;
	}
	.publish-middle-box {
		padding: 30rpx 8rpx;
	}
	.setting-item-box {
		width: 100%;
		height: 104rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.empty-img {
	    width: 380rpx;
	    height: 380rpx;
	    margin-bottom: 32rpx;
	}
</style>

