<template>
  <view class="page-product-receipt">
    <!--  页面头  -->
    <page-head title="105过账" />

    <!--  查询条件  -->
    <u-form id="query" class="query" ref="query" label-width="180rpx">
      <u-form-item label="物料编码">
        <u-search placeholder="请输入物料编码" v-model="queryParams.materialCode" @search="search" :show-action="false"></u-search>
      </u-form-item>
      <u-form-item label="物料名称">
        <u-search placeholder="请输入物料名称" v-model="queryParams.materialDesc" @search="search" :show-action="false"></u-search>
      </u-form-item>
      <u-form-item label="送货单号">
        <u-search placeholder="请输入送货单号" v-model="queryParams.orderNo" @search="search" :show-action="false"></u-search>
      </u-form-item>
      <u-form-item label="采购单号">
        <u-search placeholder="请输入采购单号" v-model="queryParams.poNo" @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">
        <u-checkbox-group v-if="list.length > 0">
          <u-checkbox class="list-item" v-for="(item, index) in list" :key="index" v-model="item.checked">
            <view style="margin-left: 20rpx">
              <lj-list-row label="物料编码:" :value="removeLeadingZeros(item.materialCode)" />
              <lj-list-row label="物料名称:" :value="item.materialDesc" />
              <lj-list-row label="送货单号:" :value="item.orderNo" />
              <lj-list-row label="采购单号:" :value="item.poNo" />
            </view>
          </u-checkbox>
        </u-checkbox-group>
        <view v-else> 暂无数据 </view>
      </u-form>
    </scroll-view>

    <!--  按钮  -->
    <view id="button" class="bottom-bar">
      <u-row class="button-bar">
        <u-col :span="12">
          <u-button type="success" @click="onSubmit105()">105过账</u-button>
        </u-col>
      </u-row>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script lang="ts">
import LjListRow from '@/components/lanju/lj-list-row/index.vue';
import { Component } from 'vue-property-decorator';
import PageHead from '@/components/lanju/page-head/index.vue';
import { BasePage } from '@/components/base/page';
import { getWmsRawOrderInListToPda, sap105temporarilyCollected } from './model';
import { removeLeadingZeros } from '@/utils/tool';

interface QueryParamsPo {
  materialCode: string;
  materialDesc: string;
  orderNo: string;
  poNo: string;
  pageNum: number;
  pageSize: number;
}

interface ListVo {
  materialCode: string;
  materialDesc: string;
  userDefined1: string;
  rawOrderInId: string;
  poNo: string;
  orderNo: string;
  checked: boolean;
}

@Component({
  methods: { removeLeadingZeros },
  components: { PageHead, LjListRow },
})
export default class TemporarilyCollectedPo extends BasePage {
  materialCode: string;
  materialDesc: string;
  storageAmount: string;
  queryParams: QueryParamsPo = {
    materialCode: undefined,
    materialDesc: undefined,
    orderNo: undefined,
    poNo: undefined,
    pageNum: 1,
    pageSize: 10,
  };
  total: any = 0;
  listHeight = 500;
  list: Array<ListVo> = [];
  value = 'orange';
  onLoad() {
    this.getList();
  }
  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 getList() {
    await getWmsRawOrderInListToPda(this.queryParams).then((res) => {
      this.total = res.total;
      this.list = res.rows;
    });
  }

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

  onScrollToLower() {
    if (this.total === this.list.length) {
      return;
    }
    this.queryParams.pageNum = this.queryParams.pageNum + 1;
    getWmsRawOrderInListToPda(this.queryParams).then((res) => {
      this.list = this.list.concat(res.rows);
    });
  }

  onSubmit105() {
    const checkedList = [];
    for (const item of this.list) {
      //选中的数据
      if (item.checked) {
        checkedList.push({ id: item.rawOrderInId });
      }
    }
    if (checkedList.length > 0) {
      sap105temporarilyCollected(checkedList).then((res) => {
        (this.$refs.uToast as any).show({
          title: res.msg,
          type: 'success',
        });
        this.search();
      });
    } else {
      (this.$refs.uToast as any).show({
        title: '未选择数据',
        type: 'default',
      });
    }
  }
}
</script>

<style scoped lang="scss">
.query {
  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;
  }
}

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

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

::v-deep .u-checkbox__label {
  width: 100% !important;
}
::v-deep .list-item {
  width: 100% !important;
}
</style>
