<template>
  <div class="container normal-panel">
    <div style="margin-bottom:30px">
      <p class="normal-title normal-margin">系统群组</p>
      <ul>
        <li v-for="item in sysGroup" :key="item.index" 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>
          <div>
            
            <!-- <el-button type="text" icon="el-icon-edit" size="small" class="inline-16" style="color:#333">编 辑</el-button>
            <el-button type="text" icon="el-icon-delete" size="small" style="margin-right:50px;color:#333">删 除</el-button> -->
          </div>
        </li>
      </ul>
    </div>
    <div>
      <p class="normal-title normal-margin">自定义群组</p>
      <ul>
        <li v-for="item in myGroup" :key="item.index" 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>
            <slot name="edit" :data="item"></slot>
            <slot name="del" :data="item"></slot>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sysGroup:[],
      myGroup:[]
    }
  },
  methods:{
    async listData () {
      const res = await this.$api.requested({
        "id": "20220831164303",
        "version":1,
        "content": {
          "where":{
            "condition":""
          }
        }
      })
      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
      })
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style scoped>
.pd-t-b{
  padding: 16px 0;
}
.r_flex{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}
.color-grey{
  color:#999999
}
.groupname{
  font-size: 14px;
}
</style>