<template>
  <!-- #ifdef H5 -->
	<zj-page-layout>
	  <template slot="header">
	    <view class="search-container">
	      <u-search
	        shape="round"
	        :showAction="false"
	        placeholder="输入分类名称进行搜索"
	        v-model="keyword"
	        @search="getRightList"
	        @clear="clearSearch">
	      </u-search>
	    </view>
	  </template>

		<view class="main-container">
			<view class="left">
				<block v-for="(item, index) in leftList" :key='index'>
					<view class="item ellipsis" :class="leftCurrent == item.categoryId ? 'current':''" @tap="changeLeft(item.categoryId)">{{item.name}}</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item, index) in rightList" :key='index'>
					<view class="item" @tap="submitChoess(item)">
						<image :src="item.categoryUrl" mode="aspectFill"></image>
						<view style="flex: 1;">
							<view class="name">{{item.name}}</view>
							<view class="name remark">{{item.repairRemark}}</view>
							<view class="name price">
								<view class="new">￥{{item.leasePrice}}/月</view>
								<view class="old"><s>￥{{item.oldPrice}}/月</s></view>
							</view>
						</view>
					</view>
				</block>
				<Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" />
			</view>
		</view>

	</zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/service/classify`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				keyword: '',
				leftList: [],
				leftCurrent: 0,
				rightList: [],
        loadStatus: 0,
			}
		},

		onLoad() {
			this.getLeftList();
		},

		methods: {
			// 获取一级菜单
			getLeftList() {
				this.$api.post('/goods/lease/category/list',{
					
				}).then(res => {
					this.leftList = res.data;
					this.leftCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
					this.getRightList();
				})
			},

			// 获取二级菜单
			getRightList() {
				this.loadStatus = 1;
				this.$api.post('/goods/lease/list/page', {
					categoryId: this.leftCurrent,
					name: this.keyword,
					pageNum: 1,
					pageSize: -1
				}).then(res => {
					this.loadStatus = 0;
					let list = res.data.records;
					if(list.length < 1){
						this.loadStatus = 2;
					}
					this.rightList = list;
				}).catch(() => {
					this.loadStatus = 2;
				})
			},

			// 切换一级菜单
			changeLeft(pid) {
				this.leftCurrent = pid;
				this.getRightList();
			},

			// 搜索
			clearSearch() {
				console.log(111)
				this.keyword = ''
				this.getRightList();
			},

			submitChoess(item) {
				this.$navToPage({
				  url: `/packageHome/pages/service/tenancyDetail?id=${item.id}`
				})
			}
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss">
	.search-container {
		background: #ffffff;
	  padding: 0 20rpx 20rpx;
		::v-deep .u-search {
			height: 60rpx;
	    input {
	      background: #F7F8FF !important;
	    }
			.u-search__content {
	      background: #F7F8FF !important;
				height: 60rpx;
			}
		}
	}
	.main-container {
		display: flex;
		height: calc(100vh - 88rpx);
		.left {
			width: 220rpx;
			height: 100%;
			overflow-y: scroll;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			flex-shrink: 0;
			.item {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				color: #333333;
				line-height: 48rpx;
				border-radius: 48rpx;
				text-align: center;
				&.current {
					color: #FFFFFF;
					background: $theme-color;
				}
			}
		}
		.right {
			width: 500rpx;
			max-height: calc(100% - 20rpx);
			overflow-y: scroll;
			margin-left: 14rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			.item {
				display: flex;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-top: 20rpx;
				width: 100%;
				font-size: 24rpx;
				line-height: 34rpx;
				box-sizing: border-box;
				image {
					width: 140rpx;
					height: 140rpx;
					margin-bottom: 5rpx;
					margin-right: 20rpx;
				}
				&:nth-child(3n) {
					margin-right: 0;
				}
				.remark{
					width: 100%;
					font-size: 28rpx;
					color: #59a7ff;
					margin: 20rpx 0;
				}
				.price{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.new{
						font-size: 30rpx;
						color: #ff6f2a;
					}
					.old{
						font-size: 26rpx;
						color: #aeaeae;
					}
				}
			}
		}
	}
</style>
