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

        <el-form-item label="运输方式" prop="transportType">
          <el-radio-group v-model="form.transportType">
            <el-radio v-for="dict in transportTypes" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="出货渠道" prop="shippingChannelId">
          <el-select v-model="form.shippingChannelId" placeholder="请选择出货渠道">
            <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="柜型" prop="cabinetId">
          <el-select v-model="form.cabinetId" placeholder="请选择柜型">
            <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="始发地" prop="startWarehouseId">
          <el-select v-model="form.startWarehouseId" placeholder="请选择始发地">
            <el-option v-for="item in exportWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目的地" prop="destWarehouseId">
          <el-select v-model="form.destWarehouseId" placeholder="请选择目的地">
            <el-option v-for="item in importWarehouseList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

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

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

        this.form.transportType = 4

        // 修改的提交
        if (this.form.id != null) {
          updatebox(this.form).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          return
        }
        // 添加的提交
        createbox(this.form).then((response) => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
          this.getList()
        })
      })
    },
    /** 取消按钮 */
    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>
