<template>
  <div class="app-container">
    <div v-show="showOnShelMsg" :class="onShelMsgType">{{ onShelMsg }}</div>
    <div v-loading="loading" class="input">
      <span class="title">输入/扫描</span>
      <input
        v-model="inputNumber"
        type="text"
        class="inputbox"
        :placeholder="placeHolder"
        @keyup.enter="inputComplete"
      >
    </div>

    <div>
      <div class="displayItem">
        <div class="title">当前货位</div>
        <div>{{ currentShelfNumber }}</div>
      </div>

      <div class="displayItem">
        <div class="title">当前SKU</div>
        <div>{{ currentSku }}</div>
      </div>

      <div class="displayItem">
        <div class="title">待上架数量</div>
        <div>{{ waitOnShelfCount }}</div>
      </div>

      <div class="displayItem">
        <div class="title">上架数量</div>
        <div>
          <el-tooltip
            class="item"
            effect="dark"
            content="按回车直接提交"
            placement="right-end"
          >
            <el-input
              v-model="currentOnshelfCount"
              type="number"
              size="large"
              style="font-size: 20px"
              @change="submit"
            />
          </el-tooltip>
        </div>
      </div>

      <div class="text-center">
        <el-button
          type="success"
          size="large"
          style="font-size: 20px"
          @click="submit"
        >提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const shelfNoRegex = /^HW-\d{9}$/

import { OnShelf } from '@/api/ds/onshelf/onshelf'
import { loadSkuOnShelfInfo } from '@/api/ds/purchase/purchaseDelivery'

export default {
  name: 'onShelf',
  data: function() {
    return {
      loading: false,
      onShelMsg: '',
      showOnShelMsg: false,
      onShelMsgType: 'onshelMsg error',
      placeHolder: '请扫描货架号',
      inputNumber: null,
      currentShelfNumber: null,
      currentDeliveryNumber: null,
      currentSku: null,
      currentSkuId: null,
      waitOnShelfCount: 0,
      currentOnshelfCount: 0
    }
  },
  methods: {
    changeInputTips() {
      if (!this.currentShelfNumber) {
        this.placeHolder = '请扫描货架号'
      } else if (!this.currentSku) {
        this.placeHolder = '请扫描SKU'
      }
    },
    inputComplete() {
      debugger
      if (shelfNoRegex.test(this.inputNumber)) {
        this.currentShelfNumber = this.inputNumber
        this.inputNumber = ''
      } else {
        if (!this.currentShelfNumber) {
          this.$message({ message: '请先扫描货架号', type: 'error' })
          return
        }
        const sku = this.inputNumber
        this.loadSkuOnShelfInfo(sku)
        this.inputNumber = ''
      }
      this.changeInputTips()
    },
    loadSkuOnShelfInfo(sku) {
      this.loading = true
      loadSkuOnShelfInfo(sku)
        .then((res) => {
          const skuNumber = res.SkuNumber
          const skuId = res.SkuId
          this.currentSku = skuNumber
          this.currentSkuId = skuId
          this.waitOnShelfCount = res.WaitOnShelfCount
        })
        .catch((res) => {
          console.log('error', res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    loadDelivery(deliveryNumber) {
      loadDeliveries(deliveryNumber).then((res) => {
        this.currentDeliveryNumber = res.BatchNo
        this.waitOnShelfCount = res.DeliveryCount - res.SignCount
      })
    },
    showErrMsg(msg) {
      this.showOnShelMsg = true
      this.onShelMsg = msg
      this.onShelMsgType = 'onshelMsg error'
    },
    showSuccessMsg(msg) {
      this.showOnShelMsg = true
      this.onShelMsg = msg
      this.onShelMsgType = 'onshelMsg success'
    },
    init() {
      this.inputNumber = null
      this.currentShelfNumber = null
      this.currentDeliveryNumber = null
      this.currentSku = null
      this.currentSkuId = null
      this.waitOnShelfCount = 0
      this.currentOnshelfCount = 0
    },
    submit() {
      const gridName = this.currentShelfNumber
      const skuId = this.currentSkuId
      const count = this.currentOnshelfCount

      if (!gridName) {
        this.$message({ message: '货位号不能为空', type: 'error' })
        return
      }
      if (!skuId) {
        this.$message({ message: '请先扫描SKU条码', type: 'error' })
        return
      }
      if (!count || count <= 0) {
        this.$message({ message: '请填写上架数量', type: 'error' })
        return
      }
      const records = []
      const item = { gridName, skuId, count }
      records.push(item)
      const param = { records }
      OnShelf(param)
        .then((res) => {
          if (typeof res == 'string') {
            const msg = res || '操作失败'
            this.showErrMsg(msg)
          } else {
            if (res.success && res.success == true) {
              const sku = this.currentSku
              this.showSuccessMsg(`${sku} 上架成功`)
            } else {
              const msg = result.message || '操作失败'
              this.showErrMsg(msg)
            }
          }
        })
        .catch((res) => {
          this.showOnShelMsg = true
          this.onShelMsg = res
          this.onShelMsgType = 'onshelMsg error'
        })
        .finally(() => {
          this.init()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
$title-length: 8em;

.input {
  display: flex;
  align-items: center;
  font-size: 30px;

  .inputbox {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    width: 600px;
    color: gray;
    height: 60px;
  }
  .inputbox:focus {
    outline: none;
    border-color: #84baec;
  }
}

.displayItem {
  color: grey;
  margin: 40px 0px;
  display: flex;
  font-size: 30px;
}

.title {
  color: grey;
  width: $title-length;
  text-align: right;
  margin-right: 15px;
}

.onshelMsg {
  margin: 10px 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;

  &.error {
    color: red;
  }
  &.success {
    color: green;
  }
}
</style>
