<template>
	<!-- #ifdef H5 -->
	<zj-page-layout>

    <template v-if="leftList.length > 0">
      <template slot="header">
        <view class="header-container">请选择要回收的电器</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">
          <view class="list-container">
            <view class="title">二级分类</view>
            <view class="list">
              <block v-for="(item, index) in rightList" :key='index'>
              	<view class="item" @tap="clickCategory(item)">
              		<image :src="item.imgUrl" mode="aspectFit"></image>
              		<text class="name ellipsis">{{item.name}}</text>
              	</view>
              </block>
              <Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" />
            </view>
          </view>
      	</view>
      </view>
    </template>

    <view class="empty" v-else>
      <Loading :type="2" :loadStatus="2" :dataList="leftList" showText="未配置以旧换新规则，请联系客服" />
    </view>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageGoods/pages/tradein/category`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

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

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

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

			// 获取二级菜单
			getRightList() {
				this.loadStatus = 1;
        this.rightList = [];
        let item = this.leftList.find(o => o.categoryId == this.leftCurrent);
        if(item?.children?.length > 0) {
          this.loadStatus = 0;
          this.rightList = item.children;
        }else {
          this.loadStatus = 2;
        }
			},

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

      // 点击二级分类
			clickCategory(item) {
				this.$navToPage({
          url: `/packageGoods/pages/tradein/form?pid=${this.leftCurrent}&cid=${item.categoryId}&cname=${item.name}&cimg=${item.imgUrl}`
				}, 'redirectTo')
			},

		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
	.header-container {
		background: #ffffff;
	  padding: 20rpx;
    font-weight: 500;
	}
	.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 {
      flex: 1;
			max-height: calc(100% - 20rpx);
			overflow-y: scroll;
			box-sizing: border-box;
      padding: 20rpx;
      .list-container {
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 20rpx;
        .title {
          font-weight: 600;
          margin-bottom: 20rpx;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          .item {
          	display: flex;
          	flex-direction: column;
          	align-items: center;
          	margin-right: 20rpx;
          	margin-top: 20rpx;
          	width: calc((100% - 40rpx) / 3);
          	font-size: 24rpx;
          	image {
          		width: 100%;
          		height: 140rpx;
          		margin-bottom: 8rpx;
          	}
          	.name {
          		width: 150rpx;
          		text-align: center;
          	}
          	&:nth-child(3n) {
          		margin-right: 0;
          	}
          }
        }
      }
		}
	}
</style>
