<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>시리즈 리스트</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col class="text-left total-count">
          전체 <span>{{ total_count }}</span> 개
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-simple-table class="elevation-10">
            <template>
              <thead>
                <tr>
                  <th class="text-center">
                    시리즈 번호
                  </th>
                  <th class="text-center">
                    썸네일
                  </th>
                  <th class="text-center">
                    제목
                  </th>
                  <th class="text-center">
                    내용
                  </th>
                  <th class="text-center">
                    크리에이터
                  </th>
                  <th class="text-center">
                    장르
                  </th>
                  <th class="text-center">
                    작품개수
                  </th>
                  <th class="text-center">
                    연재여부
                  </th>
                  <th class="text-center">
                    19금
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="item in series_list"
                  :key="item.id"
                >
                  <td>{{ item.id }}</td>
                  <td align="center">
                    <v-img
                      max-width="70"
                      max-height="70"
                      :src="item.coverImageUrl"
                      class="rounded-circle"
                    />
                    <br>
                    <a
                      :href="item.coverImageUrl"
                      class="v-btn v-btn--outlined"
                    >
                      다운로드
                    </a>
                  </td>
                  <td>
                    <vue-show-more-text
                      :text="item.title"
                      :lines="3"
                    />
                  </td>
                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
                    <vue-show-more-text
                      :text="item.introduction"
                      :lines="3"
                    />
                  </td>
                  <td>{{ item.creatorNickname }}</td>
                  <td>{{ item.genre }}</td>
                  <td>{{ item.numberOfWorks }}</td>
                  <td>{{ item.state }}</td>
                  <td>
                    <div v-if="item.isAdult">
                      O
                    </div>
                    <div v-else>
                      X
                    </div>
                  </td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-col>
      </v-row>
      <v-row class="text-center">
        <v-col>
          <v-pagination
            v-model="page"
            :length="total_page"
            circle
            @input="next"
          />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

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

import VueShowMoreText from 'vue-show-more-text'

export default {
  name: "AudioContentSeriesList",

  components: {VueShowMoreText},

  data() {
    return {
      is_loading: false,
      page: 1,
      total_page: 0,
      total_count: 0,
      series_list: []
    }
  },

  async created() {
    await this.getAudioContentSeries()
  },

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

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

    async getAudioContentSeries() {
      this.is_loading = true

      try {
        const res = await api.getAudioContentSeriesList(this.page)
        if (res.status === 200 && res.data.success === true) {
          const data = res.data.data
          const total_page = Math.ceil(data.totalCount / 10)
          this.series_list = data.items
          this.total_count = data.totalCount

          if (total_page <= 0)
            this.total_page = 1
          else
            this.total_page = total_page
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }

        this.is_loading = false
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        this.is_loading = false
      }
    },

    async next() {
      await this.getAudioContentSeries()
    },
  }
}
</script>

<style>
.total-count {
  padding-bottom: 0;
}

.total-count > span {
  color: #3bb9f1;
}
</style>
