<template>
  <el-dialog
    class="entryDialog classCUploadDialog"
    title="重量调整"
    :visible.sync="batchModifyVisible"
    v-loading="dialogLoading"
    :show-close="false"
    width="700px"
    :close-on-click-modal="false"
  >
    <div>
      <el-form
        class="fedexFormStyle"
        ref="batchModifyForm"
        :model="weightForm"
        :rules="weightFormRules"
        label-position="left"
        size="small"
      >
        <el-row :gutter="5">
          <el-col :span="16">
            <Formitem label="提运单号" prop="billNo" type="edit">
              <el-input
                type="text"
                id="inputInner-edit-billNo"
                class="inputShadow"
                resize="none"
                v-model="weightForm.billNo"
                clearable
                placeholder="请输入提运单号"
                @change="inputChange"
              ></el-input>
            </Formitem>
          </el-col>
          <el-col :span="8">
            <Formitem label="件数" prop="count" type="edit">
              <el-input
                type="text"
                id="inputInner-edit-count"
                class="inputShadow"
                resize="none"
                v-model="weightForm.count"
                clearable
                disabled
                placeholder="请输入件数"
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <Formitem label="原毛重" prop="totalWeight" type="edit">
              <el-input
                type="text"
                id="inputInner-edit-totalWeight"
                class="inputShadow"
                resize="none"
                v-model="weightForm.totalWeight"
                clearable
                disabled
                placeholder="请输入原毛重"
              ></el-input>
            </Formitem>
          </el-col>
          <el-col :span="12">
            <Formitem label="修改后毛重" prop="weight" type="edit">
              <el-input
                type="text"
                id="inputInner-edit-weight"
                class="inputShadow"
                resize="none"
                v-model="weightForm.weight"
                clearable
                placeholder="请输入修改后毛重"
                @change="weightChange"
              ></el-input>
            </Formitem>
          </el-col>
          <el-col :span="24">
            <Formitem label="" prop="content" type="edit">
              <!-- <el-input
            type="textarea"
            id="inputInner-edit-content"
            class="inputShadow"
            resize="none"
            :rows="3"
            v-model="weightForm.content"
            clearable
            placeholder="请输入修改内容"
          ></el-input> -->
              <div class="form-item-tips">
                <h2>修改内容</h2>
                <div>
                  {{ weightForm.content }}
                </div>
              </div>
            </Formitem>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialogOption entrySave revokeOperation">
      <el-button
        class="entrySaveButton entrySaveButton-background revokeSubmitBtn"
        type="primary"
        @click="formSubmit"
        >确定</el-button
      >
      <el-button class="entrySaveButton" @click="cancelModify">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { modifyWeight, getWeight } from "@/api/declareData-api.js";
import Big from "big.js";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    selectedDatas: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    var checkQty = (rule, value, callback) => {
      if (value === undefined || value === null || value === "") {
        callback(new Error("请输入数值"));
        return;
      }

      if (isNaN(value)) {
        callback(new Error("请输入有效的数字"));
        return;
      }

      if (value < 0) {
        callback(new Error("数值不能为负"));
        return;
      }

      const valueStr = value.toString();

      const parts = valueStr.split(".");
      const integerPart = parts[0];
      const decimalPart = parts[1] || "";

      // if (integerPart.length > 14) {
      //   callback(new Error("整数部分最多14位"));
      //   return;
      // }

      // if (decimalPart.length > 5) {
      //   callback(new Error("小数部分最多5位"));
      //   return;
      // }

      callback();
    };
    return {
      batchModifyVisible: false,
      dialogLoading: false,
      weightForm: {
        billNo: "",
        count: "",
        totalWeight: "",
        weight: "",
        content: "",
      },
      weightFormRules: {
        billNo: [
          { required: true, message: "请输入提运单号", trigger: "blur" },
        ],
        weight: [{ validator: checkQty, trigger: "blur" }],
      },
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.batchModifyVisible = val;
        this.weightForm.billNo = "";
        this.weightForm.count = "";
        this.weightForm.totalWeight = "";
        this.weightForm.weight = "";
        this.weightForm.content = "";
      }
    },
  },
  created() {},
  methods: {
    inputChange(e) {
      console.log(e);
      let params = {
        billNo: e,
      };
      getWeight(params).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.weightForm.count = res.data.count;
          this.weightForm.totalWeight = res.data.totalWeight;
        }
      });
    },
    weightChange(e) {
      // 总单号:02331578503，共 3000件，公斤数从5300KG改为5000KG,更改-300KG，调整比例为-5.66%
      const a = new Big(this.weightForm.totalWeight);
      const b = new Big(this.weightForm.weight);
      this.weightForm.content = `总单号:${this.weightForm.billNo}，共 ${
        this.weightForm.count
      }件，公斤数从 ${this.weightForm.totalWeight}KG改为${
        this.weightForm.weight
      }KG，更改 ${b.minus(a)}KG，调整比例为${(b.minus(a).div(a) * 100).toFixed(
        2
      )}%`;
    },

    formSubmit() {
      this.$refs.batchModifyForm.validate((valid) => {
        if (valid) {
          this.dialogLoading = true;
          let obj = {
            billNo: this.weightForm.billNo,
            weight: this.weightForm.weight,
          };
          console.log("datas==", obj);
          modifyWeight(obj)
            .then((res) => {
              if (res.code === "200") {
                this.msgSuccess("修改成功");
                this.cancelModify(1);
              } else {
                this.alertWarningMsg(res.message);
                this.cancelModify(0);
              }
            })
            .catch((err) => {
              console.log(err);
              this.alertWarningMsg(err.message);
              this.cancelModify(0);
            });
        } else {
          return false;
        }
      });
    },

    cancelModify(val) {
      this.batchModifyVisible = false;
      this.dialogLoading = false;
      this.$emit("cancelModify", val);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

.form-item-tips {
  height: 80px;
  background-color: #f2f2f2;
  margin-bottom: 5px;
  h2 {
    position: relative;
    font-size: 0.75rem;
    font-weight: 700;
    color: #333;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    padding: 0 0 0 0.6rem;
    line-height: 14px;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: text;
    z-index: 5;
  }
  div {
    padding: 0.4rem 0.6rem 0;
    line-height: 14px;
  }
}

.revokeOperation {
  margin-bottom: 25px;
  .revokeSubmitBtn {
    margin-right: 30px;
  }
}
</style>