<template>
  <div class="normal-panel scroll-panel">
    <div class="container" style="border-bottom:1px solid #f1f2f3">
      <el-form class="myform" size="small" inline label-position="left" label-width="50px">
        <el-form-item label="搜索">
          <el-input v-model="condition" prefix-icon="el-icon-search" placeholder="联系人,手机号(全称)" @keyup.native.enter="search" @clear="clearSearch" @input.native="onChange" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <ul>
      <li @click="clickContacts(item)" :class="active === item.rowindex?'act':''" class="container" v-for="item in data.phonebook" :key="item.index">
        <div class="flex-align-stretch">
          <div class="avatar">
            {{item.name.substr(0, 1)}}
          </div>
          <div class="r-panel">
            <p>{{item.name}} <el-tag v-for="tag in item.tag" :key="tag.index" :type="tag==='支持者'?'warning':tag==='反对者'?'danger':''" size="mini" style="margin:0 5px">{{tag}}</el-tag></p>
            <small class="color-grey"><i class="el-icon-mobile"></i>&nbsp;{{item.phonenumber}}&emsp;<i class="el-icon-collection-tag"></i>&nbsp;{{item.groupname}}</small>
          </div>
        </div>
      </li>
    </ul>
    <div class="flex-align-center" v-if="data.phonebook && data.phonebook.length === 0">
      <el-empty :image-size="200" description="暂无联系人"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      active:0,
      condition:''
    }
  },
  methods:{
    clickContacts (item) {
      this.active = item.rowindex
      this.$emit('clickContacts',item)
    },
    search () {
      var reg=/^\d{1,}$/
      var pattern = new RegExp(reg);
      if (pattern.test(this.condition)) {
        this.$emit('filtetContacts','phonenumber',this.condition)
      } else {
        this.$emit('filtetContacts','name',this.condition)
      }
    },
    clearSearch () {
      this.$emit('filtetContacts','close',this.condition)
    },
    onChange() {
      if (this.condition === '') 
        return this.$emit('filtetContacts','close',this.condition)
    }
  }
}

</script>
<style>
.myform .el-form-item{
  margin-bottom: 0 !important;
}
</style>
<style scoped>
.scroll-panel{
  height: calc(100vh - 182px);
  overflow-y: scroll;
}
.scroll-panel::-webkit-scrollbar{
  display:none !important;
}
.normal-panel {
  border-right:1px solid #f1f2f3
}
.r-panel{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
  margin-left: 10px;
}
.color-grey{
  color:#999
}
li{
  transition: .2s linear all;
  cursor: pointer;
}
.act{
  background: #f1f2f3;
}
li:hover{
  background: #f1f2f3;
}
.flex-align-center{
  height: 100%;
  justify-content: space-around;
}
.avatar{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 1.5rem;
  color:#fff;
  border-radius: 100%;
  background: #3874F6;
}
</style>