<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>푸시메시지 발송</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row class="is-auth">
        <v-col cols="6" />
        <v-col cols="6">
          <v-row>
            <v-col>
              <input
                id="no-auth"
                v-model="isAuth"
                type="radio"
                value="false"
              >
              <label for="no-auth">
                본인인증을 하지 않은 유저만
              </label>
            </v-col>
            <v-col>
              <input
                id="auth"
                v-model="isAuth"
                type="radio"
                value="true"
              >
              <label for="auth">
                본인인증을 한 유저만
              </label>
            </v-col>
            <v-col>
              <input
                id="both"
                v-model="isAuth"
                type="radio"
                value=""
              >
              <label for="both">
                모두
              </label>
            </v-col>
          </v-row>
        </v-col>
      </v-row>

      <v-text-field
        v-model="member_id"
        label="회원번호(입력하지 않으면 전체회원에게 발송)"
        outlined
        required
      />

      <v-text-field
        v-model="title"
        label="제목"
        outlined
        required
      />

      <v-textarea
        v-model="message"
        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 v-if="member_id.length > 0">
              발송대상(회원번호): {{ send_member_id }}
            </v-card-text>
            <v-card-text v-else>
              발송대상(회원번호): 전체
            </v-card-text>
            <v-card-text>
              제목: {{ title }}
            </v-card-text>
            <v-card-text>
              내용: {{ message }}
            </v-card-text>
            <v-card-text>
              본인인증 여부: {{ isAuth === 'true' ? 'O' : isAuth === 'false' ? 'X' : '모두' }}
            </v-card-text>
            <v-card-actions v-show="!isLoading">
              <v-spacer />
              <v-btn
                color="blue darken-1"
                text
                @click="send"
              >
                발송
              </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/push'

export default {
  name: "Push",

  data() {
    return {
      show_confirm: false,
      isLoading: false,
      member_id: '',
      send_member_id: [],
      title: '',
      message: '',
      isAuth: ''
    }
  },

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

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

    confirm() {
      if (this.title.trim() === '') {
        return this.notifyError('제목을 입력하세요')
      }

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

      if (!this.isLoading) {
        if (this.member_id.length > 0) {
          this.send_member_id = Array.from(
            new Set(
              this.member_id.split(",")
                .map(memberId => memberId.trim())
                .filter(memberId => Number(memberId))
            )
          )
        }
        this.show_confirm = true
      }
    },

    cancel() {
      this.show_confirm = false
    },

    async send() {
      if (!this.isLoading) {
        this.isLoading = true

        try {
          await api.sendPush(
            this.send_member_id,
            this.title,
            this.message,
            this.isAuth
          )
        } finally {
          this.isLoading = false
          this.show_confirm = false
          this.member_id = ''
          this.send_member_id = []
          this.title = ''
          this.message = ''
          this.isAuth = ''
        }
      }
    }
  }
}
</script>

<style scoped>
.is-auth {
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
