<template>
  <view class="page-product-receipt">
    <view class="header" :style="{ backgroundColor: `rgba(250, 53, 52, ${scrollTop / 100})` }">
      <view class="left">
        <u-icon class="icon" name="arrow-left" @click="uni.navigateBack({})" />
      </view>
      <view class="title">到货登记记录</view>
      <view class="right"></view>
    </view>
    <view class="fiexdcontent">
      <u-form class="form" ref="form" label-width="80rpx">
        <u-form-item label="时间" prop="name">
          <view style="display: flex; flex-direction: row; justify-content: space-between; width: 100%">
            <picker mode="date" :value="startdate" @change="startchange">
              <view class="uni-input">{{ startdate }}</view>
            </picker>
            <view> 至 </view>
            <picker mode="date" :value="enddate" @change="endchange">
              <view class="uni-input">{{ enddate }}</view>
            </picker>
          </view>
          <uni-icons type="closeempty" size="20" @click="mepty"></uni-icons>

          <!-- <button size="default" type="default" @click="mepty">重制</button> -->
        </u-form-item>
        <u-form-item label="物料号" prop="name">
          <jPicker sureColor="#ff0000" @bindpicker="selectMattCodeType" showKey="label" valKey="value" :val="aimWl.value" :options="matlist" />

          <!-- <u-input placeholder="请输入物料号" v-model="materialCode" /> -->
        </u-form-item>
        <u-form-item label="采购单" prop="name">
          <jPicker sureColor="#ff0000" @bindpicker="selectProductCodeType" showKey="value" valKey="value" :val="bimWl.value" :options="prodlist" />

          <!-- <u-input placeholder="请输入单号" v-model="procureCode" /> -->
        </u-form-item>
      </u-form>
    </view>
    <view class="scroll">
      <view v-for="item in receivedlist" :key="item.id" @dblclick="onFormDoubleClick(item)">
        <u-form style="margin-top: 10rpx" class="form2">
          <view class="list">
            <!-- <view class="righttitle">
              <view class="boder-icon-top zhuangtai" data-state="0">已收货</view>
            </view> -->
            <view class="row-list">
              <view class="list-item"> 采购单号: </view>
              <view> {{ item.procureCode }} </view>
            </view>
            <view class="row-list">
              <view class="list-item"> 物料编码: </view>
              <view> {{ item.materialCode }}</view>
            </view>
            <view class="row-list">
              <view class="list-item"> 物料描述: </view>
              <view>{{ item.materialDesc }}</view>
            </view>
            <view class="row-list">
              <view class="list-item"> 计划数量: </view>
              <view>{{ item.planNumber }}</view>
            </view>
            <view class="row-list">
              <view class="list-item"> 登记数量: </view>
              <view>{{ item.operationNumber }}</view>
            </view>
            <view class="row-list">
              <view class="list-item"> 时间: </view>
              <view>{{ item.lastUpdateDate }}</view>
            </view>
          </view>
        </u-form>
      </view>
    </view>
    <!-- <view style="height: 14rpx"></view> -->
    <view class="bottom-bar">
      <u-row class="button-bar">
        <!-- 确定 -->
        <u-col :span="6">
          <u-button @click="onSubmit" type="primary">查询</u-button>
        </u-col>
        <!-- 返回 -->
        <u-col :span="6">
          <u-button type="error" @click="uni.navigateBack({})">返回</u-button>
        </u-col>
      </u-row>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import { BasePage } from '@/components/base/page';
import { session } from '@/store/modules/session';
import jPicker from '@/components/J-Picker/jPicker.vue';
import model from './model';
import dayjs from 'dayjs';
//import { session } from '@/store/modules/session';
@Component({
  components: {
    jPicker,
    //MxDatePicker
  },
})
export default class ArrivalRecord extends BasePage {
  model = model;
  startdateValue = dayjs().format('YYYY-MM-DD');
  startdate = dayjs().format('YYYY-MM-DD');
  enddate = dayjs().format('YYYY-MM-DD');
  procureCode = '';
  materialCode = '';
  receivedlist = [];
  border = true;
  aimWl: any = {};
  bimWl: any = {};
  matlist = [];
  prodlist = [];

  startchange(e) {
    this.startdate = e.detail.value;
    this.materialCode = '';
    this.procureCode = '';
    this.aimWl = {};
    this.bimWl = {};
  }
  endchange(e) {
    this.enddate = e.detail.value;
    this.materialCode = '';
    this.procureCode = '';
    this.aimWl = {};
    this.bimWl = {};
  }
  selectMattCodeType(e) {
    this.materialCode = e.pickerName.value;
    this.aimWl = e.pickerName;
    this.bimWl = {};
    this, (this.procureCode = '');
    this.onSubmit();
  }
  selectProductCodeType(e) {
    this.procureCode = e.pickerName.value;
    this.bimWl = e.pickerName;
    this.onSubmit();
  }
  async onSubmit() {
    // if (this.procureCode == '' || this.procureCode.length == 0) {
    //   (this.$refs.uToast as any).show({
    //     title: '请输入采购单号',
    //     type: 'default',
    //   });
    //   return;
    // }
    let params = {
      factoryCode: session.FactoryCode,
      ...(this.materialCode !== '' && { materialCode: this.materialCode }),
      ...(this.procureCode !== '' && { procureCode: this.procureCode }),
      // procureCode:this.procureCode,
      ...(this.startdate !== '请选择' && { lastUpdateDateMIN: this.startdate }),
      ...(this.enddate !== '请选择' && { lastUpdateDateMAX: this.enddate }),
    };
    await this.model.getArrivalRecord(params);
    if (this.model.responseCode == '200') {
      let showlist = model.responseData;

      if (this.materialCode == '' && this.procureCode == '') {
        this.receivedlist = showlist.map((item) => {
          let newmaterialCode = item.materialCode.slice(item.materialCode.search(/[1-9]/));
          return {
            ...item,
            materialCode: newmaterialCode,
          };
        });

        let uniqueMaterialCodes = {}; // 用于跟踪唯一的materialCode

        this.matlist = showlist
          .filter((item) => {
            // 检查newmaterialCode是否已经在uniqueMaterialCodes中
            if (!uniqueMaterialCodes[item.materialCode]) {
              // 如果不在，将其添加到uniqueMaterialCodes中，并返回true以保留在filter结果中
              uniqueMaterialCodes[item.materialCode] = true;
              return true;
            }
            // 如果已经在uniqueMaterialCodes中，返回false以从filter结果中排除
            return false;
          })
          .map((item) => {
            // 对于filter后保留的项，进行映射操作
            // let newmaterialCode = item.materialCode.slice(item.materialCode.search(/[1-9]/));
            return {
              ...item,
              value: item.materialCode,
              label: item.materialDesc,
            };
          });
      }
      if (this.materialCode != '' && this.procureCode == '') {
        this.receivedlist = showlist.map((item) => {
          let newmaterialCode = item.materialCode.slice(item.materialCode.search(/[1-9]/));
          return {
            ...item,
            materialCode: newmaterialCode,
          };
        });
        let uniqueprocureCode = {}; // 用于跟踪唯一的materialCode
        this.prodlist = showlist
          .filter((item) => {
            if (!uniqueprocureCode[item.procureCode]) {
              uniqueprocureCode[item.procureCode] = true;
              return true;
            }
            return false;
          })
          .map((item) => {
            return {
              ...item,
              value: item.procureCode,
              label: item.procureCode,
            };
          });
      }
      if (this.materialCode != '' && this.procureCode != '') {
        this.receivedlist = showlist.map((item) => {
          let newmaterialCode = item.materialCode.slice(item.materialCode.search(/[1-9]/));
          return {
            ...item,
            materialCode: newmaterialCode,
          };
        });
      }
    }
  }
  mepty() {
    this.startdate = '请选择';
    this.enddate = '请选择';
    this.materialCode = '';
    this.procureCode = '';
    this.aimWl = {};
    this.bimWl = {};
    this.receivedlist = [];
    //this.startdateValue = dayjs().format('YYYY-MM-DD');
    //this.model.mepty();
  }
}
</script>
<style>
body {
  background-color: rgb(242, 242, 242);
}
</style>
<style lang="scss" scoped>
.page-product-receipt {
  background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #f8262c 51%, #d9001b 100%) no-repeat;
  background-size: 100% 600rpx;
  padding: 118rpx 30rpx 162rpx;
  min-height: 100%;

  .header {
    position: fixed;
    top: 0rpx;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    height: 120rpx;
    line-height: 88rpx;
    color: #fff;
    font-size: 34rpx;
    font-weight: 500;
    text-align: center;
    padding: 45rpx 0rpx 0rpx;

    .title {
      flex: 3;
    }

    .left,
    .right {
      flex: 1;
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 88rpx;
      height: 88rpx;
    }
  }

  .fiexdcontent {
    position: fixed;
    width: 92%;
    box-shadow: 0 0 14px 0 rgb(128 128 128 / 46%);
    z-index: 100;
  }
  .form {
    background-color: #fff;
    padding: 15rpx;
    border-radius: 10rpx;
    //box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);

    .u-form-item {
      padding: 20rpx 0;
      line-height: 35rpx;

      .Transfer {
        width: 280rpx;
        height: 64rpx;
        background: rgb(242, 242, 242);
        border-radius: 110rpx;
      }
    }

    .single {
      width: 100%;
      height: 60rpx;
      display: flex;

      .single-left {
        width: 100%;
        height: 100%;
        display: flex;

        view {
          width: 190rpx;
          height: 100%;
          line-height: 55rpx;
        }
      }

      .single-right {
        button {
          // margin-top: 15rpx;
          width: 140rpx;
          height: 70rpx;
          background-color: #fa3534;
        }
      }
    }

    .row {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex: 1;
    }
  }

  .scroll {
    // margin-top: 2rpx;
    height: 780rpx;
    position: absolute;
    width: 92%;
    top: 444rpx;
    /* bottom: 40px; */
    overflow: auto;
    // background-color: #f2f2f2;
    .form2 {
      background-color: #fff;
      padding: 20rpx 20rpx 20rpx;
      border-radius: 10rpx;
      box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
      color: #8d8989;
      .list {
        // display: flex;
        // flex-direction: cloumn;

        .row-list {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .list-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 40%;
          }
        }
      }
    }
  }

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

  .button-bar {
  }
}
</style>
