<template>
  <view class="page-product-receipt">
    <!--  页面头  -->
    <page-head title="批量生产领料" />

    <!--  查询条件  -->
    <u-form class="queryFrom" ref="queryFrom" label-width="180rpx">
      <u-form-item label="领料单">
        <u-search placeholder="请扫描" v-model="queryParams.code" @search="query" :show-action="false"></u-search>
      </u-form-item>
    </u-form>

    <!--  列表  -->
    <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }"  :lower-threshold="50">
      <!--  列表  -->
      <u-form class="page-list">
        <view class="page-list-item" v-for="item in list" :key="item.id">
          <lj-list-row label="领料单:" :value="item.produceCode" />
          <lj-list-row label="物料编码:" :value="item.materialCode" />
          <lj-list-row label="物料名称:" :value="item.materialDesc" />
          <view style="display: flex">
            <lj-list-row style="width: 50%" label="应出:" :value="item.planNumber" />
            <lj-list-row style="width: 50%" label="已出:" :value="item.outNumber" />
          </view>
          <view style="display: flex">
            <lj-list-row style="width: 50%" label="未出:" :value="parseFloat(item.planNumber) - parseFloat(item.outNumber)" />
            <lj-list-row style="width: 50%" label="单位:" :value="item.unit" />
          </view>
          <lj-list-row v-if="item.userDefined10 !== '2'" type="picker" label="是否过账:" :disabled="item.userDefined10 === '2'" :value.sync="item.isPost" :pickerOptions="pickerOptions" />
          <lj-list-row v-if="item.userDefined10 === '2'" label="过账状态:" :value="'已过账'" />
          <lj-list-row label="物料凭证:" :value="item.userDefined9 || '无'" />
          <lj-list-row v-if="item.userDefined10 !== '2'" type="input" label="出账数量" :value.sync="item.qty" />

        </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="submit">确认出库</u-button>
        </u-col>
      </u-row>
    </view>

  </view>
</template>

<script lang="ts">

import {Component} from "vue-property-decorator";
import PageHead from "@/components/lanju/page-head/index.vue";
import {BasePage} from "@/components/base/page";
import LjListRow from "@/components/lanju/lj-list-row/index.vue";
import {session} from "@/store/modules/session";
import {getBatchProductionMaterialList, submitTransferMaterialList} from "@/pages/wms/Raw/ProductionREQ2/model";

interface QueryParams {
  code: string;
  productDate: string;
  type: string;
  factoryCode: string;
  operator: string;
}

@Component({
  components: {LjListRow, PageHead}
})

export default class Index extends BasePage {

  queryParams: QueryParams  = {
    code:undefined,
    productDate:undefined,
    type:undefined,
    factoryCode: session.FactoryCode,
    operator: session.userName,
  };

  listHeight = 500

  list = []

  pickerOptions: any = [
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },

  ];

  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();
    });
  }

  query(){

    if (!this.queryParams.code){
      uni.showToast({
        title: '请输入领料单号！',
      })
      return;
    }

    if (!this.queryParams.code.includes("ZC")){
      uni.showToast({
        title: '请输入正确的领料单号！',
      })
      return;
    }

    const code = this.queryParams.code.split("_")
    this.queryParams.productDate = code[1]
    this.queryParams.type = code[0]
    console.log(this.queryParams)

    getBatchProductionMaterialList(this.queryParams).then(res=>{
      this.list = res.data
    })


  }

  submit(){

    if (!this.queryParams.code){
      uni.showToast({
        title: '请输入领料单号！',
      })
      return;
    }

    if (!this.queryParams.code.includes("ZC")){
      uni.showToast({
        title: '请输入正确的领料单号！',
      })
      return;
    }

    const list = []

    //遍历列表
    //获取需要过账列表与出账列表
    for (const item of this.list){
      if (item.isPost + "" === "1"){
        list.push(item)
        continue;
      }
      if ( item.qty && parseInt(item.qty) > 0){
        list.push(item)
      }
    }

    const data = {
      createBy:session.userName,
      factoryCode:session.FactoryCode,
      orderList:list,
      userDefined3:"ZC"
    }

    submitTransferMaterialList(data).then(res=>{
      if (res.code === 200){
        uni.showToast({
          title: '操作成功！',
          mask:true
        })

      }else {
        uni.showToast({
          title: '操作失败！',
          mask:true
        })
      }
      setTimeout(()=>{
        this.query()
      },1500)
    })

  }

}
</script>

<style scoped lang="scss">


</style>