<template>
  <div class="shippingSea-dialog">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item :label="$t('运输方式')" prop="transportType">
        <el-radio-group v-model="form.transportType">
          <el-radio v-for="dict in transportTypes" :key="dict.value" :label="$l(dict, 'value')">{{$l(dict, 'label')}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('柜型')" prop="cabinetId">
        <el-select v-model="form.cabinetId" :placeholder="$t('请选择柜型')">
          <el-option v-for="item in cabinetList" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('始发地')" prop="startWarehouseId">
        <el-select v-model="form.startWarehouseId" :placeholder="$t('请选择始发地')">
          <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('目的地')" prop="destWarehouseId">
        <el-select v-model="form.destWarehouseId" :placeholder="$t('请选择目的地')">
          <el-option v-for="item in importWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>

      <div class="operate-button">
        <el-button type="primary" @click="submitForm">{{$t('确定')}}</el-button>
        <el-button @click="cancel">{{$t('取消')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { createbox, updatebox } from "@/api/ecw/box";

export default {
  name: "editForm",
  inheritAttrs: false,
  props: {
    transportTypes: Array,
    warehouseList: Array,
    cabinetList: Array,
    shipmentObj: Object,
  },
  created() {
    this.form = { ...this.shipmentObj };
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        transportType: [
          { required: true, message: this.$t("运输方式不能为空"), trigger: "blur" },
        ],
        cabinetId: [
          { required: true, message: this.$t("柜型不能为空"), trigger: "blur" },
        ],
        startWarehouseId: [
          { required: true, message: this.$t("始发地不能为空"), trigger: "blur" },
        ],
        destWarehouseId: [
          { required: true, message: this.$t("目的地不能为空"), trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }

        // 修改的提交
        if (this.form.id != null) {
          updatebox(this.form).then((response) => {
            this.$modal.msgSuccess(this.$t("修改成功"));
            this.$emit("closeDialog", "edit");
          });
          return;
        }
        // 添加的提交
        createbox(this.form).then((response) => {
          this.$modal.msgSuccess(this.$t("新增成功"));
          this.$emit("closeDialog", "add");
        });
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("closeDialog");
    },
  },
  computed: {
    exportWarehouseList() {
      return this.warehouseList.filter(
        (item) => item.tradeType == "2" || item.type == "3"
      );
    },
    importWarehouseList() {
      return this.warehouseList.filter(
        (item) => item.tradeType == "1" || item.type == "3"
      );
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shippingSea-dialog {
  // 页面内元素弹窗form控件宽度设置
  .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .two-element-formItem {
    display: flex;
    > :last-child {
      width: 100%;
      margin-left: 10px;
    }
  }
  .two-element {
    .el-form-item__content {
      display: flex;
      > :last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
