<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>캔 충전</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>
    <v-container>
      <v-text-field
        v-model="account_id"
        label="회원번호"
        outlined
        required
      />

      <v-text-field
        v-model="method"
        label="기록 내용"
        outlined
        required
      />

      <v-text-field
        v-model="can"
        label="지급할 캔 수"
        outlined
        required
      />

      <v-row>
        <v-col cols="10" />
        <v-col>
          <v-btn
            block
            color="#9970ff"
            dark
            depressed
            @click="confirm"
          >
            캔 지급
          </v-btn>
        </v-col>
      </v-row>
      <v-row>
        <v-dialog
          v-model="show_confirm"
          max-width="400px"
          persistent
        >
          <v-card>
            <v-card-title>캔 지급 확인</v-card-title>
            <v-card-text>
              회원번호: {{ account_id }}
            </v-card-text>
            <v-card-text>
              기록내용: {{ method }}
            </v-card-text>
            <v-card-text>
              지급할 캔 수: {{ can }} 캔
            </v-card-text>
            <v-card-actions v-show="!is_loading">
              <v-spacer />
              <v-btn
                color="blue darken-1"
                text
                @click="submit"
              >
                캔 지급
              </v-btn>
              <v-spacer />
              <v-btn
                color="blue darken-1"
                text
                @click="cancel"
              >
                취소
              </v-btn>
              <v-spacer />
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import * as api from '@/api/can'

export default {
  name: "CanCharge",

  data() {
    return {
      show_confirm: false,
      is_loading: false,
      account_id: '',
      method: '',
      can: ''
    }
  },

  methods: {
    notifyError(message) {
      this.$dialog.notify.error(message)
    },

    notifySuccess(message) {
      this.$dialog.notify.success(message)
    },

    confirm() {
      if (this.account_id.trim() === '' || isNaN(this.account_id)) {
        return this.notifyError('캔을 지급할 회원의 회원번호를 입력하세요.')
      }

      if (this.method.trim() === '') {
        return this.notifyError('기록할 내용을 입력하세요')
      }

      if (isNaN(this.can)) {
        return this.notifyError('캔은 숫자만 넣을 수 있습니다.')
      }

      if (!this.is_loading) {
        this.show_confirm = true
      }
    },

    cancel() {
      this.show_confirm = false
    },

    async submit() {
      if (!this.is_loading) {
        this.is_loading = true

        try {
          this.show_confirm = false

          const res = await api.paymentCan(Number(this.can), this.method, this.account_id)
          if (res.status === 200 && res.data.success === true) {
            this.notifySuccess('캔이 지급되었습니다.')
            this.account_id = ''
            this.method = ''
            this.can = ''
            this.is_loading = false
          } else {
            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
            this.is_loading = false
          }
        } catch (e) {
          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
          this.is_loading = false
        } finally {
          this.is_loading = false
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
