<template>
  <v-navigation-drawer
    v-model="drawer"
    absolute
    temporary
    right
    width="300"
    overlay-opacity="0"
  >
    <div v-loading="loading">
      <v-list dense>
        <v-list-item-group
          v-model="selected"
          color="primary"
          @change="onSelectConversation"
        >
          <v-list-item
            v-for="(conversation) in conversationList"
            :key="conversation.conversation_id"
          >
            <v-list-item-content>
              <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </div>
  </v-navigation-drawer>
</template>

<script>
import {
  getConversations,
  getConversationsById
} from '@/api/dataChart'
export default {
  name: 'dataChartConversation',
  data () {
    return {
      loading: false,
      drawer: false,
      selected: null,
      lastSelected: null,
      conversationList: []
    }
  },
  methods: {
    target () {
      this.drawer = !this.drawer
      if (this.drawer) {
        this.getConversationList()
      }
    },
    async getConversationList () {
      this.loading = true
      try {
        const { data } = await getConversations({ limit: 5 })
        this.conversationList = data.conversations
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    async onSelectConversation (index) {
      if (!index) {
        setTimeout(() => {
          this.selected = this.lastSelected
        })
        return
      }
      this.lastSelected = index
      try {
        const { data } = await getConversationsById(this.conversationList[index].conversation_id)
        this.$emit('update', data)
      } catch (error) {
        this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
