<template>
	<view>
		<view class="listBox" :style="info.image ? 'min-height: 340rpx;' : 'min-height: 0'" @click="goDetail">
			<view class="listBox_top" v-if="info.image">
				<view class="" style="margin-right: 24rpx;position: relative;">
					<image :src="info.image" style="width: 202rpx; height: 202rpx;" mode="">
					</image>
					<view class="chuzu" v-if="info.type == 3">
						出租
					</view>
					<view class="chushou" v-else>
						出售
					</view>
				</view>
				<view class="listBox_right" >
					<view class="flexBox">
						<p :class="isBtn ? 'oneh' : ''" :style="isBtn ? 'width: 75%;' : ''" style=" color: #000000e6;font-size: 34rpx;font-weight: 600;">{{ info.brand.name + info.xinghao.name + info.category.name}}</p>
						<view  v-if="isBtn">
							<p style="font-size: 28rpx; color: #3375D8;" v-if="info.status == 2">已发布</p>
							<p style="font-size: 28rpx; color: #3375D8;" v-if="info.status == 1">审核中</p>
							<p style="font-size: 28rpx; color: #E63D27;" v-if="info.status == 3">已拒绝</p>
							<p style="font-size: 28rpx; color: #000000;" v-if="info.status == 4">已关闭</p>
						</view>
					</view>
					<view class="listBox_cont">
						<p class="tips" style="border-right: 1px solid  #00000042; padding: 0 8rpx;">{{info.year || ''}}</p>
						<p class="tips" style="border-right: 1px solid #00000042; padding: 0 8rpx;">{{(info.hours || '0') + '小时'}}</p>
						<p class="tips" style="padding: 0 8rpx;">{{info.category.name}}</p>
					</view>
					<image src="../../static/image/2.png" style="width: 164rpx; height: 44rpx;" mode="" v-if="info.is_license == 1">
					</image>
					<view  style="display: flex; align-items: center; margin-bottom: 8rpx;" >
						<view style="margin:0 5rpx " v-for="item in info.tag_list">
							<u-tag :text="item.name" plain size="mini" type="info"></u-tag>
						</view>
					</view>
					
					<view class=" flexBox" >
						<view class="tips" v-if="isBtn">
							{{info.province}} {{info.province !==''  ? '-' : ''}} {{info.city}} {{info.city !=='' ? '-' : ''}}  距您{{info.distance || '0'}}km
						</view>
						<view class="font" style="justify-content: flex-end; width: 100%;">
							<text>{{info.price}}</text> <text style="font-size: 26rpx;">/月</text>
						</view>
						
					</view>
						
					
				</view>
			</view>
			<view class="noPhoto" v-else>
				<view class="flexBox" style="margin-right: 8rpx;justify-content: space-between">
					<view class="flexBox" style="justify-content: start;">
						<view class="chuzu" style="position: relative;margin-right: 8rpx;" v-if="info.type == 3">
							出租
						</view>
						<view class="chushou"  style="position: relative;margin-right: 8rpx;" v-else>
							出售
						</view>
						<p class="oneh" style=" color: #000000e6;font-size: 34rpx;font-weight: 600;">{{ info.brand.name + info.xinghao.name + info.category.name}}</p>
					</view>
					
					<view class="font" style="justify-content: flex-end;" v-if="info.price">
						<text>{{info.price}}</text> <text style="font-size: 26rpx;">/月</text>
					</view>
				</view>
				<view class="flexBox">
					<image src="../../static/image/2.png" style="width: 164rpx; height: 44rpx;" mode="" v-if="info.is_license == 1">
					</image>
					<view  style="display: flex; align-items: center; margin-bottom: 8rpx;"  v-if="info.tag_list && info.tag_list.length> 0">
						<view style="margin:0 5rpx " v-for="item in info.tag_list">
							<u-tag :text="item.name" plain size="mini" type="info"></u-tag>
						</view>
					</view>
				</view>
				<view class="oneh" style="width: 85%; color: #00000099;font-size: 26rpx;font-weight: 400;" v-if="info.bright">
					{{info.bright}}
				</view>
			</view>
			<view class="line">

			</view>
			<view class="flexBox" v-if="!isBtn" style="padding-bottom: 16rpx;">
					<view class="tips">
						{{info.province}} - {{info.city}} -距您{{info.distance || '0'}}km
					</view>
					<view class="tips">
						{{info.createtime_text}}
					</view>
				
			</view>
			<view class="flexBox" style="justify-content: flex-end !important; padding-bottom: 16rpx; width: 100%;" v-else>
				<view style="display: flex;justify-content: end;">
					<view class="" style="margin-right: 16rpx;">
						<u-button type="info"  size="small" v-if="info.status === 2 || info.status === 1 || info.status === 3" text="关闭信息" @click="close"></u-button>
					</view>
					<view class=""  style="margin-right: 16rpx;"  v-if="info.status === 2">
						<u-button type="primary" size="small"  text="修改信息" @click="goPublish1"></u-button>
					</view>
					<view class="" style="margin-right: 16rpx;" v-if="info.status === 2">
						<u-button type="dark" size="small"    text="设备估价" @click="goPrice()"></u-button>
					</view>
					<view class=""  v-if="info.status === 4" style="margin-right: 16rpx;">
						<u-button type="primary" size="small" text="重新发布" @click="goPublish()"></u-button>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isBtn:{
				type: Boolean,
				default: false
			},
			info:{
				type:Object,
				default: {}
			}
		},
		data() {
			return {

			}
		},
		onLoad() {
		},
		methods: {
			
			goPublish1(){
				uni.navigateTo({
					url:`/pages/sellAndBuy/hire?val=${this.info.type==3 ? 1 : 2}&info=${JSON.stringify(this.info)}`
				})
			},
			goDetail(){
				uni.navigateTo({
					url:`/pages/subPages/detail?id=${this.info.id}`
				})
			},
			goPublish(url){
				uni.navigateTo({
					url:`/pages/sellAndBuy/hire?val=${this.info.type==3 ? 1 : 2}`
				})
			},
			goPrice(){
				uni.navigateTo({
					url:`/pages/price/gusse?info=${JSON.stringify(this.info)}`
				})
				
			},
			close(){
				uni.$u.http.post('/api/equip/close_equip',{
					equip_id: this.info.id
				}).then(res => {
					console.log(res);
					uni.showToast({
						title:res.msg
					})
					this.$emit('close')
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.listBox_top {
		display: flex;
	}

	.listBox_right {
		width: 100%;
	}
	.flexBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tips {
		color: #00000099;
		font-size: 26rpx;
		font-weight: 400;
	}

	.listBox_cont {
		display: flex;
		align-items: center;
		margin: 16rpx 0;
	}

	.font {
		color: #e63d27ff;
		font-size: 40rpx;
		font-weight: 500;
		text-align: right;
	}

	.line {
		height: 1rpx;
		opacity: 1;
		background: #f0f2f5ff;
		margin: 17rpx 0 17rpx 0;
	}

	.listBox {
		border-radius: 8rpx;
		opacity: 1;
		background: #ffffffff;
		margin-bottom: 24rpx;
		padding: 24rpx 24rpx 0 24rpx;
	}
	.oneh{
		 display: inline-block;
		  white-space: nowrap; 
		  width: 85%; 
		  overflow: hidden;
		  text-overflow:ellipsis;
	}
	.chuzu{
		position: absolute;
		top: 0;
		left: 0;
		width: 56rpx;
		height: 32rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		text-align: center;
		color:white;
		line-height: 32rpx;
		opacity: 1;
		background: linear-gradient(143.3deg, #29a9f1ff 0%, #1d6bedff 100%);
	}
	.chushou{
		position: absolute;
		top: 0;
		left: 0;
		width: 56rpx;
		text-align: center;
		font-size: 22rpx;
		line-height: 32rpx;
		color:white;
		height: 32rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: linear-gradient(143.3deg, #f19529ff 0%, #ed681dff 100%);
	}
</style>