<template>
  <div class="app-container">
    <div class="title">{{ $t("银行收款明细对应核销比例设置") }}</div>

    <div class="main">
      <div class="sideBar">
        {{ $t("核销比例") }} <span class="unit">{{ $t("单位(%)") }}</span>
      </div>
      <el-form :inline="true" :model="form" ref="ruleForm" :rules="rules" class="inlineForm">
        <el-form-item prop="writeOffDown">
          <el-input-number v-model="form.writeOffDown" :controls="false" :precision="2" :min="0" :max="99.99"></el-input-number>
        </el-form-item>
        <div class="col">-</div>
        <el-form-item prop="writeOffUp">
          <el-input-number v-model="form.writeOffUp" :controls="false" :precision="2" :min="0.01" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item class="subButton">
          <el-button type="primary" @click="onSubmit('ruleForm')">{{ $t("提交") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loadbankWriteOffRange, updatebankWriteOffRange } from "@/api/ecw/financial"
export default {
  name: "EcwFinancialSetautoapprovalrules",
  data() {
    return {
      form: {
        id: null,
        writeOffDown: "",
        writeOffUp: ""
      },
      rules: {
        writeOffDown: [{ required: true, message: this.$t("请输入核销比例下界"), trigger: "blur" }],
        writeOffUp: [{ required: true, message: this.$t("请输入核销比例上界"), trigger: "blur" }]
      }
    }
  },
  created() {
    this.getBankWriteOffRange()
  },
  activated() {
    this.getBankWriteOffRange()
  },
  methods: {
    async getBankWriteOffRange() {
      const { data } = await loadbankWriteOffRange()
      this.form.id = data.id
      this.form.writeOffDown = data.writeOffDown / 100
      this.form.writeOffUp = data.writeOffUp / 100
      this.$refs["ruleForm"].clearValidate()
    },
    openConfirmBox() {
      if (this.form.writeOffDown > this.form.writeOffUp) {
        this.$message({
          type: "info",
          message: this.$t("核销比例数值错误")
        })
        return
      }
      this.$confirm(this.$t("此操作将修改自动核销比例?"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning"
      })
        .then(() => {
          const params = {
            id: this.form.id,
            writeOffDown: this.form.writeOffDown * 100,
            writeOffUp: this.form.writeOffUp * 100
          }
          updatebankWriteOffRange(params).then((res) => {
            this.$message({
              message: this.$t("修改成功"),
              type: "success"
            })
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除")
          })
        })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.openConfirmBox()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 26px;
  padding: 60px 0;
  text-align: center;
}
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  .unit {
    font-size: 12px;
    color: #a1a1a1;
  }
  .sideBar {
    margin-bottom: 22px;
    font-size: 18px;
    padding-right: 20px;
  }
  .inlineForm {
    display: flex;
  }
  .col {
    width: 60px;
    display: flex;
    margin-bottom: 22px;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
  .subButton {
    padding-left: 20px;
  }
}
</style>
