<template>
  <!-- 添加合同单价信息 -->
  <div class="addWagonLoad">
    <PageTitle>返回</PageTitle>
    <div class="form-box">
      <!-- <dil-form :formId="271" v-model="form1" ref="from1"></dil-form> -->
      <el-form v-model="form">
          <div class="preview-group">
            <el-form-item label="合同号">
                <el-input v-model="form.contractNo"></el-input>
            </el-form-item>
             <el-form-item label="单价">
                <el-input v-model="form.unitPrice" type="number"></el-input>
            </el-form-item>
            <el-form-item label="港口">
              <el-select v-model="form.portId" filterable multiple>
                <el-option
                  v-for="port in ports"
                  :key="port.portId"
                  :label="port.portName"
                  :value="port.portId"
                >
                </el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="起始日期">
                 <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
             <el-form-item label="截止日期">
                 <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
          </div>
     </el-form>
    </div>
    <div class="button-box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure" :loading="isLoading">确定</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      form: {
        portId:[],
        contractNo:null,
        unitPrice:null,
        startTime:null,
        endTime:null,
        userId:getCookie("userId")
      },
      ports:[],
      isLoading:false
    };
  },
  mounted() {
    this.getPorts();
  },
  methods: {
    makeSure() {
      this.isLoading=true;
      if (this.form.contractNo == null || 
      this.form.contractNo =='' ||
      this.form.unitPrice =='' ||
      this.form.unitPrice == null ||
      this.form.startTime == null || 
      this.form.endTime == null){
        this.$message.error("存在空值！");
        this.isLoading=false;
      }else if(this.form.startTime>=this.form.endTime){
        this.$message.error("起始日期必须小于截止日期！");
        this.isLoading=false;
      }
      else{
         let map=this.form;
         map.userId=getCookie("userId");
         console.log(map);
         map.startTime = sjTime(this.form.startTime);
         map.endTime = sjTime(this.form.endTime);
         this.axios.post("/api/v1/rms/insertBmsshipContractPrice",map).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.cancel();
          } else {
            this.$message.error(res.data.data);
          }
        }).then(()=>{
           this.isLoading=false;
        });
      }
       
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //查询港口id
    getPorts(){
        this.axios.post("/api/v1/rms/getPortName?index=").then(res => {
          if (res.data.code == 200) {
            this.ports=res.data.data;
            console.log(this.ports);
          } else {
            this.$message.error(res.data.data);
          }
        }).then(()=>{
          let copy=this.$route.query;
          console.log("copy:",copy);
          //如果有值，则复制新增
          if(copy){
            if(copy.portId){
              copy.portId=[copy.portId * 1];
            }
            this.$set(this,"form",copy);
          }
        });
    }
  }
};
</script>
<style lang="scss">
.button-box {
  display: flex;
  justify-content: center;
  margin: 20px;
  .el-button {
    width: 80px;
    margin: 10px;
  }
}
.form-box {
  display: flex;
  justify-content: center;
  .el-form-item {
    display: flex;
    justify-content: center;
    .el-form-item__label {
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-input {
        .el-input__inner {
          width: 250px;
        }
      }
    }
  }
}
</style>
