<template>
  <view class="page-raw-receipt">
    <view class="header" :style="{ backgroundColor: `rgba(23, 83, 234, ${scrollTop / 100})` }">
      <view class="left">
        <u-icon class="icon" name="arrow-left" @click="back" />
      </view>
      <view class="title">{{ $t('message.SemiProductGetOutOfTheWarehouse') }}</view>
      <view class="right"></view>
    </view>
    <u-form class="form" ref="form" :model="form" :error-type="['toast']" label-width="120rpx">
      <u-row align="top">
        <u-col :span="12">
          <!--          <u-form-item :label="this.$t('message.product_Location')" prop="dockName">-->
          <!--            <jPicker-->
          <!--              sureColor="#ff0000"-->
          <!--              @bindpicker="bookTypeChange"-->
          <!--              showKey="value"-->
          <!--              valKey="value"-->
          <!--              :val="form.aimWl.value"-->
          <!--              :options="model.returningTypeList"-->
          <!--            />-->
          <!--          </u-form-item>-->
          <u-form-item
            :label="this.$t('message.product_TransferCar')"
            prop="turnoverCarCode"
            :required="true"
          >
            <u-input
              v-model="form.turnoverCarCode"
              :placeholder="this.$t('message.po_PleaseInput')"
            />
          </u-form-item>
          <u-form-item
            :label="this.$t('message.product_MaterialCode')"
            prop="barCode"
            :required="true"
          >
            <u-search
              :placeholder="this.$t('message.product_unit7')"
              v-model="form.barCode"
              @search="getBarcode"
              :show-action="false"
            ></u-search>
          </u-form-item>
          <u-form-item :label="this.$t('message.product_MaterialDes')">
            <u-input
              v-model="model.orderInInfo.productDescEn"
              :placeholder="this.$t('message.po_PleaseInput')"
            />
          </u-form-item>
          <u-row gutter="0">
            <u-col :span="6">
              <u-form-item :required="true" :label="this.$t('message.product_Number')">
                <u-input v-model="form.qty" :placeholder="this.$t('message.po_PleaseInput')" />
              </u-form-item>
            </u-col>
            <u-col :span="6">
              <u-form-item :label="this.$t('message.product_Unit')">
                <u-input
                  v-model="model.orderInInfo.primaryUom"
                  :placeholder="this.$t('message.po_PleaseInput')"
                />
              </u-form-item>
            </u-col>
          </u-row>
        </u-col>
        <u-col :span="12">
          <view class="table-wrapper">
            <wyb-table
              class="table"
              ref="table"
              width="100%"
              enable-check="multiple"
              show-left-and-right-border
              :headers="headers"
              :contents="materielList"
              :show-vert-border="false"
              @onCheck="onCheck"
            ></wyb-table>
          </view>
        </u-col>
      </u-row>
    </u-form>
    <view class="bottom-bar">
      <u-row class="button-bar">
        <u-col :span="3">
          <u-button type="error" @click="onDelete">{{ $t('message.product_Delete') }}</u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="primary" @click="confirm">{{ $t('message.product_Confirm') }}</u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="warning" @click="onSelectAll">
            {{ $t('message.product_AllSelect') }}
          </u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="success" @click="onOk">{{ $t('message.po_Submit') }}</u-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Ref, Watch } from 'vue-property-decorator';
import { BasePage } from '@/components/base/page';
import { VForm, VFormRules } from 'vue/types/form';
import model from './model';
import { headers } from './config';
import { session } from '@/store/modules/session';
import jPicker from '@/components/J-Picker/jPicker.vue';
interface OptionType {
  label: string;
  value: string;
}
@Component({
  components: {
    jPicker,
  },
})
export default class outboundDom extends BasePage {
  /**
   * 表格引用
   */
  @Ref('table') readonly $table: any;
  /**
   * 表单引用
   */
  @Ref('form') readonly $form!: VForm;

  @Watch('form', { immediate: true, deep: true })
  onPersonChanged() {
    this.isFormChange = true;
  }
  /**
   * 月台类型选择
   */
  returningTypeSelect = false;
  /**
   * 页面Module
   */
  model = model;
  /**
   * 表单是否改变
   */
  isFormChange = false;
  /**
   * 表头
   */
  headers = headers;

  /**
   * 表单数据
   */
  form = {
    orderNo: null,
    dockCode: null, // 库位类型code
    dockName: null, // 库位类型name
    Location: '',
    barCode: '',
    qty: '', //数量
    turnoverCarCode: '', //周转车编码
    aimWl: {} as OptionType,
  };
  //表格数据
  materielList: any = [];
  //被选中的表格数据
  selectMaterielList: any = [];
  selectMaterielList2: any = [];
  /**
   * 表单是否改变
   */
  /**
   * 表单校验
   */
  rules: VFormRules<any> = {
    // dockName: [{ required: false, message: this.$t('message.product_Tip1') as string }],
    barCode: [{ required: true, message: this.$t('message.po_PleaseScanMATcode') as string }],
    turnoverCarCode: [{ required: true, message: this.$t('message.po_PleaseInputcar') as string }],
  };

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$form.setRules(this.rules);
    // model.queryReturningTypeList();
  }
  /**
   * 处理选择行 选中一条执行一次
   */
  onCheck(e: any) {
    this.selectMaterielList = [];
    console.log(e.data);
    e.data.forEach((line: any) => {
      const { index, lineData: item } = line;
      console.log('selected', index);
      this.selectMaterielList.push(item);
    });
  }
  back() {
    this.model.orderInInfo.productDescEn = ''; //回显的物料描述
    this.model.orderInInfo.primaryUom = ''; //回显的物料单位
    this.form.turnoverCarCode = '';
    this.form.qty = '';
    this.form.barCode = '';
    this.selectMaterielList = [];
    uni.navigateBack({ delta: 1 });
    this.$table.onEmpty();
  }
  /**
   * 批量删除
   */
  onDelete() {
    let indexs: any = [];
    this.materielList.forEach((item: any, index: any) => {
      this.selectMaterielList.forEach((item2: any) => {
        if (item.productCode == item2.productCode) {
          indexs.push(index);
        }
      });
    });
    console.log('indexs', indexs);
    for (let i = 0; i < indexs.length; i++) {
      this.materielList.splice(indexs[i], 1);
    }
    this.selectMaterielList = [];
    this.$table.onEmpty();
  }
  /**
   * 全选
   */
  onSelectAll() {
    this.$table.onCheckAllTap();
    this.selectMaterielList = this.materielList;
  }
  bookTypeChange(e: any) {
    this.form.aimWl = e.pickerName;
  }

  /**
   * 确认
   */
  onOk() {
    // if (this.selectMaterielList.length == 0) {
    //   uni.showToast({ icon: 'none', title: this.$t('message.product_Tip2') as string });
    // } else {
    this.$form.validate(async (valid: boolean) => {
      if (!valid) return;
      // if (!this.form.aimWl.value) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: this.$t('message.product_Tip3') as string,
      //   });
      //   return;
      // }
      this.selectMaterielList.forEach((item: any) => {
        item.factoryCode = session.factoryCode; //工厂
        item.warehouseCode = session.warehouseCode; //仓库
        item.regionCode = session.regionCode; //区域
        item.areaCode = session.regionCode; //库区
        // item.locCode = this.form.dockName; //库位
        // item.locCode = this.form.aimWl.value; //库位
        item.locCode = ''; //库位
        item.operator = session.loginName; //操作人
        item.loginName = session.loginName; //操作人
        item.barcode = this.form.barCode; //物料条码
        item.turnoverCarCode = this.form.turnoverCarCode; //周转车
        item.productDesc = item.productDescEn;
      });
      this.model.confirm(this.selectMaterielList);
      this.$form.resetFields();
      this.model.orderInInfo.productDescEn = ''; //回显的物料描述
      this.model.orderInInfo.primaryUom = ''; //回显的物料单位
      this.form.turnoverCarCode = '';
      this.form.qty = '';
      this.form.barCode = '';
      this.selectMaterielList = [];
      // uni.navigateBack({ delta: 1 });
      this.materielList = [];
      this.isFormChange = false;
      // if (this.model.code == '1') {
      //   this.materielList = [];
      // } else {
      //   this.materielList = this.model.data;
      // }
    });
    this.$table.onEmpty();
    // }
  }
  //输入数量之后的确认按钮
  async confirm() {
    if (this.form.qty == '' || this.form.qty == '0') {
      uni.showToast({
        icon: 'none',
        title: this.$t('message.Summary_PleaseInputNumber') as string,
      });
      return;
    }
    if (this.materielList.length == 0) {
      await this.materielList.push({ ...this.model.materielList[0], qty: this.form.qty });
      this.$table.onCheckAllTap();
    } else {
      await this.$table.onCheckAllTap();
      await this.materielList.push({ ...this.model.materielList[0], qty: this.form.qty });
      this.$table.onCheckAllTap();
    }
  }
  getBarcode() {
    this.model.queryOrderInInfo(this.form.barCode);
  }
}
</script>

<style lang="scss" scoped>
.page-raw-receipt {
  background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #4a78ea 51%, #1753ea 100%) no-repeat;
  background-size: 100% 600rpx;
  padding: 118rpx 30rpx 162rpx;
  min-height: 100%;

  .header {
    position: fixed;
    top: 36rpx;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    height: 88rpx;
    line-height: 88rpx;
    color: #fff;
    font-size: 34rpx;
    font-weight: 500;
    text-align: center;
    .title {
      flex: 3;
    }
    .left,
    .right {
      flex: 1;
    }
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 88rpx;
      height: 88rpx;
    }
  }

  .form {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);

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

  .table-wrapper {
    padding: 10rpx 0;
  }

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