<template>
  <div class='f-container' v-if="channel !== null">
    <div class='f-menu'>
      <sui-segment style='margin: 0 auto; width: 80%;'>
        <ChannelMenu />
      </sui-segment>
    </div>
    <div class='f-full'>
      <sui-container>
        <sui-segment>
          <sui-grid>
            <sui-grid-row>
              <sui-grid-column :width="12" verticalAlign='middle'>
                <sui-header>Channel: {{channel.name}}</sui-header>
              </sui-grid-column>
              <sui-grid-column :width="4" textAlign='right' verticalAlign='middle'>
                <sui-button :color="channel.join ? 'red' : 'green'" @click="joinChannel">{{channel.join ? 'leave chat' : 'join chat'}}</sui-button>
              </sui-grid-column>
            </sui-grid-row>
          </sui-grid>
        </sui-segment>
        <router-view />
      </sui-container>
    </div>
  </div>
</template>

<style lang="less" scoped>
.f-container {
  display: flex;
  flex-flow: row;

  >div {
   display: flex;
  }

  .f-menu {
    width: 250px;
  }
  .f-full {
    flex: 1;
    flex-flow: row;
  }
}
</style>

<script>
import ChannelMenu from './components/sidemenu'
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'ChannelPage',
  components: {
    ChannelMenu
  },
  data () {
    return {}
  },
  mounted () {
    if (this.channel === null) this.getChannelData()
  },
  methods: {
    ...mapActions(['changeBotJoin']),
    ...mapActions({
      getChannelAPI: 'getChannel'
    }),
    getChannelData: function () {
      this.getChannelAPI({id: this.$route.params.chid || ''})
    },
    joinChannel: function () {
      let stat = !this.channel.join
      this.changeBotJoin({
        id: this.channel.id,
        join: stat,
        cb: () => {
          this.getChannelData()
        }
      })
    }
  },
  computed: {
    ...mapGetters(['getChannel']),
    channel: function () {
      return this.getChannel(this.$route.params.chid || '')
    }
  }
}
</script>
