<template>
	<view class="muserItem" v-if="load" @click="navlink(serItem.id)">
		<view class="imgbnox">
			<image :src="serItem.logo" class="logo" mode=""></image>
			<view class="stateTag" v-if="states" :style="{background:serItem.status == 0?'#cccccc':serItem.status == 5?'#ff4444':serItem.status == 6?'#72AAFD':'linear-gradient(270deg, #FDAD28 0%, #FECE02 100%)'}">
				{{serItem.status == 0?'已下架':serItem.status == 5?'审核中':serItem.status == 6?'已驳回':'销售中'}}
			</view>
		</view>
		
		<view class="content">
			<view class="f-32 col-3 f-w">
				{{serItem.title || serItem.name}}
			</view>
			<view class="tags" v-if="serItem.catearray">
				<view class="tag-item" v-for="(item,index) in serItem.catearray" :key="index">
					{{item}}
				</view>
			</view>
			<view class="tags" v-else>
				<view class="tag-item" v-for="(item,index) in serItem.label" :key="index">
					{{item}}
				</view>
			</view>
			<view class="prices f-30  c-ff4444">
				<text class="c-ff4444 f-24 f-w"></text>
				<text class="f-w">{{serItem.price}}</text>
				<text class="f-26 col-9" style="padding-left: 20upx;">销量:</text>
				<text class="f-26 col-9">{{serItem.salenum}}</text>
			</view>
		</view>
		<view class="more" @click="openbtn" v-if="states">
			<image :src="imgfixUrls + 'homemakingImg/gengduo.png'" mode="" ></image>
		</view>
		<view class="shade" v-if="serItem.checked">
			<view class="flex-box" @click="editingService" v-if="serItem.status != 3">
				<view class="shadeItem">
					<image :src="imgfixUrls + 'homemakingImg/bianji.png'" mode=""></image>
					<view class=" f-24" style="padding-top: 20upx;color: #dddddd;">
						编辑
					</view>
				</view>
			</view>
			<view class="flex-box" v-if="serItem.status == 0" @click="state(1)">
				<view class="shadeItem">
					<image :src="imgfixUrls + 'homemakingImg/shangjia.png'" mode=""></image>
					<view class=" f-24" style="padding-top: 20upx;color: #dddddd;">
						上架
					</view>
				</view>
			</view>
			<view class="flex-box" v-if="serItem.status == 1 || serItem.status == 5" @click="state(2)">
				<view class="shadeItem">
					<image :src="imgfixUrls + 'homemakingImg/xiajia.png'" mode=""></image>
					<view class=" f-24" style="padding-top: 20upx;color: #dddddd;">
						下架
					</view>
				</view>
			</view>
			<view class="flex-box" @click="state(3)">
				<view class="shadeItem">
					<image :src="imgfixUrls + 'homemakingImg/shanchu.png'" mode=""></image>
					<view class=" f-24" style="padding-top: 20upx;color: #dddddd;">
						删除
					</view>
				</view>
			</view>
			<view class="flex-box" v-if="serItem.status == 1">
				<view class="shadeItem" @click="sher">
					<image :src="imgfixUrls + 'homemakingImg/tuiguang.png'" mode=""></image>
					<view class=" f-24" style="padding-top: 20upx;color: #dddddd;">
						推广
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	export default{
		data(){
			return{
				load:true
			}
		},
		props:{
			serItem:{
				type:Object,
				default:{}
			},
			type:{
				type:Number,
				default:1
			},
			states:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			navlink(id){
				if(this.states) return
				App.navigationTo({
					url: "pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=" + id
				});
			},
			sher(){
				App.navigationTo({
					url: `pages/mainPages/poster/poster?id=${this.serItem.id}&type=16`
				})
			},
			state(type){
				App.showError(
					`是否${type == 1?'上架':type==2?'下架':'删除'}此项目?`,
					data => {
						if (data.confirm) {
							App._post_form(
								`&p=housekeep&do=serviceUpdate`,
								{doStatus:type,id:this.serItem.id},
								res => {
									this.$emit('getMyserList',false,1);
								},
								false,
								() => {}
							);
						}
					},
					true
				);
				
			},
			openbtn(){
				this.serItem.checked =true;
				// debugger
				this.load = !this.load
				this.load = !this.load
				this.$emit('openbtn',this.serItem.id)
			},
			editingService(){
				App.navigationTo({
					url: "pages/subPages2/homemaking/pubService/pubService?id=" + this.serItem.id + '&type=' +this.type + '&arid=' + this.serItem.objid
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.muserItem{
		padding: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		// margin-bottom: 20upx;
		position: relative;
		.shade{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			border-radius: 20upx;
			background-color: rgba(0,0,0,0.3);
			.shadeItem{
				padding-top: 40upx;
				margin: auto;
				text-align: center;
				image{
					width: 66upx;
					height: 66upx;
					
				}
			}
		}
		.imgbnox{
			width: 160upx;
			height: 160upx;
			border-radius: 20upx;
			position: relative;
			margin-right: 30upx;
			.logo{
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
			}
			.stateTag{
				width: 100upx;
				height: 40upx;
				
				opacity: 1;
				border-radius: 20upx 0upx 20upx 0upx;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 24upx;
				color: #FFFFFF;
				line-height: 40upx;
				text-align: center;
			}
		}
		.content{
			flex: 1;
			.tags{
				padding: 10upx 0 20upx;
				height: 42upx;
				overflow: hidden;
				.tag-item{
					padding: 0 10upx;
					height: 32upx;
					background-color: #EEEEEE;
					color: #999999;
					font-size: 20upx;
					border-radius: 6upx;
					line-height: 32upx;
					text-align: center;
					display: inline-block;
					margin-right: 10upx;
				}
			}
			.prices{
				padding-top: 10upx;
			}
		}
		.more{
			width: 50upx;
			height: 160upx;
			position: relative;
			image{
				width: 50upx;
				height: 50upx;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
</style>
