<template>
  <div class="shippingSea-dialog">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <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="dict.value">{{$l(dict, 'label')}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t('出货渠道')" prop="shippingChannelId">
          <el-select v-model="form.shippingChannelId" :placeholder="$t('请选择出货渠道')">
            <el-option v-for="item in channelList" :label="$l(item, 'name')" :value="item.channelId" :key="item.channelId"></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>
        <el-form-item :label="$t('目的港清关')" prop="destinationClearance">
          <el-radio-group v-model="form.destinationClearanceSelect" @input="destinationClearanceSelect">
            <el-radio :label="1">{{$t('我司')}}</el-radio>
            <el-radio :label="3">{{$t('客户')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.destinationClearanceSelect==1" prop="destinationClearance" :rules="[
          { required: true,  message: this.$t('清关方式不能为空'), trigger: 'blur' }
        ]">
          <el-radio-group v-model="form.destinationClearance">
            <el-radio :label="1">{{$t('我司清关')}}</el-radio>
            <el-radio :label="2">{{$t('合作方清关')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('发货方式')" prop="deliveryType">
          <el-radio-group v-model="form.deliveryType">
            <el-radio :label="1">{{$t('多票')}}</el-radio>
            <el-radio :label="2">{{$t('单票')}}</el-radio>
          </el-radio-group>
        </el-form-item>

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

<script>
import { createbox, updatebox } from "@/api/ecw/boxAir";
import { getChannelList } from '@/api/ecw/channel'

export default {
  name: "editAirForm",
  inheritAttrs: false,
  props: {
    transportTypes: Array,
    warehouseList: Array,
    cabinetList: Array,
    shipmentObj: Object,
  },
  created() {
    this.form = { ...this.shipmentObj };
    if(this.form.destinationClearance && this.form.destinationClearance != 3){
      this.form.destinationClearanceSelect = 1
    }
    this.getChannelList()
  },
  data() {
    return {
      // 表单参数
      form: {
        destinationClearance: null
      },
      channelList: [],
      // 表单校验
      rules: {
        shippingChannelId: [
          { required: true, message: this.$t('出货渠道不能为空'), trigger: 'blur' }
        ],
        startWarehouseId: [
          { required: true, message: this.$t('始发地不能为空'), trigger: 'blur' }
        ],
        destWarehouseId: [
          { required: true, message: this.$t('目的地不能为空'), trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    getChannelList() {
      getChannelList().then((res) => (this.channelList = res.data))
    },
    destinationClearanceSelect(val) {
      if(val == 3){
        this.form.destinationClearance = val
      }
    },
    /** 提交按钮 */
    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", "edit");
        })
      })
    },
    /** 取消按钮 */
    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>
