<template>
	<view class="omemaking" @click="navindex">
		<view class="omemaking-img">
			<image :src="items.logo" mode=""></image>
		</view>
		<view class="omemaking-content flex-box">
			<view class="f-28 col-3 f-w dis-flex">
				<view class="flex-box">
					{{items.name}}
				</view>
				<image :src="imgfixUrls +'homemakingImg/dunpai.png'" v-if="items.is_authentication == 1" mode=""></image>
				<image :src="imgfixUrls +'homemakingImg/yaoqian.png'" v-if="items.is_bond == 1" mode=""></image>
			</view>
			<view class="p-top-10 omemaking-tags">
				<view class="omemaking-tags-item" v-for="(item,index) in items.label">
					{{item}}
				</view>
			</view>
			<view class="dis-flex f-24 col-3 p-top-20">
				<view class="address">
					{{items.address}}
				</view>
				<view class="flex-box t-r" v-if="items.distances">
					{{items.distances}}
				</view>
			</view>
			<view class="service-item" v-for="(item,index) in items.service" @click.stop="navlink(item.id)">
				<view class="dis-flex t-l f-24 col-3" style="line-height: 45upx;">
					<image v-if="item.thumb" :src="item.thumb" mode=""></image>
					{{item.title}}
				</view>
				<view class="dis-flex p-top-20">
					<view class="c-ff4444" style="width: 350upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
						<text class="f-24" v-if="item.pricetype == 0"></text>
						<text class="f-24" v-if="item.pricetype == 1">预约金￥</text>
						<text class="f-24" v-if="item.pricetype == 2">￥</text>
						<text class="f-28 f-w" v-if="item.pricetype == 0">{{item.price_text}}</text>
						<text class="f-28 f-w" v-else>{{item.price}}</text>
						<text class="f-24" v-if="item.unit">/{{item.unit}}</text>
					</view>
					<view class="flex-box col-9 f-24 t-r" style="line-height: 50upx;">
						已售{{item.salenum}}
					</view>
				</view>
			</view>
			<!-- <view class="f-24 t-r" style="padding-top: 20upx;border-top: 1upx solid #EEEEEE;" >
				全部服务
			</view> -->
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	export default{
		data(){
			return{
				
			}
		},
		props:{
			items:{
				type:Object,
				default:{}
			}
		},
		watch:{
			'items': {
				handler(val,oldVal) {
					// debugger
				},
				deep: true, //对象内部的属性监听，也叫深度监听
			}
		},
		methods:{
			navlink(id){
				App.navigationTo({
					url: "pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=" + id
				});
			},
			navindex(){
				if(!this.items.mid){
					App.navigationTo({
						url: "pages/mainPages/store/index?sid=" + this.items.id
					});
				}else{
					App.navigationTo({
						url: "pages/subPages2/homemaking/homepersonalCenter/homepersonalCenter?mid=" + this.items.mid + '&id=' + this.items.id
					});
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.omemaking{
		background-color: #FFFFFF;
		display: flex;
		margin-bottom: 20upx;
		padding: 20upx;
		border-radius: 20upx;
		.omemaking-img{
			width: 140upx;
			height: 140upx;
			border-radius: 20upx;
			margin-right: 30upx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
		}
		.omemaking-content{
			image{
				width: 32upx;
				height: 32upx;
				vertical-align: top;
				margin-top: 4upx;
				margin-left: 10upx;
			}
			.address{
				width: 350upx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行

			}
		}
		.omemaking-tags{
			height: 50upx;
			overflow: hidden;
			.omemaking-tags-item{
				// width: 100upx;
				height: 32upx;
				line-height: 32upx;
				text-align: center;
				background-color: #EEEEEE;
				color: #999999;
				font-size: 20upx;
				padding: 0 10upx;
				border-radius: 6upx;
				margin-right: 10upx;
				margin-bottom: 10upx;
				display: inline-block;
			}
			
		}
		.service-item{
			padding: 20upx 0 0;
			border-top: 1upx solid #EEEEEE;
			margin-top: 20upx;
			image{
				width: 40upx;
				height: 40upx;
				margin-right: 20upx;
				border-radius: 6upx;
			}
		}
	}
</style>
