<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>

    <!--  列表  -->
    <view class="scroll">
      <view v-for="item in sapStockList" :key="item.id">
        <u-form style="margin-top: 10rpx" class="form2">
          <view>
            <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>
      </view>
    </view>

    <!--  按钮  -->
    <view class="bottom-bar">
      <u-row class="button-bar">
        <view style="position: absolute; bottom: 120rpx; width: 90%">
          <lj-pagination :total="total" :currentPage="queryParams.pageNum" @change="changePage"></lj-pagination>
        </view>
        <u-col :span="12">
          <u-button type="primary" @click="search">查询</u-button>
        </u-col>
      </u-row>
    </view>
  </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 model from './model';
import { removeLeadingZeros } from '@/utils/tool';
import ljPagination from '@/components/lanju/lj-pagination/index.vue';

interface QueryParamsPo {
  matnr: string;
  maktx: string;
  pdaSearch: '1';
  pageNum: 1;
  pageSize: 10;
}

interface SapStockPo {
  materialCode: string;
  materialDesc: string;
  storageAmount: string;
}

@Component({
  methods: { removeLeadingZeros },
  components: {
    ljPagination,
    LjListRow,
    LjRowList,
    jPicker,
    PageHead,
  },
})
export default class sapStockPo extends BasePage implements SapStockPo {
  materialCode: string;
  materialDesc: string;
  storageAmount: string;
  model = model;
  queryParams: QueryParamsPo = {
    matnr: undefined,
    maktx: undefined,
    pdaSearch: '1',
    pageNum: 1,
    pageSize: 10,
  };
  sapStockList: any[] = [];
  total = 0;

  async search() {
    this.queryParams.pageNum = 1;
    this.getList();
  }

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

  onLoad() {
    this.getList();
  }

  async getList() {
    await this.model.getSapStockList(this.queryParams);
    this.sapStockList = this.model.rows;
    this.total = this.model.total;
  }

  removeLastZeros(data: any) {
    if (data) {
      return Number(data).toFixed(2);
    }
    return data;
  }
}
</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;
  }
}

.scroll {
  height: 100%;
  overflow: scroll;

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

.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>
