<template>
  <div class="normal-panel scroll-panel" style="width:300px">
    <div style="margin-bottom:30px">
      <div style="display:flex;align-items:center;justify-content:space-between"> 
        <p class="container normal-title" style="margin:5px 0">系统群组</p>
        <div style="margin-right:16px"><slot name="addContact"></slot></div>
      </div>
      <ul>
        <li @click="clickGroup(item)" v-for="item in sysGroup" :key="item.index" :class="active === item.rowindex?'act':''" class="pd-t-b flex-align-center flex-between">
          <div class="flex-align-stretch">
            <img width="50" src="../../../../assets/icons/sys_group.png" alt="">
            <div class="r_flex">
              <p class="groupname">{{item.groupname}}</p>
              <small class="color-grey">已有{{item.count}} 人</small>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <div style="display:flex;align-items:center;justify-content:space-between"> 
        <p class="container normal-title">自定义群组</p>
        <div style="margin-right:16px"><slot name="addGroup"></slot></div>
      </div>
      <ul>
        <li @click="clickGroup(item)" v-for="item in myGroup" :key="item.index" :class="active === item.rowindex?'act':''" class="pd-t-b flex-align-center flex-between">
          <div class="flex-align-stretch">
            <img width="50" src="../../../../assets/icons/my_group.png" alt="">
            <div class="r_flex">
              <p class="groupname">{{item.groupname}}</p>
              <small class="color-grey">已有{{item.count}} 人</small>
            </div>
          </div>
          <div style="display:flex">
            <slot name="edit" :data="item"></slot>
            <slot name="del" :data="item"></slot>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils'
export default {
  data () {
    return {
      sysGroup:[],
      myGroup:[],
      active:0,
      allData:[]
    }
  },
  methods:{
    async listData (fn) {
      const res = await this.$api.requested({
        "id": "20220831164603",
        "version":1,
        "content": {
          "nocache":true,
            "where":{
              "condition":""
          }
        }
      })
      res.data.forEach(e=>{e.phonebook.forEach(element => {
        element.tag = element.tag1
      });})
      this.allData = res.data
      
      this.sysGroup = res.data.filter(e=>{
        if(e.sys_phonebookgroupid === 0)
          return e
      })
      this.myGroup = res.data.filter(e=>{
        if(e.sys_phonebookgroupid !== 0)
          return e
      })
      console.log(this.sysGroup);
      
      this.$emit('setGroupData',this.myGroup)
      fn?fn():this.clickGroup(this.sysGroup[0])
    },
    clickGroup (item) {
      this.active = item.rowindex
      this.$emit('clickGroup',item,this.allData)
    }
  },
  mounted () {
    this.listData(false)
  }
}

</script>
<style scoped>
.normal-panel{
  width: 250px;
  border-right:1px solid #f1f2f3;

}
.pd-t-b{
  padding: 16px;
  transition: .2s linear all;
}
.r_flex{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}
.color-grey{
  color:#999999
}
.groupname{
  font-size: 14px;
}
.scroll-panel{
  height: calc(100vh - 182px);
  overflow-y: scroll;
}
.scroll-panel::-webkit-scrollbar{
  display:none !important;
}
li{
  cursor: pointer;
}
li:hover{
  background: #f1f2f3;
}
.act{
  background: #f1f2f3;
}
</style>