<template>
  <view class="page-raw-checkin">
    <view class="header" :style="{ backgroundColor: `rgba(23, 83, 234, ${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>
    <u-form class="form" ref="form" :model="form" label-width="140rpx">
      <u-form-item label="看单号" prop="documentNo">
        <u-input v-model="form.documentNo" @confirm="onBillNoEnterKeyDown" />
      </u-form-item>
      <u-form-item label="车牌号" prop="carNo">
        <u-input v-model="form.carNo" />
      </u-form-item>
      <u-form-item label="交货地点" prop="sendSpot">
        <u-input v-model="form.sendSpot" disabled placeholder="" />
      </u-form-item>
      <u-form-item label="预约时间" prop="appointmentTime">
        <u-input :value="form.appointmentTime | datetime" disabled placeholder="" />
      </u-form-item>
      <u-form-item label="预约月台" prop="appointmentPlatform">
        <u-input
          :value="form.appointmentPlatform || ''"
          type="select"
          @click="isPlatformSelectShow = true"
        />
        <u-select
          :confirm-text="this.$t('message.product_Confirm')"
          :cancel-text="this.$t('message.product_Cancel')"
          v-model="isPlatformSelectShow"
          :list="platform.getPlatforms.map((p, i) => ({ label: p.name, value: i }))"
          @confirm="onSelectPlatform"
        ></u-select>
      </u-form-item>
    </u-form>
    <view class="bottom-bar">
      <u-row>
        <u-col :span="3">
          <u-button type="primary" @click="onSubmit">登记</u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="success" @click="toPage(page.raw.appointment.checkinList)">
            清单
          </u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="warning" @click="onReset">重新扫描</u-button>
        </u-col>
        <u-col :span="3">
          <u-button type="error" @click="uni.navigateBack()">返回</u-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Ref } from 'vue-property-decorator';
import { BasePage } from '@/components/base/page';
import { VForm, VFormRules } from 'vue/types/form';
import { platform } from '@/pages/raw/appointment/checkin/platform';
import { Bill, checkin } from '@/pages/raw/appointment/checkin/model';
import { session } from '@/store/modules/session';

// 创建空看单
const createEmptyBill = (): Bill => ({
  documentNo: '',
  carNo: '',
  sendSpot: '',
  appointmentTime: '',
  appointmentPlatform: '',
});

@Component
export default class CheckInPage extends BasePage {
  @Ref('form') readonly $form!: VForm;

  // 月台模块
  platform = platform;

  form: Bill = createEmptyBill();

  rules: VFormRules<Bill> = {
    documentNo: [
      {
        required: true,
        message: '请输入看单号',
      },
    ],
  };
  isPlatformSelectShow = false;

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  async onReady() {
    // 设置表单
    this.$form.setRules(this.rules);
    // 设置月台
    const platforms = await platform.getPlatformItems({
      loginName: session.loginName as string,
      warehouseCode: session.warehouseCode as string,
      factoryCode: session.factoryCode as string,
    });
    platform.setPlatforms(platforms);
  }
  // 选择月台
  onSelectPlatform(s: any) {
    const selection = platform.getPlatforms[s[0].value];
    this.form.appointmentPlatform = selection.sapCode;
    if (checkin.bills.some((b) => b.documentNo === this.form.documentNo)) {
      const index = checkin.bills.findIndex((b) => b.documentNo === this.form.documentNo);
      checkin.splice({
        index,
        item: {
          ...checkin.bills[index],
          appointmentPlatform: selection.sapCode,
        },
      });
    }
  }
  // 登记
  async onSubmit() {
    try {
      await checkin.submitBills();
      this.form = createEmptyBill();
      uni.showToast({ icon: 'success', title: '登记成功' });
    } catch (e) {
      uni.showToast({ icon: 'none', title: '登记失败: ' + e.message });
    }
  }
  // 清空
  async onReset() {
    if (checkin.bills.some((b) => b.documentNo === this.form.documentNo)) {
      checkin.splice({
        index: checkin.bills.findIndex((b) => b.documentNo === this.form.documentNo),
      });
    }
    this.form = createEmptyBill();
  }
  // 看单号 enter
  onBillNoEnterKeyDown() {
    this.$form.validate(async (valid: boolean) => {
      if (valid) {
        const bill = await checkin.getBillDetail({
          // factoryCode: session.getUser.factoryCode,
          // loginName: session.getUser.loginName,
          // hideKdOrderNo: this.form.documentNo,
          hideKdOrderNo: this.form.documentNo,
          factoryCode: session.factoryCode as string,
          loginName: session.loginName as string,
        });
        if (checkin.bills.some((b) => b.documentNo === bill.documentNo)) {
          uni.showToast({ icon: 'none', title: '单号已扫' });
        } else {
          this.form = bill;
          checkin.add(bill);
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.page-raw-checkin {
  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: 40rpx;
    border-radius: 10rpx;
    box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);

    .u-form-item {
      padding: 30rpx 0;
      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;
  }
}
</style>
