<template>
  <!-- 添加二程船水运费1-->
  <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="searchSelect">
          <span class="text">批次</span>
          <el-input class="input" v-model="batchName" disabled> </el-input>
          <el-button class="button" type="primary" @click="ondrawer(5)"
            >浏览</el-button
          >
        </div>
         <div class="searchSelect">
          <span class="text">发运港</span>
          <el-input class="input" v-model="form.portName" disabled> </el-input>
          <el-button class="button" type="primary" @click="ondrawer(7)"
            >浏览</el-button
          >
        </div>
         <div class="searchSelect">
            <span class="text">单价</span>
            <el-input class="input" v-model="form.unitPrice" disabled  @change="calculate"> </el-input>
            <el-button class="button" type="primary" @click="ondrawer(6)">浏览</el-button>
        </div>
        <div class="preview-group">
           <el-form-item label="装船时间">
              <el-input
                v-model="form.resultLoadShipDate"
                placeholder="装船时间"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="离港时间">
              <el-input
                v-model="form.resultOutPortTime"
                placeholder="离港时间"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="吨位">
              <el-input
                v-model="form.realTonnage"
                placeholder="吨位"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="水运费用">
                <el-input v-model="form.fee" type="number" disabled></el-input>
            </el-form-item>
            <el-form-item label="预开吨位">
              <el-input
                v-model="form.previewTonnage"
                placeholder="预开吨位"
                @change="calculate"
              ></el-input>
            </el-form-item>
            <el-form-item label="预开金额">
                <el-input v-model="form.previewFee" type="number" disabled></el-input>
            </el-form-item>
            <el-form-item label="装船含水吨位">
              <el-input
                v-model="form.loadWater"
                placeholder="装船含水吨位"
              ></el-input>
            </el-form-item>
            <el-form-item label="进厂含水吨位">
              <el-input
                v-model="form.enFacotoryWater"
                placeholder="进厂含水吨位"
              ></el-input>
            </el-form-item>
        <el-form-item label="开票吨位">
              <el-input
                v-model="form.makeTonnage"
                placeholder="开票吨位"
                @change="calculate"
              ></el-input>
            </el-form-item>
            <el-form-item label="开票金额">
                <el-input v-model="form.makeFee" type="number"></el-input>
            </el-form-item>
          <el-form-item label="开票日期">
            <el-date-picker
              v-model="form.makeTime"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="上传水运单图片">
            <el-upload
              class="upload-demo"
              style="width: 270px"
              ref="upload1"
              accept=".pdf , .jpg, .png, .jpeg, .tif, .gif, .pcx, .tga, .exif, .fpx, .svg , .bmp"
              action="/api/v1/bms/uploadBmsshipOrder"
              :before-upload="beforeUpload"
              :multiple="false"
              list-type="picture"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="onError(1)"
            >
              <el-input
                class="shippingCertificate"
                style="width: 270px; display: flex"
                placeholder="上传水运单图片(必填项)"
                v-model="form.image"
                disabled
              >
              </el-input>
              <el-button
                size="small"
                type="primary"
                style="
                      width: 115px;
                      height: 35px;
                      margin-left: 275px;
                      margin-top: -35px;
                      display: flex;
                      "
                @click="upCLick(1)"
              >
                点击上传附件</el-button
              >
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 模态框 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="input"
        style="margin-top: 10px; margin-left: 20px; width: 250px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick(a)"
        style="margin-bottom: 15px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <div v-show="a == 5">
        <dilTable
          v-bind.sync="batchOption"
          @radio-change="batchChange"
        ></dilTable>
      </div>
      <div v-show="a == 6">
        <dilTable
          v-bind.sync="contractPriceOption"
          @radio-change="priceChange"
        ></dilTable>
      </div>
      <div v-show="a == 7">
        <dilTable
          v-bind.sync="loadShipOption"
          @radio-change="loadShipChange"
        ></dilTable>
      </div>
    </el-drawer>
    <!-- 底部按钮 -->
    <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";
import { BigNumber } from "bignumber.js";
export default {
  components: { PageTitle },
  data() {
    return {
      indexNum: null,
      form: {},
      portId: null,
      ports: [],
      isLoading: false,
      loadShips:null,
      totalResultId:null,
      drawer: false,
      direction: "rtl",
      a: 0,
      input: null,
      batchId: null,
      purchaseOrderId: null,
      batchName: null,
      cargoPictureUrl: "",
      resultLoadShipDate:null,
      resultOutDate:null,
      resultActualInstallations:null,
      batchOption: {
        requestUrl: "/api/v1/uc/findBatchHavingLoad?apiId=502",
        selectionType: "radio",
        map: []
      },
      contractPriceOption: {
        requestUrl: "/api/v1/rms/selectbmsshipContractPriceList?apiId=500",
        selectionType: "radio",
        map: []
      },
      loadShipOption: {
        requestUrl: "/api/v1/bms/findLoadByBatch?apiId=505",
        selectionType: "radio",
        map: []
      }
    };
  },
  mounted() {
    //this.getPorts();
  },
  computed: {
    batch() {
      return this.batchId;
    }
  },
  watch: {
    batch() {
      console.log("无变化l");
      this.findLoadByBatch();
    }
  },
  methods: {
    findLoadByBatch() {
      if (this.batchId != null) {
        this.loadShipOption.requestUrl="/api/v1/bms/findLoadByBatch?apiId=505&batchId="+this.batchId+
        "&i="+new Date();
      }
    },
    //右侧选中框
    ondrawer(num, index) {
      if (num == 5) {
        this.batchOption.requestUrl =
          "/api/v1/uc/findBatchHavingLoad?apiId=502" + "&i=" + new Date();
      } else if (num == 6) {
        this.contractPriceOption.requestUrl =
          "/api/v1/rms/selectbmsshipContractPriceList?apiId=500" +
          "&i=" +
          new Date();
      }
      this.drawer = true;
      this.indexNum = index;
      this.a = num;
      // 清空当前输入框中的数据
      this.input = "";
    },
    handleClose(done) {
      done();
    },
    onclick(a) {
      if (a == 5) {
        this.batchOption.requestUrl =
          "/api/v1/uc/findBatchHavingLoad?apiId=502&index=" +
          this.input +
          "&i=" +
          new Date();
      } else if (a == 6) {
        this.contractPriceOption.requestUrl =
          "/api/v1/rms/selectbmsshipContractPriceList?apiId=500&con=" +
          this.input;
      }
    },
    //修改选中
    batchChange(selection) {
      console.log("SELECTION：",selection);
      this.totalResultId=selection.totalResultId;
      if (JSON.stringify(selection).length > 2) {
        this.batchId = selection.batchId;
        this.purchaseOrderId = selection.purchaseOrderId;
        this.batchName =
          selection.materialName + selection.resultForeignShipName;
      } else {
        this.batchId = null;
        this.purchaseOrderId = null;
        this.batchName = "";
      }
    },
    priceChange(selection) {
      this.form.Array[this.indexNum].unitPriceId = selection.resultId;
      this.form.Array[this.indexNum].unitPrice = selection.unitPrice;
      //   this.form.unitPriceId = selection.resultId;
      //   this.form.unitPrice = selection.unitPrice;
      this.calculate();
    },
    loadShipChange(selection){
      console.log(selection);
      this.form=selection;
      this.calculate();
    },
    //计算水运费
    calculate() {
      if (this.form.realTonnage &&this.form.unitPrice) {
        let fee = new BigNumber(
          this.form.realTonnage
        );
        this.$set(
          this.form,
          "fee",
          fee.multipliedBy(this.form.unitPrice).toNumber()
        );
      }
      if (this.form.previewTonnage &&this.form.unitPrice) {
        let previewFee = new BigNumber(
          this.form.previewTonnage
        );
        this.$set(
          this.form,
          "previewFee",
          previewFee.multipliedBy(this.form.unitPrice).toNumber()
        );
      }
      if(this.form.makeTonnage &&this.form.unitPrice){
         let makeFee = new BigNumber(
            this.form.makeTonnage
          );
          this.$set(
            this.form,
            "makeFee",
            makeFee.multipliedBy(this.form.unitPrice).toNumber()
          );
      }
    },
    makeSure() {
      this.isLoading=true;
      let map = {
        batchId: this.form.batchId,
        purchaseOrderId: this.purchaseOrderId,
        unitPrice: this.form.unitPrice,
        unitPriceId: this.form.unitPriceId,
        realTonnage: this.form.realTonnage,
        fee: this.form.fee,
        previewTonnage:this.form.previewTonnage,
        previewFee:this.form.previewFee,
        makeTime: sjTime(this.form.makeTime),
        image: this.form.image,
        loadWater:this.form.loadWater,
        enFacotoryWater:this.form.enFacotoryWater,
        makeTonnage:this.form.makeTonnage,
        makeFee:this.form.makeFee,
        totalResultId:this.form.totalResultId,
        feeType: 3,
        portId:this.form.portId,
        userId: getCookie("userId")
      };
      console.log(map);
        if (
          !map.batchId  ||
          !map.purchaseOrderId  ||
          !map.unitPrice ||
          !map.unitPriceId  ||
          !map.realTonnage ||
          !map.fee  ||
          !map.makeTime ||
          !map.loadWater ||
          !map.enFacotoryWater ||
          !map.makeTonnage ||
          !map.makeFee ||
          !map.previewFee ||
          !map.previewTonnage
        ) {
          this.$message.error("存在空值！");
          this.isLoading = false;
        } else {
      this.axios
        .post("/api/v1/bms/addPortHandlingFeeSecond", 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);
        }
      });
    },
    beforeUpload(file) {
      this.upBool = true;
      const isLt2M = file.size < 1024 * 1024 * 0.5;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过500kb!");
      } else {
        let size = file.size / 1024;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.src = _URL.createObjectURL(file);
      }
      return isLt2M;
    },
    onError(err) {
      if (this.upBool) {
        if (this.num == 1) {
          this.form.image = null;
          this.$message.error("上传失败");
        }
      }
    },
    handleAvatarSuccess(res, file) {
      if (res.code) {
        this.upBool = false;
        if (this.num == 1) {
          this.form.image = res.data;
        }
        this.$message.success("上传成功");
      }
    },
    upCLick(val) {
      this.num = val;
    }
  }
};
</script>
<style lang="scss">
.searchSelect {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  .text {
    width: 40px;
  }
  .input {
    width: 200px;
  }
  .button {
    margin-left: 6px;
  }
}
.button-box {
  display: flex;
  justify-content: center;
  margin: 20px;
  .el-button {
    width: 80px;
    margin: 10px;
  }
}
.material {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-right: 100px;
  .text {
    display: inline-block;
    width: 170px;
    text-align: right;
  }
  .el-input {
    width: 250px;
  }
}
.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>
