<template>
  <uni-popup ref="popup" background-color="#fff" :maskClick="false">
    <view class="popup-content">
      <view class="popup-title">{{$t('封箱')}}</view>
      <view class="add-form">
        <uni-forms ref="form" :modelValue="form" label-position="left">
          <uni-forms-item :label="$t('箱号')" required>
            {{ form.pkgNum }}
          </uni-forms-item>
          <uni-forms-item :label="$t('长')" required>
            <uni-easyinput v-model.number="form.pkgLength" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('宽')" required>
            <uni-easyinput v-model.number="form.pkgWidth" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('高')" required>
            <!--高度是pkgHight，不是pkgHeight，接口拼错了前端沿用-->
            <uni-easyinput v-model.number="form.pkgHight" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('体积')" required>
            <uni-easyinput v-model.number="form.sumVolume" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('重量')" required>
            <uni-easyinput v-model.number="form.sumWeight" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('箱数')" required>
            <uni-easyinput v-model.number="form.sumNum" type="number" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="popup-foot-btn">
        <button class="mini-btn" type="primary" size="mini" @tap="submit">{{$t('确认')}}</button>
        <button class="mini-btn" type="default" size="mini" @tap="cancel">{{$t('取消')}}</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import selectCombox from "@/components/select-combox/select-combox.vue";
import { alert, msg } from "@/util/tools";
import {
  boxMergePkeCreate,
  boxMergePkeUpdate,
  closeMergePkg,
  finishMergePkg,
  getMergePkgInfoById
} from "@/pages/mergePkg/api";

export default {
  props:{
    pkgId: Number,
    shipmentId: Number,
    type: Number, // 0 未装箱列表点击封箱，1已装箱列表点击封箱
  },
  data(){
    return {
      form: {}
    }
  },
  async created() {
    this.getData()
    await this.$nextTick()
    this.$refs.popup.open()
  },
  methods:{
    getData(){
      getMergePkgInfoById(this.pkgId).then(res => {
        this.form = {...res}
        // 数量可能为空，默认给0
        if(this.form.sumNum === null){
          this.form.sumNum = 0
        }
      })
    },
    // 关闭弹层
    close(type = 'cancel'){
      this.$refs.popup.close()
      this.$emit(type)
    },
    submit(){
      const fields = {
        pkgLength: this.$t('长'),
        pkgWidth: this.$t('宽'),
        pkgHight: this.$t('高'),
        sumNum: this.$t('箱数'),
        sumVolume: this.$t('体积'),
        sumWeight: this.$t('重量')
      }
      let empty = []
      Object.keys(fields).forEach(field => {
          if(!this.form[field] || Number(this.form[field]) <= 0){
            empty.push(fields[field])
          }
      })
      if(empty.length){
        return alert(this.$t('请检查' + empty.join('、') + '是否填写正确'))
      }
      let data = {...this.form}
      // 接口返回的封箱数据shipmentId是null,所以使用props传值
      data.shipmentId = this.shipmentId
      // 指定状态为3表是封箱
      data.status = 3
      closeMergePkg(data).then(res => {
        return alert(this.$t('封箱成功'))
      }).then(() =>{
        this.close('success')
      })
    },
    cancel(){
      this.close('cancel')
    }
  }
}
</script>

<style scoped lang="scss">

.popup-content {
  width: 90vw;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  max-height: 80vh;
  overflow: auto;
  ::v-deep .uni-forms-item__content{
    display: flex;
    align-items: center;
  }
  .popup-title {
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .add-form {
    ::v-deep .uni-forms-item__label {
      font-weight: bold;
    }
  }
  .add-row-btn {
    border: 0.5px solid #eee;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    ::v-deep .uni-icons {
      vertical-align: bottom;
      margin-right: 8px;
    }
  }
  .add-popup-card {
    margin: 16px 0 0 0 !important;
    .card-row {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      > text {
        padding: 0 6px;
      }
    }
    .delete-btn {
      width: 72px;
      line-height: 30px;
      border: 0.5px solid #007aff;
      text-align: center;
      border-radius: 15px;
      color: #007aff;
      margin-left: auto;
    }
  }
  .popup-foot-btn {
    padding: 8px;
    margin-top: 8px;
    text-align: center;
    button {
      border: 1px solid #007aff;
    }
    > button + button {
      margin-left: 16px;
      color: #007aff;
      background: #fff;
    }
  }
}
</style>
