<template>
  <custom-modal v-model="visible" title="Ratio" :width="240" @cancel="handleReject">
    <a-input-number :min="-9999" v-model="ratio"></a-input-number>

    <div slot="custom-footer">
      <a-button type="primary" @click="handleOk">OK</a-button>
      <a-button @click="handleCancel">Cancel</a-button>
    </div>
  </custom-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      ratio: 1
    }
  },
  methods: {
    getRatio() {
      this.visible = true
      this.ratio = 1

      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    handleOk() {
      this.resolve(this.ratio)
      this.visible = false
    },

    handleCancel() {
      this.resolve()
      this.visible = false
    },

    handleReject() {
      this.reject('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
.ant-input-number {
  width: 100%;
}
</style>
