<template>
	<view >
	<view class="myGoods">
		<loadlogo v-if="!loadlogo" />
		<view class="goodsList" v-if="loadlogo">
			<!-- 列表循环 -->
			<view class="dis-flex b-f" style="padding: 30upx;border-radius: 10upx;margin-bottom: 20upx;" v-for="(item,index) in list" :key="index">
				<view class="img-box">
					<image style="width: 150upx;height: 150upx;margin: 0upx 10upx;border-radius: 10upx;" :src="item.logo" mode=""></image>
				</view>
				<view class="content-box f-25">
					<view class="text">
						{{item.name}}
					</view>
					<view class="text" >
						<view class="dis-il-block" style="color: #FF4444; background-color: #FEF1F1;margin-right: 20upx;padding: 3upx 10upx;">
							{{item.oneClassName }}
						</view>
						<view class="dis-il-block" style="color: #FF4444; background-color: #FEF1F1;padding: 3upx 10upx;">
							{{ item.twoClassName}}
						</view>
					</view>
					<view class="text" v-if="item.meal_endtime !== '0'">
						过期时间:{{item.meal_endtime}}
					</view>
				</view>
				<view class="btnbox f-24">
					<view :class="item.showstatus == '0'?'toaudit2':item.showstatus == '1'?'toaudit1':item.showstatus == '2'?'toaudit0':item.showstatus == '3'?'toaudit0':'toaudit2'">
						{{item.showstatus == '0'?'已关闭':item.showstatus == '1'?'展示中':item.showstatus == '2'?'待付款':item.showstatus == '3'?'待审核':'被驳回'}}
					</view>
					<view class="administrationbtn" @click="administration(item)" >
						{{item.showstatus == '2'?'付款':'管理'}}
					</view>
				</view>
			</view>
			<load-more :isMore="loadingMore"></load-more>
		</view>
		<!-- 管理栏 -->
		<PopManager :show="administrationshow" :type="'bottom'" :overlay="'false'" :showOverlay="'false'" @clickmask="administrationshow = false">
			<view class="admin">
				<view class="t-c f-30 f-w" style="background-color: #DCDCDC;padding: 30upx;border-radius: 15upx 15upx 0 0;">
					商家：{{theitem.name}}
				</view>
				<view class="t-c f-30 f-w b-f" style="padding: 30upx;margin-bottom: 5upx;">
					<picker @change="bindPickerChange" :value="pickerindex" range-key="name" :range="pickerarray">
						续费
					</picker>
				</view>
				<view class="t-c f-30 f-w b-f" style="padding: 30upx;margin-bottom: 5upx;" @click="compile">
					编辑
				</view>
				<view class="t-c f-30 f-w b-f" style="padding: 30upx;margin-bottom: 5upx;" @click="soldOut">
					{{theitem.status == '0'?'上架':'下架'}}
				</view>
				<view class="t-c f-30 f-w b-f" style="padding: 30upx;margin-top: 20upx;" @click="cloce">
					取消
				</view>
			</view>
		</PopManager>
		
	</view>
	<!-- <phoneNavBar :checked="'我的'"></phoneNavBar> -->
	<TabBars :tabBarAct="0" :pageType="'19'"></TabBars>
	<far-bottom></far-bottom>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import PopManager from '@/components/template/PopManager';
	import loadMore from '@/components/template/loadmore.vue';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import phoneNavBar from '@/components/template/phoneNavBar';
	import TabBars from '@/components/template/tabBar.vue';
	export default{
		data(){
			return{
				list:[1,1,1,1],
				loadingMore:true,
				administrationshow:false,
				page:1,
				theitem:{},
				pickerindex:0,
				pickerarray:[],
				total:0,
				loadlogo:false
			}
		},
		components:{
			loadMore,
			PopManager,
			phoneNavBar,
			Loadlogo,
			TabBars
		},
		onLoad() {
			
		},
		onShow() {
			this.getlist();
		},
		methods:{
			// 续费
			bindPickerChange(e){
				let _this = this;
				console.log(e,_this.pickerarray);
				let data = {
					pageid:_this.theitem.id,
					mealid:_this.pickerarray[e.detail.value].id
				}
				App._post_form(
					`&p=yellowpage&do=renewPage`,
					data,
					res => {
						console.log(res);
						// uni.showToast({
						// 	title:res.message
						// });
						_this.cloce();
						if(res.data.status == 0){
							uni.showToast({
								title:'续费成功'
							})
							this.getlist();
						}else{
							App.navigationTo({
								url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid +'&plugin=yellowpage'
							});
						}
						
						// this.administrationshow = false;
					},
					false,
					() => {
						
					}
				);
			},
			// 编辑页面
			compile(){
				this.cloce();
				App.navigationTo({
					url: `pages/subPages2/phoneBook/enterForm/enterForm?id=${this.theitem.id}`
				})
			},
			cloce(){
				this.administrationshow = false;
			},
			// 上下架
			soldOut(){
				App._post_form(
					`&p=yellowpage&do=changeStatus&id=${this.theitem.id}`,
					{},
					res => {
						console.log(res);
						uni.showToast({
							title:res.message
						});
						this.getlist();
						this.administrationshow = false;
					},
					false,
					() => {
						// _this.loadlogo = true;
					}
				);
			},
			// 初始化列表
			getlist(){
				let _this = this;
				// _this.list = [];
				for(let i = 0;i < _this.page;i++){
					App._post_form(
						`&p=yellowpage&do=myPageList&page=${i+1}`,
						{},
						res => {
							console.log(res);
							// _this.list = res.data.list;
							
							if(i == 0){
								_this.total = res.data.total;
								_this.pickerarray = res.data.meallist;
								_this.list = res.data.list;
							}else{
								_this.list = _this.list.concat(res.data.list);
							}
							console.log(_this.list)
						},
						false,
						() => {
							_this.loadlogo = true;
						}
					);
				}
				
			},
			// 管理栏显示
			administration(item){
				if(item.showstatus == 2){
					App.navigationTo({
						url: 'pages/mainPages/payment/payment?orderid=' + item.orderid +'&plugin=yellowpage'
					});
				}else{
					this.theitem = item;
					this.administrationshow = true;
				}
			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			this.loadingMore = false;
			if (this.page == this.total) {
				this.loadingMore = true;
			} else {
				this.page++;
				App._post_form(
					`&p=yellowpage&do=myPageList&page=${this.page}`,
					{},
					res => {
						this.list = this.list.concat(res.data.list);
						this.loadingMore = true;
					},
					false,
					() => {}
				);
			}
		}

	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.myGoods{
		padding: 30upx 30upx 150upx;
		.goodsList{
			.img-box{
				flex: 0.3;
			}
			.content-box{
				flex: 0.6;
				color: #6f6f6f;
				.text{
					padding: 10upx 0;
				}
			}
			.btnbox{
				flex: 0.2;
				text-align: right;
				position: relative;
				.toaudit0{
					color: #E77A4B;
				}
				.toaudit1{
					color: #81D740;
				}
				.toaudit2{
					color: #999999;
				}
				.administrationbtn{
					padding: 2upx 10upx;
					width: 55upx;
					background-color: #307EF8;
					position: absolute;
					right: 0;
					bottom: 10upx;
					text-align: center;
					color: #FFFFFF;
					border-radius: 8upx;
				}
			}
		}
		.admin{
			// padding: 30upx;
			// width: 100%;
			background-color: #F8F8F8;
			height: 40vh;
			// background-color: #FFFFFF;
			width: 100vw;
			padding-bottom: 50upx;
			border-radius: 15upx 15upx 0 0;
		}
	}
</style>
