<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="4">
          <v-card>
            <v-img
              :src="series_detail.coverImageUrl"
              class="cover-image"
            />
            <v-card-text>
              제목 : {{ series_detail.title }}
            </v-card-text>
            <v-card-text>
              소개 :
              <vue-show-more-text
                :text="series_detail.introduction"
                :lines="2"
              />
            </v-card-text>
            <v-card-text>
              연재요일 : {{ series_detail.publishedDaysOfWeek }}
            </v-card-text>
            <v-card-text>
              장르 : {{ series_detail.genre }}
            </v-card-text>
            <v-card-text>
              키워드 : {{ series_detail.keywords }}
            </v-card-text>
            <v-card-text>
              연령제한 : <span v-if="series_detail.isAdult">19세이상</span><span v-else>전체이용가</span>
            </v-card-text>
            <v-card-text>
              완결여부 : {{ series_detail.state }}
            </v-card-text>
            <v-card-text v-show="series_detail.writer !== undefined && series_detail.writer !== null">
              작가 : {{ series_detail.writer }}
            </v-card-text>
            <v-card-text v-show="series_detail.studio !== undefined && series_detail.studio !== null">
              제작사 : {{ series_detail.studio }}
            </v-card-text>
          </v-card>
        </v-col>
        <v-col cols="8">
          <v-row>
            <v-col cols="8" />
            <v-col cols="4">
              <v-btn
                block
                color="#3bb9f1"
                dark
                depressed
                @click="showAddContent"
              >
                콘텐츠 추가
              </v-btn>
            </v-col>
          </v-row>
          <v-row>
            <v-col v-if="series_content_list.length > 0">
              <v-simple-table>
                <template>
                  <thead>
                    <tr>
                      <th class="text-center">
                        썸네일
                      </th>
                      <th class="text-center">
                        제목
                      </th>
                      <th class="text-center">
                        19금
                      </th>
                      <th class="text-center">
                        관리
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="content in series_content_list"
                      :key="content.contentId"
                    >
                      <td align="center">
                        <v-img
                          :src="content.coverImage"
                          max-width="100"
                          class="content-cover-image"
                        />
                      </td>
                      <td align="center">
                        {{ content.title }}
                      </td>
                      <td align="center">
                        <div v-if="content.isAdult">
                          O
                        </div>
                        <div v-else>
                          X
                        </div>
                      </td>
                      <td align="center">
                        <v-btn
                          color="#3bb9f1"
                          @click="deleteConfirm(content)"
                        >
                          삭제
                        </v-btn>
                      </td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
              <br><br>
              <v-row
                v-if="total_page > 0"
                class="text-center"
              >
                <v-col>
                  <v-pagination
                    v-model="page"
                    :length="total_page"
                    circle
                    @input="next"
                  />
                </v-col>
              </v-row>
            </v-col>
            <v-col
              v-else
              class="no-series-content"
            >
              등록된 콘텐츠가 없습니다.
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>

    <v-dialog
      v-model="show_add_series_content"
      max-width="1000px"
      persistent
    >
      <v-card>
        <v-card-title>
          콘텐츠 추가
        </v-card-title>
        <v-card-text>
          <v-text-field
            v-model="search_word"
            label="콘텐츠 제목"
            @keyup.enter="searchContentNotInSeries"
          >
            <v-btn
              slot="append"
              color="#3bb9f1"
              dark
              @click="searchContentNotInSeries"
            >
              검색
            </v-btn>
          </v-text-field>
        </v-card-text>
        <v-card-text v-if="search_content_list.length > 0 || add_content_list.length > 0">
          <v-row>
            <v-col>
              검색결과
              <v-simple-table>
                <template v-slot:default>
                  <thead>
                    <tr>
                      <th class="text-center">
                        제목
                      </th>
                      <th />
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="content in search_content_list"
                      :key="content.contentId"
                    >
                      <td>{{ content.title }}</td>
                      <td>
                        <v-btn
                          color="#3bb9f1"
                          @click="addContent(content)"
                        >
                          추가
                        </v-btn>
                      </td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </v-col>
            <v-col v-if="add_content_list.length > 0">
              추가할 콘텐츠
              <v-simple-table>
                <template>
                  <thead>
                    <tr>
                      <th class="text-center">
                        제목
                      </th>
                      <th />
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="content in add_content_list"
                      :key="content.contentId"
                    >
                      <td>{{ content.title }}</td>
                      <td>
                        <v-btn
                          color="#3bb9f1"
                          @click="removeContent(content)"
                        >
                          제거
                        </v-btn>
                      </td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </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="addContentInSeries"
          >
            추가
          </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 v-if="selected_series_content !== null">
          {{ selected_series_content.title }} 삭제하시겠습니까?
        </v-card-text>
        <v-card-text v-else>
          삭제하시겠습니까?
        </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="removeContentInSeries"
          >
            확인
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog
      v-model="is_loading"
      max-width="400px"
      persistent
    >
      <v-card>
        <v-card-text>
          <v-progress-circular
            indeterminate
          />
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

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

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

export default {
  name: "ContentSeriesDetail",

  components: {VueShowMoreText},

  data() {
    return {
      is_loading: false,
      series_id: 0,
      series_detail: {},
      series_content_list: [],
      selected_series_content: null,
      page: 1,
      total_page: 0,

      search_word: '',
      add_content_list: [],
      search_content_list: [],
      show_add_series_content: false,

      show_delete_confirm_dialog: false,
    }
  },

  async created() {
    this.series_id = this.$route.params.seriesId
    if (this.series_id !== undefined && this.series_id > 0) {
      await this.getSeriesDetail()
      await this.getSeriesContentList()
    } else {
      this.$router.go(-1);
    }
  },

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

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

    cancel() {
      this.search_word = ''
      this.add_content_list = []
      this.search_content_list = []
      this.selected_series_content = null
      this.show_add_series_content = false
      this.show_delete_confirm_dialog = false
    },

    deleteConfirm(series_content) {
      this.selected_series_content = series_content
      this.show_delete_confirm_dialog = true
    },

    deleteCancel() {
      this.cancel();
    },

    showAddContent() {
      this.show_add_series_content = true
    },

    addContent(content) {
      this.search_content_list = this.search_content_list.filter((item) => {
        return item.contentId !== content.contentId
      });
      this.add_content_list.push(content)
    },

    removeContent(content) {
      this.add_content_list = this.add_content_list.filter((item) => {
        return item.contentId !== content.contentId
      });
      this.search_content_list.push(content)
    },

    async searchContentNotInSeries() {
      if (this.search_word.length < 2) {
        this.notifyError('검색어를 2글자 이상 입력하세요.')
        return
      }

      this.is_loading = true

      try {
        const res = await api.searchContentNotInSeries(this.series_id, this.search_word)

        if (res.data.success === true) {
          this.search_content_list = res.data.data
          if (res.data.data.length <= 0) {
            this.notifyError('검색결과가 없습니다.')
          }
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async addContentInSeries() {
      this.is_loading = true
      const contentIdList = this.add_content_list.map((item) => {
        return item.contentId
      })

      try {
        const res = await api.addingContentToTheSeries(this.series_id, contentIdList)
        if (res.status === 200 && res.data.success === true) {
          this.cancel()
          this.page = 1
          this.total_page = 0
          await this.getSeriesContentList()
        } else {
          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async getSeriesDetail() {
      this.is_loading = true

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

    async next() {
      await this.getSeriesContentList()
    },

    async getSeriesContentList() {
      try {
        const res = await api.getSeriesContent(this.series_id, this.page)
        if (res.status === 200 && res.data.success === true) {
          const data = res.data.data
          this.series_content_list = data.items

          const total_page = Math.ceil(data.totalCount / 10)
          if (total_page <= 0)
            this.total_page = 1
          else
            this.total_page = total_page
        } else {
          this.notifyError(res.data.message || '콘텐츠를 불러오지 못했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      }
    },

    async removeContentInSeries() {
      this.is_loading = true

      try {
        const res = await api.removeContentInTheSeries(this.series_id, this.selected_series_content.contentId)

        if (res.status === 200 && res.data.success === true) {
          this.page = 1
          this.total_page = 0
          this.series_content_list = []
          this.cancel()
          this.notifySuccess('삭제되었습니다.')
          await this.getSeriesContentList()
        } else {
          this.notifyError('콘텐츠를 삭제하지 못했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('콘텐츠를 삭제하지 못했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },
  },
}
</script>

<style scoped>
.v-card__text {
  text-align: left;
}

.cover-image {
  aspect-ratio: 1/1.4;
}

.content-cover-image {
  aspect-ratio: 1;
}

.no-series-content {
  height: 50vh;
  margin-top: 100px;
}
</style>
