<template>
  <div>
    <add :group="group" @onAddSuccess="onAddSuccess"></add>
    <div class="flex-align-stretch">
      <group ref="grouplist" @setGroupData="setGroupData" @clickGroup="clickGroup"></group>
      <contacts style="flex:1 0 auto" :data="activeGroupData" @clickContacts="clickContacts" @filtetContacts="filtetContacts"></contacts>
      <detail :activeContactsData="activeContactsData">
        <template v-slot:edit="data">
          <edit :data="data" :group="group" @onEditSuccess="onEditSuccess"></edit>
        </template>
        <template v-slot:del="data">
          <ondel :data="data" @onDelSuccess="onDelSuccess"></ondel>
        </template>
      </detail>
    </div>
  </div>
</template>

<script>
import add from './modules/add.vue'
import group from './modules/group.vue'
import contacts from './modules/contacts.vue'
import detail from './modules/detail.vue'
import edit from './modules/edit.vue'

import ondel from './modules/del.vue'

export default {
  components:{
    add,
    group,
    contacts,
    detail,
    ondel,
    edit
  },
  data () {
    return {
      group:[],
      activeGroupData:[],
      activeContactsData:null
    }
  },
  methods:{
    onAddSuccess () {
      this.$refs['grouplist'].listData(()=>{
        let arr = []
        arr = [...this.$refs['grouplist'].sysGroup,...this.$refs['grouplist'].myGroup]
        this.activeGroupData = arr.filter(e=>{return e.rowindex === this.activeGroupData.rowindex})[0]
        this.activeContactsData = this.activeGroupData.phonebook.filter(e=>{return e.rowindex === this.activeContactsData.rowindex})[0]
      })
    },
    onEditSuccess (form) {
      this.activeContactsData = Object.assign({},this.activeContactsData,form)
      this.activeGroupData.phonebook = this.activeGroupData.phonebook.map(e=>{
        if (e.rowindex === form.rowindex) {
          e = Object.assign({},e,form)
        }
        return e
      })
    }, 
    setGroupData (val) {
      this.group = val
    },
    clickGroup (val) {
      this.activeGroupData = val
      this.activeContactsData = null
    },
    clickContacts (val) {
      this.activeContactsData = val
    },
    onDelSuccess (id) {
      this.activeGroupData.phonebook = this.activeGroupData.phonebook.filter(e=>{
        return e.sys_phonebookid !== id
      })
      this.activeContactsData = null
      // this.$refs['grouplist'].listData()
    },
    filtetContacts (type,val) {
      if (type === 'name') {
        this.activeGroupData.phonebook = this.activeGroupData.phonebook.filter(e=>{
          return e.name === val
        })
      } else if (type === 'phonenumber') {
        this.activeGroupData.phonebook = this.activeGroupData.phonebook.filter(e=>{
          return e.phonenumber === val
        })
      } else {
        this.onAddSuccess()
      }
    }
  },
  mounted () {
  }
}

</script>
<style>
</style>