<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>라이브 관리 (진행예정 / 진행중)</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col>
          <v-data-table
            :headers="headers"
            :items="liveList"
            :loading="isLoading"
            :items-per-page="-1"
            class="elevation-1"
            hide-default-footer
          >
            <template v-slot:item.id="{ item }">
              {{ item.id }}
            </template>

            <template v-slot:item.title="{ item }">
              {{ item.title }}
            </template>

            <template v-slot:item.content="{ item }">
              {{ item.content }}
            </template>

            <template v-slot:item.nickname="{ item }">
              {{ item.managerNickname }}
            </template>

            <template v-slot:item.cover="{ item }">
              <img
                :src="item.coverImageUrl"
                alt=""
                height="100"
                width="100"
              >
            </template>

            <template v-slot:item.ing="{ item }">
              <span v-if="item.channelName.length > 0">진행중</span>
              <span v-else>진행예정</span>
            </template>

            <template v-slot:item.type="{ item }">
              <span v-if="item.type === 'SECRET'">비밀</span>
              <span v-else-if="item.type === 'PRIVATE'">비공개</span>
              <span v-else>공개</span>
            </template>

            <template v-slot:item.nickname="{ item }">
              {{ item.password }}
            </template>

            <template v-slot:item.isAdult="{ item }">
              <span v-if="item.isAdult">O</span>
              <span v-else>X</span>
            </template>
          </v-data-table>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import * as api from "@/api/live"

export default {
  name: "LiveRoom",

  data() {
    return {
      isLoading: false,
      liveList: [],
      headers: [
        {
          text: '방번호',
          align: 'center',
          sortable: false,
          value: 'id',
        },
        {
          text: '타이틀',
          align: 'center',
          sortable: false,
          value: 'title',
        },
        {
          text: '공지',
          align: 'center',
          sortable: false,
          value: 'content',
        },
        {
          text: '방장',
          align: 'center',
          sortable: false,
          value: 'managerNickname',
        },
        {
          text: '커버이미지',
          align: 'center',
          sortable: false,
          value: 'cover',
        },
        {
          text: '진행여부',
          align: 'center',
          sortable: false,
          value: 'ing',
        },
        {
          text: '공개여부',
          align: 'center',
          sortable: false,
          value: 'type',
        },
        {
          text: '비밀번호',
          align: 'center',
          sortable: false,
          value: 'password',
        },
        {
          text: '19금',
          align: 'center',
          sortable: false,
          value: 'isAdult',
        },
      ],
    }
  },

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

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

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

    async getLive() {
      this.isLoading = true

      try {
        this.isLoading = false

        const res = await api.getLive()

        if (res.status === 200 && res.data.success === true) {
          this.liveList = res.data.data.liveList
        } else {
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }

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

<style scoped>

</style>
