<template>
  <div>
    <Loading :active.sync="isLoading" :opacity="0.8">
      <template slot="default">
        <img src="../assets/ajax-loader.gif">
      </template>
    </Loading>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
        <h1 class="h2">客群瀏覽</h1>
    </div>
    <h3 class="text-muted mb-3 group__title">已訂閱客群</h3>
    <div class="row group__row">
        <div class="col-3 mb-2" v-for="(group, idx) in user_groups" :key="idx">
            <div class='card p-3 card__subsribed'>
                <button class="btn__del" @click.prevent="unsubscribe(group.group_id)"><i class="fas fa-trash-alt"></i></button>
                <img class="card-img-top d-block mx-auto" src="../assets/man.svg" alt="">
                <h4 class='text-center'>{{ group.group.group_chinese_name }}</h4>
            </div>
        </div>
    </div>
    <h3 class="text-muted mb-2">未訂閱客群</h3>
         <div class="row group__row">
            <div class="col-3" v-for="(group, idx) in unSubgroup" :key="idx">
                <div class='card p-3 card__subsribed'>
                    <button class="btn__sub" @click.prevent="subscribe(group.id)">訂閱</button>
                    <img class="card-img-top d-block mx-auto" src="../assets/man.svg" alt="">
                    <h4 class='text-center'>{{ group.group_chinese_name }}</h4>
                </div>
        </div>
    </div>
    <!-- <h3 class="text-muted mb-3 group__title">客群</h3>
    <div v-for="(g, idx) in allGroup" :key="idx">
        <h3 class='group__tag'>{{ g.group_type }}</h3>
        <div class="row group__row" >
            <div class="col-3 mb-2" v-for="(group, idx) in g.data" :key="`d-${idx}`">
                <div class='card p-3 card__subsribed'>
                    <button class="btn__sub" @click.prevent="subscribe(group.id)">訂閱</button>
                    <img class="card-img-top d-block mx-auto" src="../assets/man.svg" alt="">
                    <h4 class='card-subtitle text-center'>{{ group.group_chinese_name }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div>
        <b-tabs content-class="mt-3">
            <b-tab v-for="(g, idx) in allGroup" :key="idx" :title="g.group_type">
                <b-card-group deck>
                    <b-card img-alt="Image" img-top v-for="(group, idx) in g.data" :key="`d-${idx}`" class="col-3">
                        <img class="card-img-top d-block mx-auto" src="../assets/man.svg" alt="">
                        <b-card-text>
                            {{ group.group_chinese_name }}
                        </b-card-text>
                    </b-card>
                </b-card-group>
            </b-tab>
        </b-tabs>
    </div> -->
  </div>
</template>

<script>
// @ is an alias to /src
import $ from 'jquery';
import 'bootstrap';
export default {
  name: 'Groupbrowse',
  data() {
      return {
        groups: [],
        user_groups: [],
        types: [],
        allGroup: [],
        unSubgroup: [],
        isLoading: false,
      }
  },
  props: [
    'userId'
  ],
  methods: {
    getGroup(id) {
        const vm = this;
        vm.isLoading = true;
        this.$http.get('http://www.googo.org:8050/api/groups').then(res => {
            this.groups = res.data;
            let arr = [];
            this.groups.forEach((item, idx) => {
                arr.push(item.group_type);
            });
            arr = arr.filter((el, idx, arr) => {
                return arr.indexOf(el) === idx;
            })
            this.types = arr;
            let temparr = [];
            this.types.forEach((item, i) => {
                let tempgrp = vm.groups.filter((el, idx) => {
                    return el.group_type === item;
                });
                temparr.push({group_type: item, data: [...tempgrp] });
            });
            this.allGroup = temparr;
            let tempgrps = [...res.data];
            return vm.$http.get(`http://www.googo.org:8050/api/user_groups/${id}`);
        }).then(res => {
            vm.user_groups = res.data;
                let subedArr = vm.user_groups.map((item, idx) => { return item.group_id});
                let allgrpArr = vm.groups.map((item, idx) => { return item.id});
                let indexArr = [];
                allgrpArr.forEach((item, idx) => {
                    if(!subedArr.includes(item)){
                        indexArr.push(item);
                    }
                })
                let unsub = [];
                vm.groups.forEach((item,i) => {
                    indexArr.forEach((el, i) => {
                        if(el === item.id) {
                            unsub.push(item);
                        }
                    })
                });
                vm.unSubgroup = unsub;
                vm.isLoading = false;
        })
            
    },
    getUsergroup(id) {
        const vm = this;
        this.$http.get(`http://www.googo.org:8050/api/user_groups/${id}`).then(res => {
            this.user_groups = res.data;
        })
    },
    subscribe(id) {
        const vm = this;
          this.$http.post(`http://www.googo.org:8050/api/users_groups/${this.userId}`,
           { group_ids: [id] }).then(res => {
            vm.getGroup(this.userId);
            vm.getUsergroup(this.userId);
          })
    },
    unsubscribe(id) {
        const vm = this;
          this.$http.delete(`http://www.googo.org:8050/api/users_groups/${this.userId}?group_id=${id}`).then(res => {
            vm.getGroup(this.userId);
            vm.getUsergroup(this.userId);
          })
    }
 },
 computed: {
 },
 created() {
    this.getUsergroup(this.userId);
    this.getGroup(this.userId);
}
}
</script>
