<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>시리즈 장르 관리</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col cols="10" />
        <v-col>
          <v-btn
            block
            color="#9970ff"
            dark
            depressed
            @click="showWriteDialog"
          >
            시리즈 장르 등록
          </v-btn>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-data-table
            :headers="headers"
            :items="series_genre_list"
            :loading="is_loading"
            item-key="id"
            class="elevation-1"
            hide-default-footer
            disable-pagination
          >
            <template v-slot:body="props">
              <draggable
                v-model="props.items"
                tag="tbody"
                @end="onDropCallback(props.items)"
              >
                <tr
                  v-for="(item, index) in props.items"
                  :key="index"
                >
                  <td>
                    {{ item.genre }}
                  </td>
                  <td>
                    <h3 v-if="item.isAdult">
                      O
                    </h3>
                    <h3 v-else>
                      X
                    </h3>
                  </td>
                  <td>
                    <v-row>
                      <v-col />
                      <v-col>
                        <v-btn
                          :disabled="is_loading"
                          @click="deleteConfirm(item)"
                        >
                          삭제
                        </v-btn>
                      </v-col>
                      <v-col />
                    </v-row>
                  </td>
                </tr>
              </draggable>
            </template>
          </v-data-table>
        </v-col>
      </v-row>
    </v-container>

    <v-dialog
      v-model="show_write_dialog"
      max-width="1000px"
      persistent
    >
      <v-card>
        <v-card-title>
          시리즈 장르 등록
        </v-card-title>
        <v-card-text>
          <v-row align="center">
            <v-col cols="4">
              장르
            </v-col>
            <v-col cols="8">
              <v-text-field
                v-model="series_genre.genre"
                label="장르"
                required
              />
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-text>
          <v-row>
            <v-col cols="4">
              19금
            </v-col>
            <v-col cols="8">
              <input
                v-model="series_genre.is_adult"
                type="checkbox"
              >
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions v-show="!is_loading">
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="cancel"
          >
            취소
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="submit"
          >
            등록
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog
      v-model="show_delete_confirm_dialog"
      max-width="400px"
      persistent
    >
      <v-card>
        <v-card-text />
        <v-card-text>
          "{{ selected_series_genre.genre }}"을 삭제하시겠습니까?
        </v-card-text>
        <v-card-actions v-show="!is_loading">
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="deleteCancel"
          >
            취소
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="deleteSeriesGenre"
          >
            확인
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import Draggable from 'vuedraggable';
import * as api from '@/api/audio_content_series';

export default {
  name: "ContentSeriesGenre",
  components: {Draggable},
  data() {
    return {
      is_loading: false,
      show_delete_confirm_dialog: false,
      show_write_dialog: false,
      selected_series_genre: {},
      series_genre: {is_adult: false},
      series_genre_list: [],
      headers: [
        {
          text: '장르',
          align: 'center',
          sortable: false,
          value: 'genre',
        },
        {
          text: '19금',
          align: 'center',
          sortable: false,
          value: 'isAdult',
        },
        {
          text: '관리',
          align: 'center',
          sortable: false,
          value: 'management'
        },
      ],
    }
  },

  async created() {
    await this.getSeriesGenreList();
  },

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

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

    showWriteDialog() {
      this.show_write_dialog = true
    },

    cancel() {
      this.series_genre = {is_adult: false}
      this.selected_series_genre = {}
      this.show_write_dialog = false
    },

    deleteConfirm(series_genre) {
      this.selected_series_genre = series_genre
      this.show_delete_confirm_dialog = true
    },

    deleteCancel() {
      this.selected_series_genre = {}
      this.show_delete_confirm_dialog = false
    },

    async submit() {
      if (this.is_loading) return;
      this.isLoading = true

      try {
        const res = await api.createAudioContentSeriesGenre(this.series_genre.genre, this.series_genre.is_adult)
        if (res.status === 200 && res.data.success === true) {
          this.cancel()
          this.notifySuccess('등록되었습니다.')

          this.series_genre_list = []
          await this.getSeriesGenreList()
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async getSeriesGenreList() {
      this.is_loading = true

      try {
        const res = await api.getAudioContentSeriesGenreList()
        if (res.status === 200 && res.data.success === true) {
          this.series_genre_list = res.data.data
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async onDropCallback(items) {
      this.series_genre_list = items
      const ids = items.map((item) => {
        return item.id
      })

      try {
        this.is_loading = true
        const res = await api.updateAudioContentSeriesGenreOrders(ids)
        if (res.status === 200 && res.data.success === true) {
          this.notifySuccess(res.data.message)
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async deleteSeriesGenre() {
      if (this.is_loading) return;
      this.is_loading = true

      try {
        let request = {id: this.selected_series_genre.id, isActive: false}

        const res = await api.updateAudioContentSeriesGenre(request)
        if (res.status === 200 && res.data.success === true) {
          this.show_delete_confirm_dialog = false
          this.cancel()
          this.notifySuccess('삭제되었습니다.')

          this.series_genre_list = []
          await this.getSeriesGenreList()
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },
  }
}
</script>

<style scoped>

</style>