<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.product_item3') }}</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-input v-model="form.dockName" type="select" @click="returningTypeSelect = true" />-->
            <!--            <u-select-->
            <!--              v-model="returningTypeSelect"-->
            <!--              :list="model.returningTypeList"-->
            <!--              @confirm="-->
            <!--                (v) => {-->
            <!--                  form.dockCode = v[0].value;-->
            <!--                  form.dockName = v[0].label;-->
            <!--                }-->
            <!--              "-->
            <!--            ></u-select>-->
          </u-form-item>
          <u-form-item :label="this.$t('message.product_MaterialCode')">
            <u-search
              :placeholder="this.$t('message.po_PleaseInput')"
              v-model.trim="form.productCode"
              @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 :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
                  :placeholder="this.$t('message.po_PleaseInput')"
                  v-model="form.primaryUomName"
                  type="select"
                  @click="returningTypeSelect2 = true"
                />
                <u-select
                  :confirm-text="this.$t('message.product_Confirm')"
                  :cancel-text="this.$t('message.product_Cancel')"
                  v-model="returningTypeSelect2"
                  :list="this.unitList"
                  @confirm="
                    (v) => {
                      form.primaryUomCode = v[0].value;
                      form.primaryUomName = v[0].label;
                    }
                  "
                ></u-select>
              </u-form-item>
            </u-col>
          </u-row>
        </u-col>
      </u-row>
    </u-form>
    <view class="bottom-bar">
      <u-row class="button-bar">
        <u-col :span="6">
          <u-button type="error" @click="uni.navigateBack()">{{
            $t('message.product_Cancel')
          }}</u-button>
        </u-col>
        <u-col :span="6">
          <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 semiFinishProductOffline2Dom extends BasePage {
  /**
   * 表格引用
   */
  @Ref('table') readonly $table: any;
  /**
   * 表单引用
   */
  @Ref('form') readonly $form!: VForm;

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

  /**
   * 表单数据
   */
  form = {
    orderNo: null,
    dockCode: null, // 库位类型code
    primaryUomCode: null, // 单位类型code
    dockName: null, // 库位类型name
    primaryUomName: '', // 单位类型name
    Location: '',
    productCode: '',
    qty: '', //数量
    primaryUom: '', //单位
    aimWl: {} as OptionType,
  };
  /**
   * 单位类型列表
   */
  unitList = [
    {
      label: this.$t('message.product_unit1') as string,
      value: this.$t('message.product_unit1') as string,
    },
    {
      label: this.$t('message.product_unit2') as string,
      value: this.$t('message.product_unit2') as string,
    },
    {
      label: this.$t('message.product_unit3') as string,
      value: this.$t('message.product_unit3') as string,
    },
    {
      label: this.$t('message.product_unit4') as string,
      value: this.$t('message.product_unit4') as string,
    },
    {
      label: this.$t('message.product_unit5') as string,
      value: this.$t('message.product_unit5') as string,
    },
    {
      label: this.$t('message.product_unit6') as string,
      value: this.$t('message.product_unit6') as string,
    },
  ];
  /**
   * 表单校验
   */
  rules: VFormRules<any> = {
    dockName: [{ required: false, message: this.$t('message.product_Tip1') as string }],
  };
  bookTypeChange(e: any) {
    this.form.aimWl = e.pickerName;
  }

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$form.setRules(this.rules);
    model.queryReturningTypeList();
  }
  back() {
    this.model.orderInInfo.productDescEn = ''; //回显的物料描述
    this.form.qty = '';
    uni.navigateBack({ delta: 1 });
  }
  /**
   * 确认
   */
  onOk() {
    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,
        // });
        this.customToast(this.$t('message.product_Tip3') as string);
        return;
      }
      const list = [
        {
          factoryCode: session.factoryCode, //工厂
          warehouseCode: session.warehouseCode, //仓库
          regionCode: session.regionCode, //区域
          areaCode: session.regionCode, //库区
          operator: session.loginName, //操作人
          loginName: session.loginName, //操作人
          // locCode: this.form.dockName, //库位
          locCode: this.form.aimWl.value, //库位
          unit: this.form.primaryUomName, //单位
          productCode: this.form.productCode, //物料编号
          qty: this.form.qty, //数量
          productDesc: this.model.orderInInfo.productDescEn, //物料描述
        },
      ];
      await this.model.confirm(list);
      this.$form.resetFields();
      this.form.productCode = '';
      this.form.qty = '';
      this.form.primaryUomName = '';
      this.model.orderInInfo.productDescEn = '';
      this.isFormChange = false;
    });
  }
  getBarcode() {
    this.model.queryOrderInInfo(this.form.productCode);
  }
}
</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>
