<template>
  <el-dialog
    :visible="visible"
    title="ISSUE VOUCHER"
    custom-class="issuance-dialog"
    :before-close="onHide">
    <el-form
      ref="dialogForm"
      :model="form"
      :rules="rules"
      class="filter-container"
      label-position="right"
      label-width="130px">
      <el-form-item
        label="Select User:"
        prop="userPk">
        <el-select
          v-model="form.userPk"
          class="dialog-form-item"
          filterable
          remote
          clearable
          :remote-method="getUserOptions"
          placeholder="Search user email">
          <el-option
            v-for="(item,index) in options.user"
            :key="index"
            :label="item.email"
            :value="item.userPk"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="Select Voucher:"
        prop="voucherId">
        <el-select
          v-model="form.voucherId"
          class="dialog-form-item"
          filterable
          remote
          clearable
          :remote-method="getVoucherOptions"
          placeholder="Search voucher name">
          <el-option
            v-for="(item,index) in options.voucher"
            :key="index"
            :label="item.voucherName"
            :value="item.voucherId"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="Remarks:">
        <el-input
          class="dialog-form-item"
          v-model="form.remarks"
          type="textarea"
          maxlength="300"
          :autosize="autoSize"/>
      </el-form-item>
      <div class="dialog-button">
        <el-button
          type="cancel"
          @click="onHide">
          CANCEL
        </el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="onSubmit">
          SUBMIT
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import api from '../../http/api/voucher.js';
export default {
  name: "DialogIssue",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        userPk: "",
        voucherId: "",
        remarks: ""
      },
      rules: {
        userPk: {
          required: true,
          trigger: "change",
          message: "Please select user"
        },
        voucherId: {
          required: true,
          trigger: "change",
          message: "Please select voucher"
        }
      },
      options: {
        user: [],
        voucher: []
      },
      autoSize: {
        minRows: 3,
        maxRows: 8
      },
      btnLoading: false
    };
  },
  watch: {
    visible: {
      handler(n, o) {
        if (n) {
          this.form.userPk = "";
          this.form.voucherId = "";
          this.form.remarks = "";
          this.$nextTick(() => {
            this.$refs.dialogForm.clearValidate();
          })
        }
      }
    }
  },
  mounted() {
    this.getUserOptions();
    this.getVoucherOptions();
  },
  methods: {
    onHide(e, a) {
      this.$emit("hide", a)
    },
    getUserOptions(word) {
      api.getIssueUserOptions({
        email: word
      }).then(res => {
        if (res.data) {
          this.options.user = res.data
        } else {
          this.options.user = []
        }
      }).catch(() => {
        this.$message({
          message: err,
          type: 'error',
          duration: 3000,
        })
        this.options.user = []
      })
    },
    getVoucherOptions(word) {
      api.getVoucherOptions({
        voucherName: word
      }).then(res => {
        if (res.data) {
          this.options.voucher = res.data
        } else {
          this.options.voucher = []
        }
      }).catch(() => {
        this.$message({
          message: err,
          type: 'error',
          duration: 3000,
        })
        this.options.voucher = []
      })
    },
    onSubmit() {
      this.$refs.dialogForm.validate(result => {
        if (result) {
          this.onIssuance();
        }
      })
    },
    onIssuance() {
      this.btnLoading = true;
      api.issueVoucher2User(this.form).then(res => {
        this.$message({
          type: 'success',
          message: "Successfully issued"
        })
        this.onHide(false, true)
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      }).finally(() => {
        this.btnLoading = false;
      })
    }
  }
}
</script>

<style scoped>
>>> .issuance-dialog {
  width: 100%;
  padding: 0 10px;
  max-width: 520px;
}
.dialog-form-item {
  width: 100%;
  max-width: 350px;
}
.dialog-form-item >>> .el-textarea__inner {
  font-family: sans-serif;
}
.dialog-button {
  display: flex;
  align-items: center;
  padding-top: 30px;
  justify-content: center;
}
</style>