<template>
  <view class="container" :style="appThemeStyle">
    <!-- 一级分类 -->
    <scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
      <text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">全部</text>
      <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
        @click="handleSelectNav(index)">{{ item.name }}</text>
    </scroll-view>

    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" :bottombar="false" @up="upCallback">
      <view class="cate-content">
        <!-- 设备列表 -->
        <view class="equipment-list">
          <view class="equipment-item--container" v-for="(item, index) in equipmentList.data" :key="index">
            <view class="equipment-item" @click="onTargetEquipment(item.equipment_id)">
              <!-- 设备图片 -->
              <view class="equipment-item_left">
                <image class="image" :src="item.equipment_image"></image>
              </view>
              <view class="equipment-item_right">
                <!-- 设备标题 -->
                <view class="equipment-name">
                  <text class="title">{{ item.equipment_name }}</text>
				  <text class="desc">可租 {{ item.stock_total }} 个</text>
                </view>
                <!-- 设备信息 -->
                <view class="equipment-item_desc">
                  <view class="desc_footer">
                    <view class="item-prices oneline-hide">
                      <text class="price_x">¥{{ item.equipment_price_min }}/月</text>
                      <!-- <text v-if="item.line_price_min > 0" class="price_y">¥{{ item.line_price_min }}</text> -->
                    </view>
					<u-button size="mini" type="warning" @click="onTargetEquipment(item.equipment_id)">立即租用</u-button>
                    <!-- <add-cart-btn v-if="setting.showAddCart" :btnStyle="setting.cartStyle" @click="handleAddCart(item)" /> -->
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 加入购物车组件 -->
        <AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" />
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app'
  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
  import Empty from '@/components/empty'
  import AddCartBtn from '@/components/add-cart-btn'
  import AddCartPopup from '@/components/add-cart-popup'
  import { rpx2px } from '@/utils/util'
  import * as EquipmentApi from '@/api/equipment'
  import storage from '@/utils/storage'

  const pageSize = 15

  export default {
    components: {
      MescrollBody,
      Empty,
      AddCartBtn,
      AddCartPopup
    },
    mixins: [MescrollMixin],
    props: {
      // 分类列表
      list: {
        type: Array,
        default: []
      },
      // 分类设置
      setting: {
        type: Object,
        default: () => {}
      },
	  // 店铺ID
	  shopId:{
		  type: Number,
		  default: 10001
	  },
	  // 设备名称搜索
	  equipmentName:{
		  type: String,
		  default: ''
	  }
    },
    data() {
      return {
        // 枚举类
        PageCategoryStyleEnum,
        // 列表高度
        scrollHeight: 0,
        // 一级分类：指针
        curIndex: -1,
        // 设备列表
        equipmentList: getEmptyPaginateObj(),
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于3条才显示无更多数据
          noMoreSize: 3,
          // 返回顶部
          toTop: { right: 30, bottom: 48, zIndex: 9 }
        }
      }
    },
    created() {
      // 设置分类列表高度
      this.setListHeight()
    },
    methods: {

      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getEquipmentList(page.num)
          .then(list => {
            const curPageLen = list.data.length
            const totalSize = list.data.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },

      /**
       * 获取设备列表
       * @param {Number} pageNo 页码
       */
      getEquipmentList(pageNo = 1) {
        const app = this
        const categoryId = app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
		const { shopId, equipmentName } = this
        return new Promise((resolve, reject) => {
          EquipmentApi.list({ categoryId, page: pageNo, shopId, equipmentName, storeHouseEquipment: true }, { load: false })
            .then(result => {
              const newList = result.data.list
              app.equipmentList.data = getMoreListData(newList, app.equipmentList, pageNo)
              app.equipmentList.last_page = newList.last_page
              resolve(newList)
            })
            .catch(reject)
        })
      },

      // 设置列表内容的高度
      setListHeight() {
        const { windowHeight } = uni.getSystemInfoSync()
        this.scrollHeight = windowHeight - rpx2px(96)
      },

      // 一级分类：选中分类
      handleSelectNav(index) {
        this.curIndex = index
        this.onRefreshList()
      },

      // 刷新列表数据
      onRefreshList() {
        this.equipmentList = getEmptyPaginateObj()
        setTimeout(() => this.mescroll.resetUpScroll(), 120)
      },

      // 跳转设备详情
      onTargetEquipment(equipmentId) {
        this.$navTo('package/equipment/detail', { equipmentId })
      },

      // 点击加入购物车
      handleAddCart(item) {
        this.$refs.AddCartPopup.handle(item)
		this.$emit('addCart')
      },

      // 更新购物车角标
      onUpdateCartTabBadge() {
        console.log('onUpdateCartTabBadge')
        setCartTabBadge()
      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding-left: 173rpx;
  }

  // 分类内容
  .cate-content {
    z-index: 1;
    background: #fff;
    padding-top: 286rpx;
  }

  // 一级分类+二级分类 20
  .cate-left {
    width: 173rpx;
    height: 100%;
    background: #f8f8f8;
    color: #444;

    position: fixed;
    top: calc(286rpx + var(--window-top));
    left: var(--window-left);
    bottom: var(--window-bottom);
  }

  // 左侧一级分类
  .type-nav {
    position: relative;
    height: 90rpx;
    z-index: 10;
    display: block;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.selected {
      background: #fff;
      border-right: none;
      font-size: 28rpx;
      color: $main-bg
    }
  }

  // 设备列表
  .equipment-list {
    background: #fff;
  }

  .equipment-item {
    padding: 28rpx 22rpx;
    display: flex;
  }

  .equipment-item_left {
    position: relative;
    background: #fff;
    margin-right: 20rpx;

    .image {
      display: block;
      width: 180rpx;
      height: 180rpx;
    }
  }

  .equipment-item_right {
    position: relative;
    flex: 1;

    .equipment-name {
      display: flex;
	  flex-direction: column;
      width: 100%;
      min-height: 68rpx;
      font-size: 28rpx;
      line-height: 1.3;
      color: #333;
	  .title{
		  font-weight: bold;
		  font-size: 30rpx;
	  }
	  .desc{
		  color: #666;
		  font-size: 24rpx;
	  }
    }
  }

  .equipment-item_desc {
    margin-top: 20rpx;

    .people {
      margin-right: 14rpx;
    }

    .desc_footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      right: 0rpx;
      bottom: 0rpx;
      min-height: 44rpx;

      .item-prices {
        padding-right: 6rpx;

        .price_x {
          margin-right: 14rpx;
          color: #ff0000;
          font-size: 28rpx;
        }

        .price_y {
          color: #999;
          text-decoration: line-through;
          font-size: 24rpx;
        }
      }

    }
  }
</style>
