<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				我发布的服务需求
			</block>
			<block slot="right">
				<view class=" margin-right-sm text-df" @tap.stop="()=>{showChoose=!showChoose}">
					<span>{{currentChooseLabel}}</span>
					<image src="../../../static/publish/up-black.png" class="down-img" v-if="showChoose"></image>
					<image src="../../../static/publish/down-black.png" class="down-img" v-else></image>
				</view>
			</block>

		</cu-custom>
		<u-mask :show="showChoose" :duration="0" :z-index="10000" :mask-click-able="true" :custom-style="{background: 'rgba(100, 100, 100, 0.05)'}" @click="removeChoose"></u-mask>
		<view class="house-box" v-if="showChoose">
			<view v-for="item in typeList" :key="item.publishState" class="font-30 house-item" 
			:class="item.publishState==currentChooseState?'text-main':''" @tap.stop="chooseState(item)">{{item.label}}</view>
		</view>
		<view v-if="nothingFlag" 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="publish-button-style" @tap="gotoPublish()">去发布</view>
		</view>
		<view  >
			<view v-for="(item, index) in items">
				<view class="publish-item">
					<view class="publish-item-name">
						<view class="flex align-center justify-start"  @click="publishInfo(item)" >
							<view class="publish-item-name-text" style="word-break: break-all;">
								{{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.publishState == '001'">
								<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.publishState == '002'">
								<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.publishState == '003'">
								<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.publishState == '004'">
								<view style="font-size: 22rpx; line-height: 22rpx; color: #FFFFFF; font-weight: bold;">已下架</view>
							</view>
							
						</view>
					</view>
					<view class="publish-middle-box"  @click="publishInfo(item)">
						<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>
						<view class="flex justify-between align-center">
							<view style="color: #999999; font-size: 26rpx;">{{ $timefilter('YY-MM-DD HH:MM',item.createTime)}}</view>
							
							<view style="color: #111111; font-size: 26rpx; padding: 0 10rpx;">
								<text>有</text>
								<text style="color: #FC6035;">{{item.quoteCount}}</text>
								<text>人报价</text>
							</view>
						</view>
					</view>
					<view style="width: 680rpx;height: 2rpx;background: #EEEEEE;"></view>
					<view class="flex justify-end align-center" style="padding: 20rpx 0rpx 0rpx 0rpx">
						<u-button class="publish-item-edit-button" :ripple="true" v-if="item.publishState == '001'" @click="deletePublish(item)">删除</u-button>
						<u-button class="publish-item-edit-button" v-if="item.publishState == '004'" :ripple="true" @click="takeOnPublish(item)">上架</u-button>
						<u-button class="publish-item-edit-button" v-if="item.publishState == '001'" :ripple="true" @click="takeOffPublish(item)">下架</u-button>
						<u-button class="publish-item-edit-button" v-if="item.publishState == '001' && item.quoteCount == 0   " :ripple="true" @click="editPublish(item)">编辑</u-button>
					</view>
				</view>
				
			</view>
			
			
		</view>
		<u-modal v-model="showDeleteModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
		      confirmText='确认' @confirm="confirmDelete()"></u-modal>
		<u-modal v-model="showTakeOffModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
		      confirmText='确认' @confirm="confirmTakeOff()"></u-modal>
		<u-modal v-model="showTakeOnModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
		      confirmText='确认' @confirm="confirmTakeOn()"></u-modal>
		<u-loadmore :status="status" :load-text="loadText" @loadmore="loadmore()" v-show="items.length > 0"/>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nothingFlag:false,
				status: "loadmore",
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				modelContent: "",
				showDeleteModel: false,
				showTakeOffModel: false,
				showTakeOnModel: false,
				editPublishId: "",
				
				pageNum: 1,
				hasNextPage: true,
				showChoose: false,
				currentChooseLabel: "筛选",
				currentChooseState: "",
				items: [],
				typeList: [{
					publishState: "",
					label: "全部"
				}, {
					publishState: "001",
					label: "待预约"
				}, {
					publishState: "002",
					label: "已预约"
				}, {
					publishState: "003",
					label: "已完成"
				}, {
					publishState: "004",
					label: "已下架"
				}]
			}
		},
		onLoad(options) {
			this.getList(1)
		},
		onPullDownRefresh() {
		  // this.load();
		  this.getList(1)
		  // setTimeout(() => {
			 //  uni.stopPullDownRefresh();
		  // }, 1000)
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			removeChoose() {
				this.showChoose = false
			},
			chooseState(item) {
				console.log(item)
				if (item.publishState == this.currentChooseState) {
					return;
				}
				this.currentChooseState = item.publishState
				this.currentChooseLabel = item.label
				this.showChoose = false;
				this.hasNextPage = true;
				this.status = "loadmore";
				this.getList(1)
				// this.initCompanyList();
				
			},
			getList(pageNum) {
				console.log(uni.getStorageSync('userInfo'))
				this.$u.api.minePublishList({
					"pageNum": pageNum,
					"pageSize": this.$store.state.pageSizes,
					"memberId": uni.getStorageSync('userInfo').memberId,
					"publishState": this.currentChooseState
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						if (res.pageNum == 1) {
							this.items = res.rows;
						} else {
							this.items = this.items.concat(res.rows)
						}
						if(this.items.length==0)
						{
							this.nothingFlag=true
						}else{
							this.nothingFlag=false
						}
						this.hasNextPage = res.hasNextPage;
						this.pageNum = res.pageNum;
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					} else {
						this.$api.msg("查询失败")
						if (this.hasNextPage) {
							this.status = "loadmore";
						} else {
							this.status = "nomore";
						}
					}
					
				}).catch(err => {
					console.log(err)
					if (this.hasNextPage) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
				}).finally(()=> {
					 uni.stopPullDownRefresh();
				})
				
			},
			loadmore() {
				console.log("loadmore")
				if (this.status == "loadmore" && this.hasNextPage) {
					this.getList(this.pageNum + 1)
				}
			},
			gotoPublish() {
				uni.navigateTo({
					url: '../../publish/addPublish'
				})
			},
			deletePublish(publish) {
				console.log("--", publish)
				this.editPublishId = publish.publishId;
				this.modelContent = "确定删除任务【" + publish.name + "】吗？"
				this.showDeleteModel = true;
				
			},
			takeOnPublish(publish) {
				console.log("--", publish)
				this.editPublishId = publish.publishId;
				this.modelContent = "确定上架任务【" + publish.name + "】吗？"
				this.showTakeOnModel = true;
			},
			takeOffPublish(publish) {
				console.log("--", publish)
				this.editPublishId = publish.publishId;
				this.modelContent = "确定下架任务【" + publish.name + "】吗？"
				this.showTakeOffModel = true;
			},
			//点击编辑，跳转页面
			editPublish(publish) {
				console.log("--", publish)
				console.log(publish.publishId);
				uni.navigateTo({
				  url: '../../publish/addPublish?publishId='+publish.publishId
				})
		
			},
			//删除需求
			confirmDelete() {
				console.log("删除服务需求按钮")
				var that = this;
				let params= this.editPublishId;
				that.$u.api.deletePublish(params).then(res => {		
					console.log(res)
					if (res.code === 200) {
						//刷新页面
						 that.$api.msg('操作成功')
						 that.getList(1)
					}else{
						that.$api.msg(res.msg)
					}
					
				}).catch(err =>{
					console.log(err)
				})
			},
			//上架需求
			confirmTakeOn() {
				
				console.log("确认上架按钮")
				var that = this;
				let params= this.editPublishId;
				that.$u.api.putaway(params).then(res => {		
					console.log(res)
					if (res.code === 200) {
						//刷新页面
						 that.$api.msg('操作成功')
						 that.getList(1)
					}else{
						that.$api.msg(res.msg)
					}
					
				}).catch(err =>{
					console.log(err)
				})
			},
			//下架需求
			confirmTakeOff() {
				console.log("确认下架按钮")
				var that = this;
				let params= this.editPublishId;
				that.$u.api.soldOut(params).then(res => {		
					console.log(res)
					if (res.code === 200) {
						//刷新页面
						 that.$api.msg('操作成功')
						 that.getList(1)
					}else{
						that.$api.msg(res.msg)
					}
					
				}).catch(err =>{
					console.log(err)
				})
			},
			//跳转详情
			publishInfo(publish){
				uni.navigateTo({
				  url: '../../publish/publishInfo?publishId='+publish.publishId
				})
				 
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F3F3;
	}
</style>

<style scoped lang="scss">
	.down-img {
		width: 20rpx;
		height: 20rpx;
		margin-left: 18rpx;
	}
	.house-box {
		position: fixed;
		top: 90rpx;
		right: 20rpx;
	
		width: 221rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 21px 0px rgba(43, 43, 43, 0.16);
		border-radius: 20rpx;
		z-index: 10001;
	}
	.house-box:after{
		box-sizing: content-box;
		width: 0rpx;
		height: 0rpx;
		position: absolute;
		top: -40rpx;;
		right: 40rpx;
		padding: 0;
		border-top: 20rpx solid transparent;
		border-bottom: 20rpx solid #fff;
		border-left: 20rpx solid transparent;
		border-right: 20rpx solid transparent;
		display: block;
		content: '';
		z-index: 10
	}
	.house-item {
		color: #666;
		margin: 40rpx 0;
		padding: 0 40rpx;
		text-align: center;
	}
	.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;
		width: 550rpx;
	}
	.publish-middle-box {
		padding: 30rpx 8rpx;
	}
	.publish-button-style {
		color: #FFFFFF;
		background-color: #FC6035;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 60rpx;
	}
	.publish-item-edit-button {
		width: 130rpx;
		height: 58rpx;
		background: #FFFFFF;
		// border: 2rpx solid #CCCCCC;
		border-radius: 10rpx;
		margin: 0 10rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 58rpx;
		padding: 0;
	}
</style>
