<template>
  <el-dialog
    title="VIEW APPROVAL"
    :visible="visible"
    :before-close="e => hideDialog(false)"
    :close-on-click-modal="!isApproval"
    class="approval-limit-dialog">
    <el-form
      ref="apvForm"
      :model="form"
      :rules="rules"
      label-width="190px"
      label-position="right"
      v-loading="loading.initial">
      <el-form-item
        prop="userName"
        class="form-item"
        label="Credit Limit Amount:">
        <label class="flex-item">{{data.creditLimitAmount}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="Approved users:">
        <label class="flex-item">{{data.approvedUsers}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="No. of Group Plan Users:">
        <label class="flex-item">{{data.approvedUsers}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="Individual Plan Amount:">
        <label class="flex-item">{{data.individualCredit}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="No. of Individual Plan Users:">
        <label class="flex-item">{{data.individualApprovedUsers}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="Status:">
        <label class="flex-item" :class="'status-' + data.creditLimitAudit.auditStatusName">{{data.creditLimitAudit.auditStatusName}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="Requester:">
        <label class="flex-item">{{data.requester}}</label>
      </el-form-item>
      <el-form-item
        prop="userName"
        class="form-item"
        label="Role:">
        <label class="flex-item">{{data.requesterRoleName}}</label>
      </el-form-item>
      <el-form-item
        prop="auditRemark"
        class="form-item"
        label-width="0">
        <div>
          <label>Remarks:</label>
          <el-input
            class="input-text"
            v-model="form.auditRemark"
            type="textarea"
            maxlength="1000"
            :readonly="!isApproval"
            :autosize="autoSize"/>
        </div>
      </el-form-item>
      <div
        class="flexcc"
        style="padding-top: 20px;"
        v-if="isApproval && data.creditLimitAudit.auditPermission">
        <el-button
          class="cancel-button button-reject"
          @click="onClickApprove(false)"
          :loading="loading.reject">
          REJECT
        </el-button>
        <el-button
          type="accent"
          @click="onClickApprove(true)"
          :disabled="loading.approve">
          APPROVE
        </el-button>
      </div>
      <div
        class="flexcc"
        style="padding-top: 20px;"
        v-else>
        <el-button
          class="cancel-button"
          @click="hideDialog(false)">
          CLOSE
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import limit from '@/api/limit';
export default {
  name: "LimitApproval",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number|String,
      default: ""
    },
  },
  data() {
    return {
      loading: {
        initial: false,
        approve: false,
        reject: false
      },
      data: {
        creditLimitAudit: {
          auditPermission: false
        }
      },
      form: {
        groupCreditPk: undefined,
        auditRemark: "",
      },
      rules: {
        auditRemark: {
          required: true,
          trigger: 'blur',
          message: 'Please input remarks'
        }
      },
      isApproval: false,
      autoSize: {
        minRows: 3,
        maxRows: 8
      }
    };
  },
  watch: {
    id(n, o) {
      if (this.visible && n) {
        this.$nextTick(() => {
          this.form.groupCreditPk = this.id;
          this.getLimitInfo();
        });
      }
    }
  },
  mounted() {
    
  },
  methods: {
    hideDialog(success) {
      this.init();
      this.$emit("hide", success || false);
    },
    init() {
      this.form = {
        groupCreditPk: undefined,
        auditRemark: ""
      }
      this.isApproval = false;
      this.loading.initial = false;
      this.$nextTick(() => {
        if (this.$refs['apvForm']) {
          this.$refs['apvForm'].clearValidate();
        }
      })
    },
    getLimitInfo() {
      this.loading.initial = true;
      limit.viewCreditLimit(this.id).then(res => {
        if (res.data) {
          this.data = res.data
          this.data.auditStatusName 
          if (this.data.creditLimitAudit) {
            this.isApproval = (this.data.creditLimitAudit.auditStatusName == 'Pending')
            if (this.data.creditLimitAudit.auditRemark) {
              this.form.auditRemark = this.data.creditLimitAudit.auditRemark
            }
          }
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      }).finally(() => {
        this.loading.initial = false;
      });
    },
    onClickApprove(Approved) {
      this.$refs.apvForm.validate((valid) => {
        if (valid) {
          this.$confirm("Confirm operation?", status, {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(res => {
            Approved
            ? this.onApprove()
            : this.onReject()
          })
        }
      });
    },
    onApprove() {
      this.loading.approve = true;
      limit.approveCreditLimit(this.form).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
        });
        this.hideDialog(true);
      }).catch(err => {
        this.$message.error(err);
      }).finally(() => {
        this.loading.approve = false;
      })
    },
    onReject() {
      this.loading.reject = true;
      limit.rejectCreditLimit(this.form).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
        });
        this.hideDialog(true);
      }).catch(err => {
        this.$message.error(err);
      }).finally(() => {
        this.loading.reject = false;
      })
    }
  }
}
</script>

<style scoped>
.approval-limit-dialog {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.approval-limit-dialog >>> .el-dialog {
  width: 100%;
  max-width: 600px;
  margin-top: 0 !important;
}
.approval-limit-dialog >>> .el-dialog__body {
  padding: 10px 20px 30px;
}
.approval-limit-dialog >>> .el-form {
  padding-right: 10px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5px;
}
.form-item {
  flex: 1;
  margin-left: 10px;
  margin-bottom: 10px;
}
.form-item >>> label {
  padding: 0;
}
.flex-item {
  width: 100%;
  min-width: 200px;
  max-width: 270px;
}
.flex-item2 {
  width: 100%;
  min-width: 200px;
}
label.flex-item {
  color: #000;
  font-size: 16px;
  max-width: none;
  padding-left: 15px;
}
.input-text >>> .el-textarea__inner {
  font-family: sans-serif;
}
@media screen and (max-width: 500px) {
  .flex-item {
    width: 100%;
    max-width: none;
  }
}
label.status-Pending {
  color: #ffa028;
}
label.status-Approved {
  color: #07a378;
}
label.status-Rejected {
  color: #ed3f3f;
}
.cancel-button.button-reject {
  border-color: #ED3F3F;
}
.cancel-button.button-reject >>> span {
  color: #ED3F3F;
}
</style>