<template>
  <uni-popup ref="popup" background-color="#fff" :maskClick="false">
    <view class="popup-content">
      <view class="popup-title">{{title}}</view>
      <view class="add-form">
        <uni-forms ref="form" :modelValue="form" label-position="left">
          <uni-forms-item :label="$t('箱号')" required>
            {{ form.pkgNum || $t('自动生成') }}
          </uni-forms-item>
          <uni-forms-item v-if="!mergePkg" :label="$t('数量')" required>
            <uni-easyinput v-model="form.num" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('长')">
            <uni-easyinput v-model.number="form.pkgLength" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('宽')">
            <uni-easyinput v-model.number="form.pkgWidth" type="number" />
          </uni-forms-item>
          <uni-forms-item :label="$t('高')">
            <!--高度是pkgHight，不是pkgHeight，接口拼错了前端沿用-->
            <uni-easyinput v-model.number="form.pkgHight" 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 } from "@/pages/mergePkg/api";

export default {
  props:{
    shipmentId: Number,
    mergePkg: Object
  },
  data(){
    return {
      form: {}
    }
  },
  computed:{
    title(){
      return !this.isCreate ? this.$t('编辑合包箱编号'): this.$t('新建合包箱编号')
    },
    // 是否新建
    isCreate(){
      return !this.mergePkg
    }
  },
  async created() {
    if(this.mergePkg){
      this.form = {...this.mergePkg}
    }
    await this.$nextTick()
    this.$refs.popup.open()
  },
  methods:{
    // 关闭弹层
    close(type = 'cancel'){
      this.$refs.popup.close()
      this.$emit(type)
    },
    submit(){
      if(this.isCreate && !this.form.num){
        return msg(this.$t('请填写数量'))
      }
      /*// 判断长宽高不能为空
      let empty = false;
      // 高度是pkgHight，不是pkgHeight，接口拼错了前端沿用
      ['pkgLength', 'pkgWidth', 'pkgHight'].forEach(field => {
          if(!this.form[field] || Number(this.form[field]) <= 0){
            console.log(field)
            empty = true
          }
      })
      if(empty){
        return msg(this.$t('请检查长宽高'))
      }*/
      this.form.shipmentId = this.shipmentId
      console.log({...this.form}, this.isCreate)
      if(this.isCreate) return this.create()
      else return this.update()
    },
    // 创建
    create(){
      boxMergePkeCreate(this.form).then(res => {
        return alert(this.$t('合包创建成功'))
      }).then(res => {
        this.close('success')
      })
    },
    // 更新合包
    update(){
      boxMergePkeUpdate(this.form).then(res => {
        return alert(this.$t('合包更新成功'))
      }).then(res => {
        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>