<template>
  <el-dialog
    title="详情"
    :visible.sync="open"
    width="70%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="所属单位" class="form-item">
        <div>{{ ruleForm.orgName }}</div>
      </el-form-item>
      <el-form-item label="物料编码" class="form-item">
        <div>{{ ruleForm.mtrlNo }}</div>
      </el-form-item>
      <el-form-item label="物料名称" class="form-item">
        <div>{{ ruleForm.mtrlDes }}</div>
      </el-form-item>
      <el-form-item label="计量单位" class="form-item">
        <div>{{ ruleForm.mtrlUnit }}</div>
      </el-form-item>
      <el-form-item label="定额上限" class="form-item">
        <div>{{ ruleForm.rationUpper }}</div>
      </el-form-item>
      <el-form-item label="库存数" class="form-item">
        <div>{{ ruleForm.commodityStockNum }}</div>
      </el-form-item>
      <el-form-item label="定额下限" prop="ratioLower" class="form-item">
        <el-input v-model="ruleForm.ratioLower"></el-input>
      </el-form-item>
      <el-form-item label="备注" class="form-item">
        <el-input v-model="ruleForm.notes" type="textarea"></el-input>
      </el-form-item>
      <el-form-item
        style="width: 100%; text-align: center"
        class="form-item-btn"
      >
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提 交</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateQuotValue } from "@/api/home";
export default {
  props: {
    getData: Function,
  },
  data() {
    return {
      open: false,
      ruleForm: {
        orgName: "",
        mtrlNo: "",
        mtrlDes: "",
        mtrlUnit: "",
        rationUpper: "",
        ratioLower: "",
        commodityStockNum: "",
        quotaLower: "",
        notes: "",
      },
      rules: {
        ratioLower: [{ required: true, message: "定额下限", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleInit({ data }) {
      this.ruleForm = data;
      this.open = true;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.open = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.quotaLower = this.ruleForm.ratioLower;
          let obj = {
            ...this.ruleForm,
          };
          updateQuotValue(obj).then((res) => {
            if (res && res.code == 200) {
              this.getData();
              this.$message.success("操作成功");
              this.open = false;
            } else {
              this.$message.warning("操作失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
}
.form-item {
  width: 50%;
}
::v-deep {
  .form-item-btn .el-form-item__content {
    margin-left: 0px !important;
  }
}
</style>
