<template>
  <div>
    <!-- <el-input class="normal-margin" type="text" v-model="search" @keyup.native.enter="listData" suffix-icon="el-icon-search" size="small" placeholder="输入成员名称">
      <div slot="prepend">
        <el-tag type="info" size="mini" closable v-for="item in selected" :key="item.index">{{item.name}}</el-tag>
      </div>
    </el-input> -->
    <div class="search_input normal-margin">
      <div class="tag flex-align-center" type="primary" size="mini" closable v-for="item in selected" :key="item.index">
        <div class="avatar-mini">
          <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
          <p v-else>{{item.name}}</p>
        </div>
        <p class="inline-16">{{item.name}}</p>
        <b><i class="el-icon-close" @click="closeTag(item)"></i></b>
      </div>
      <input class="input_panel" type="text" v-model="search" @keyup.enter="listData" placeholder="输入搜索内容">
    </div>
    <div class="flex-align-stretch menber__panel">
      <div class="flex-align-center menber__item flex-between" :class="showSelelctIcon(item)?'active_menber__item':''" style="flex:1 0 auto" v-for="item in tableData" :key="item.index" @click="clickMenber(item)">
        <div  class="flex-align-center">
          <div class="avatar inline-16">
            <img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
            <p v-else>{{item.name}}</p>
          </div>
          <div>
            <p>{{ item.name }}</p>
            <small style="color:#999999ad;margin-top:10px">地址:{{ item.address?item.address:"暂无" }}&emsp;联系电话:{{ item.phonenumber?item.phonenumber:"暂无" }}</small>
          </div>
        </div>
        <i class="el-icon-check iconCheck" v-if="showSelelctIcon(item)"></i>
      </div>
    </div>
    <el-empty v-if="tableData.length === 0" description="暂无数据" :image-size="40"></el-empty>
    <el-button size="mini" type="text" style="margin-top:16px;float:right" @click="onCancel">取 消</el-button>
    <!--	<el-button size="mini" type="primary" style="margin-top:16px;float:right;margin-right:10px" @click="onSelect">确 定</el-button>-->
    <div style="margin-top:16px;text-align:left">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="param.content.pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props:['radio','type','sa_projectid','checked','sys_enterpriseid'],
  data () {
    return {
      search:'',
      tableData: [],
      total:0,
      currentPage:0,
      selected:[],
      param:{
        "id":20230306144402,
        "content":{
          "type":'',////type:1客户2:项目
          "sys_enterpriseid":'',//type=1
          "sa_projectid":'' //type=2时传
        }
      }
    }
  },
  components:{
  },
  methods:{
    async listData () {
     /*this.param.content.type = this.type
      this.param.content.sys_enterpriseid = this.sys_enterpriseid
      this.param.content.sa_projectid = this.sa_projectid*/
      console.log(this.param)
      const res = await this.$api.requested(this.param)
      this.tableData = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(this.tableData);

    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    clickMenber (item) {
      if (this.radio) {
        this.selected = []
      }
      let _isSame = this.selected.some(m=>item.hrid === m.hrid)
      if (!_isSame) {
        this.selected.push(item)
      } else {
        this.selected = this.selected.filter(e=>{
          return e.hrid !== item.hrid
        })
      }
      this.onSelect()
    },
    showSelelctIcon (item) {
      let _isSame = this.selected.some(m=>item.hrid === m.hrid)
      return _isSame
    },
    onSelect () {
      this.$emit('onSelect',this.selected)
    },
    closeTag (item) {
      this.selected = this.selected.filter(e=>{
        return e.hrid !== item.hrid
      })
    },
    onCancel () {
      this.$emit('onCancel')
    }
  },
  mounted () {
    this.listData()
  }
}

</script>
<style>
</style>
<style scoped>
.search_input{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 8px 0 8px;
  border: 1px solid #f1f2f3;
  border-radius: 5px;
}
.input_panel{
  flex: 1;
  min-width: 100px;
  border:none;
  outline: none;
  margin-bottom: 8px;
  color:#666
}
.menber__item{
  width: calc(100% - 20px);
  padding:5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color:#666;
  margin-bottom: 5px;
  transition: .2s linear;
}
.menber__item:hover{
  background: #b5e4ff6e;
}
.active_menber__item{
  background: #b5e4ff6e;
}
.menber__panel {
  max-height: 300px;
  overflow-y:scroll ;
}
.avatar{
  position: relative;
  height:30px;
  width: 30px;
  border-radius: 100%;
  text-align: center;
  line-height: 30px;
  color:#fff;
  font-weight: 500;
  background: #3874F6;
  cursor: pointer;
  overflow: hidden;
}
.avatar__image{
  height: 100%;
  width: 100%;
}
.avatar-mini{
  position: relative;
  height:20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 5px;
  color:#fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100%;
  background: #3874F6;
}
.iconCheck{
  font-weight: bold;
  color:#3874F6
}
.tag{
  font-size: 12px;
  color:#666;
  padding: 5px;
  border-radius: 3px;
  margin:0 5px 8px 0;
  background: #b5e4ff6e;
  cursor: pointer;
}
</style>