<template>
  <view class="page-product-receipt">
    <!--  页面头  -->
    <page-head title="实时库存" />

    <!--  查询条件  -->
    <u-form class="form" ref="form" label-width="180rpx">
      <u-form-item label="物料编码">
        <u-search placeholder="请输入物料编码" v-model="queryParams.matnr" @search="search" :show-action="false"></u-search>
      </u-form-item>
      <u-form-item label="物料名称">
        <u-search placeholder="请输入物料名称" v-model="queryParams.maktx" @search="search" :show-action="false"></u-search>
      </u-form-item>
    </u-form>

    <!--  列表  -->
    <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }" @scrolltolower="onScrollToLower" :lower-threshold="50">
      <!--  列表  -->
      <u-form class="list">
        <view class="list-item" v-for="item in sapStockList" :key="item.id">
          <lj-list-row label="物料编码:" :value="removeLeadingZeros(item.matnr)" />
          <lj-list-row label="物料名称:" :value="item.maktx" />
          <lj-list-row label="非限制库存:" :value="removeLastZeros(item.clabs)" />
          <lj-list-row label="冻结库存:" :value="removeLastZeros(item.cspem)" />
        </view>
      </u-form>
    </scroll-view>

    <!--  按钮  -->
    <view id="button" class="bottom-bar">
      <u-row class="button-bar">
        <u-col :span="12">
          <u-button type="primary" @click="search">查询</u-button>
        </u-col>
      </u-row>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script lang="ts">
import PageHead from '@/components/lanju/page-head/index.vue';
import { BasePage } from '@/components/base/page';
import { Component } from 'vue-property-decorator';
import jPicker from '@/components/J-Picker/jPicker.vue';
import LjRowList from '@/components/lanju/lj-list-row/index.vue';
import LjListRow from '@/components/lanju/lj-list-row/index.vue';
import { getSapStockList } from './model';
import { removeLeadingZeros } from '@/utils/tool';
import ljPagination from '@/components/lanju/lj-pagination/index.vue';

interface QueryParamsPo {
  matnr: string;
  maktx: string;
  pdaSearch: string;
  pageNum: number;
  pageSize: number;
}

@Component({
  methods: { removeLeadingZeros },
  components: {
    ljPagination,
    LjListRow,
    LjRowList,
    jPicker,
    PageHead,
  },
})
export default class sapStockPo extends BasePage {
  materialCode: string;
  materialDesc: string;
  storageAmount: string;
  queryParams: QueryParamsPo = {
    matnr: undefined,
    maktx: undefined,
    pdaSearch: '1',
    pageNum: 1,
    pageSize: 10,
  };
  sapStockList: any[] = [];
  total = 0;
  listHeight = 500;
  onReady() {
    //等待页面加载完成
    this.$nextTick(() => {
      let buttonTop = 0;
      //获取底部按钮信息
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#button')
        .boundingClientRect((data) => {
          //获取底部按钮到顶部距离
          buttonTop = data.top;
        })
        .exec();
      //获取列表信息
      query
        .select('#list')
        .boundingClientRect((data) => {
          //获取列表到顶部距离
          const listTop = data.top;
          //
          this.listHeight = buttonTop - listTop - 10;
        })
        .exec();
    });
  }
  async search() {
    this.queryParams.pageNum = 1;
    this.getList();
  }

  //换页
  changePage(e: any) {
    this.queryParams.pageNum = e;
    this.getList();
  }

  onLoad() {
    this.getList();
  }

  getList() {
    getSapStockList(this.queryParams).then((res) => {
      if (res.total === 0) {
        uni.showModal({
          title: '提示',
          content: '未查询到该物料，或该物料库存为0',
          confirmText: '确认',
          showCancel: false,
        });
      }
      this.sapStockList = res.rows;
      this.total = res.total;
    });
  }

  removeLastZeros(data: any) {
    if (data) {
      return Number(data).toFixed(2);
    }
    return data;
  }
  //滚动到底部
  onScrollToLower() {
    if (this.total === this.sapStockList.length) {
      return;
    }
    this.queryParams.pageNum = this.queryParams.pageNum + 1;
    getSapStockList(this.queryParams).then((res) => {
      this.sapStockList = this.sapStockList.concat(res.rows);
    });
  }
}
</script>

<style scoped lang="scss">
.form {
  background-color: #fff;
  margin-top: 10px;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);

  .u-form-item {
    line-height: 35rpx;
  }
}

.list {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 20rpx 25rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
  color: #8d8989;

  .list-item {
    padding: 20rpx;
  }

  /* 奇数行背景色 */
  .list-item:nth-child(odd) {
    background-color: #ffffff;
  }

  /* 偶数行背景色 */
  .list-item:nth-child(even) {
    background-color: #f5f5f5;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #ffffff;
  box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
  padding: 20rpx;
}
</style>
