<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <!-- <template slot="header">
      <view class="tab-container">
        <u-tabs
          :scrollable="false"
          :list="tabList"
          :current="tabCurrent"
          @click="changeTab"
          lineColor="#3D8FFD"
          :activeStyle="{
            color: '#3D8FFD'
          }"
          :inactiveStyle="{
            color: '#666666'
          }"
          itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;"
        >
        </u-tabs>
      </view>
    </template> -->

    <view
      class="main-container"
      v-if="(tabCurrent === 0 && leftList.length > 0) || (tabCurrent === 1 && rightList.length > 0)"
    >
      <view class="left-list" v-if="tabCurrent === 0">
        <block v-for="(item, index) in leftList" :key="index">
          <view
            class="item ellipsis"
            :class="leftCurrent == item.categoryId ? 'current' : ''"
            @tap="changeLeft(item.categoryId)"
            >{{ item.categoryName }}</view
          >
        </block>
      </view>
      <view class="right-list">
        <block v-for="(item, index) in rightList" :key="index">
          <view class="item" @tap="toStockDetail(item)">
            <view class="left">
              <view class="name">{{ item.goodsName }}</view>
              <view class="text">规格：{{ item.goodsSpecification }}</view>
            </view>
            <view class="right">库存{{ item.qty }}</view>
          </view>
        </block>
        <Loading :type="2" :loadStatus="loadStatus" :dataList="rightList" />
      </view>
    </view>

    <view class="empty-container" v-else>
      <image src="@/packageMaterial/static/empty.jpg" mode="widthFix"></image>
      <view class="text">库存不足，快来补充库存吧～</view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <!-- <block v-if="(tabCurrent === 0 && leftList.length > 0) || (tabCurrent === 1 && rightList.length > 0)"> -->
        <u-button text="购买记录" @click="navToPage(`/packageMaterial/pages/stock/buyRecord`)"></u-button>
        <u-button text="使用记录" @click="navToPage(`/packageMaterial/pages/stock/useRecord`)"></u-button>
        <!-- </block> -->

        <u-button
          type="primary"
          text="去购买"
          @click="navToPage(`/packageMaterial/pages/apply/index?type=${tabCurrent === 0 ? 'M' : 'P'}`)"
        ></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

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

<script>
// #ifdef H5
export default {
  data() {
    return {
      // tabList: [
      // 	{name: '辅材库存', value: 0},
      // 	{name: '配件库存', value: 1},
      // ],
      tabCurrent: 0, // 当前选择值
      leftList: [],
      leftCurrent: 0,
      rightList: [],
      loadStatus: 0,
    }
  },

  onLoad() {
    if(this.tabCurrent === 0) {
      this.getLeftList();
    }else {
      this.getRightList();
    }
  },

  methods: {
    // 获取左侧分类
    getLeftList() {
    	this.$api.post('/material/worker/stock/category/list', {
        goodsType: 'M',
      }).then(res => {
    		this.leftList = res.data;
        if(res.data && res.data.length) {
          this.leftCurrent = res.data[0].categoryId;
          this.getRightList();
        }
    	})
    },

    // 获取右侧产品
    getRightList() {
    	this.loadStatus = 1;
    	this.$api.post('/material/worker/stock/list', {
        goodsType: this.tabCurrent === 0 ? 'M' : 'P',
        categoryId: this.tabCurrent === 0 ? this.leftCurrent : '',
        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();
    },

    changeTab(e) {
      this.leftList = [];
      this.rightList = [];
    	this.tabCurrent = e.value;
      if(this.tabCurrent === 0) {
        this.getLeftList();
      }else {
        this.getRightList();
      }
    },

    toStockDetail(item) {
      this.navToPage(`/packageMaterial/pages/stock/stockDetail?id=${item.id}&goodsId=${item.goodsId}`)
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    }
  },
}

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

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
  padding-bottom: 20rpx;
}
.empty-container {
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 300rpx;
    margin-top: 100rpx;
  }
  .text {
    font-size: 28rpx;
    color: $sec-font;
  }
}
.main-container {
  display: flex;
  height: 100%;
  .left-list {
    width: 220rpx;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    flex-shrink: 0;
    .item {
      font-size: 28rpx;
      color: #333333;
      height: 88rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      &.current {
        color: #ffffff;
        background: $theme-color;
      }
    }
  }
  .right-list {
    flex: 1;
    background: #ffffff;
    background: #ffffff;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 1px solid #f5f5f5;
      .left {
        flex: 1;
        .name {
          font-size: 32rpx;
          font-weight: 500;
        }
        .text {
          font-size: 28rpx;
          color: $sec-font;
          margin-top: 12rpx;
        }
      }
      .right {
        font-size: 28rpx;
        color: $sec-font;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
