<template>
  <div>
    <el-form ref="errorForm" :model="errorObj" label-width="100px" :rules="rules">
      <el-form-item :label="$t('异常')" prop="exceptionType">
        <el-radio-group v-model="errorObj.exceptionType">
          <el-radio class="exception-list" v-for="item in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_UNLOADING_ERROR)" :key="item.value" :label="item.value">{{$l(item, 'label')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('品名')">
        <el-select v-model="errorObj.productId" :placeholder="$t('请选择品名')">
          <el-option v-for="(item, index) in goodsList" :key="index" :value="item.orderItemId" :label="$l(item, 'prodTitle')"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('件数')" prop="productNum">
        <el-input-number v-model="errorObj.productNum" controls-position="right" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('异常详情')">
        <el-input v-model="errorObj.exceptionDetail" type="textarea" rows="2" :placeholder="$t('请输入异常详情')"></el-input>
      </el-form-item>
    </el-form>

    <el-row class="operate-button">
      <el-button type="success" @click="onSubmit">{{$t('提交')}}</el-button>
      <el-button @click="$emit('closeDialog')">{{$t('关闭')}}</el-button>
    </el-row>
  </div>
</template>

<script>
import { createError } from "@/api/ecw/boxSea";
import { serviceMsg } from "../../utils";
import { debounce } from "throttle-debounce";
/**
 * 卸柜异常
 */
export default {
  name: "unloadingError",
  inheritAttrs: false,
  data() {
    const { currRow } = this.$attrs;

    return {
      // 校验
      rules: {
        exceptionType: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
        productNum: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
      },
      // 异常对象
      errorObj: {
        productId: currRow.goodsList[0].orderItemId,
      },
      // 品名
      goodsList: currRow.goodsList ?? [],
    };
  },
  methods: {
    /** 提交 */
    onSubmit: debounce(340, function onSubmit() {
      this.$refs["errorForm"].validate((valid) => {
        if (valid) {
          const { productNum = 0 } = this.errorObj;
          const { currRow } = this.$attrs;
          if (productNum > currRow.installNum) {
            this.$message.error(this.$t("货物异常数量不能大于装柜数量"));
            return;
          }
          createError({
            ...this.errorObj,
            orderId: this.$attrs.currRow.orderId,
            shipmentId: this.$attrs.shipmentObj.id,
          }).then((res) => {
            serviceMsg(res, this).then((res) => {
              this.$emit("closeDialog", "query");
            });
          });
        }
      });
    }),
  },
};
</script>

<style lang="scss" scoped>
  .exception-list{
    margin-bottom: 20px;
  }
</style>
