<template>
  <div class="select-commodity">
    <a class="close" @click="$emit('cancle')">+</a>
    <h3 class="title">{{title}}</h3>
    <!-- <div class="filter">
      <div class="ui-remark">
        <span>分组名称</span>
      </div>
      <div class="finput">
        <input
            type="text"
            class="ui-input"
            placeholder="请输入人员或姓名"
            :maxlength="15"
            @keyup.enter="(paging.current = 1) && $emit('updateList',key)"
            v-model="key"
          />
      </div>
    </div> -->

    <!-- <div class="position">
      <div class="ui-remark">
        <span>选择职务</span>
      </div>
      <ul class="plist">
        <li @click="pactive=item.id" v-for="(item,i) in position" :key="i">
          <span class="radio" :class="{radio_active:pactive==item.id}"></span>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div> -->

    <div class="filter">
      <div class="ui-remark">
        <span>选择讲房人</span>
        <span v-if="houseSelect.id" class="jf-name">{{houseSelect.zygwName}}<i @click="houseSelect={id:''}" class="iconfont iconclose"></i></span>
      </div>
      <div class="finput">
        <input
            type="text"
            class="ui-input"
            placeholder="搜索讲房人名字"
            :maxlength="15"
            @keyup.enter="(paging.current = 1) && $emit('updateList',key)"
            v-model="key"
          />
          <i class="iconfont iconsearch" @click="(paging.current = 1) && $emit('updateList',key)"></i>
      </div>
    </div>

   <template>
      <div class="table-layer">
      <table class="list">
        <thead>
            <tr>
                <th>人员ID</th>
                <th>头像</th>
                <th>姓名</th>
                <th>选择</th>
              </tr>
        </thead>
        <tbody>
        <tr v-for="(item,i) in houseList" :key="i">
          <td style="overflow: hidden;text-overflow:ellipsis; white-space: nowrap;" :title="item.zygwId">{{item.zygwId}}</td>
          <td>
            <div class="list-img">
              <img :key="item.photoUrl" :src="item.photoUrl||require('@/assets/images/icons/default_user.png')" alt="">
            </div>
          </td>
          <td>{{item.zygwName}}</td>
          <td>
            <span class="radio" :class="{radio_active:houseSelect.id==item.zygwId}" @click="houseSelect={...item,id:item.zygwId}"></span>
          </td>
        </tr>
        <tr v-if="houseList.length === 0">
          <td style="text-align: center;" colspan="4">暂无数据</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="paging">
      <p></p>
      <Paging
        v-if="paging.total>0"
        style="float: right"
        :paging="paging"
        @changeCurrent="changeCurrent"
      />
    </div>
   </template>

    <div class="btns" >
      <a @click="$emit('submit', houseSelect)" >确定</a>
      <a v-if="showCancle" @click="$emit('cancle')">取消</a>
    </div>
  </div>
</template>

<script>
import Paging from './paging'

export default {
props:{
  panos:{
    default(){
      return []
    },
    type:Array
  },
  houseList:{
    default(){
      return []
    },
    type:Array
  },
  paging: {
    default:function () {
      return {}
    },
    type: Object
  },
  showCancle:{
    default: false,
    type:Boolean
  },
  title:{
    default:'',
    type:String
  },
  name:{
    default:'',
    type:String
  },
  current: {
    default:''
  }
},
  components:{
    Paging
  },
  watch:{
    houseSelect:{
      deep:true,
      handler:function (newVal) {
        console.log(newVal);
      }
    },
    houseList:{
      immediate:true,
      handler:function (newVal){
        if (newVal) {
          let tmp =newVal.find(item=>{
           return item.zygwId == this.current
          })
          this.houseSelect = tmp?{...tmp,id:tmp.zygwId} : {}
        }
      }
    },
  },
  computed:{
  },
  data () {
    return {
      categs: [],
      houseSelect: {
        id:this.current
      },
      pactive:'',
      allSelect: false,
      key:'',
      tmppaging:{...this.paging},
      position:[{
        id:'zhiye',
        name:'置业顾问'
      },{
        id:'anchang',
        name:'案场顾问'
      },{
        id:'mendian',
        name:'门店经理人'
      }]
    }
  },

  methods: {
    changeCurrent(data){
      this.$emit('changeCurrent',data)
    },
    selectGood(item, isSelect){
      this.houseSelect = isSelect?item:''
    }
  },
  mounted() {
    this.key = ''
  }
}
</script>

<style lang="less" scoped>
&.radio{
  width: 14px;
  height: 14px;
  border: 1px solid #555555;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  cursor: pointer;
  display: inline-block;
  &::before{
    width: 8px;
    height: 8px;
    background: none;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

&.radio_active{
  border: 1px solid #1FE4DC;
  &::before{
    width: 8px;
    height: 8px;
    background: #1FE4DC;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

.jf-name{
  color: #1FE4DC;
  display: inline-block;
  margin-left: 10px;
  >i{
    font-size: 10px;
    margin-left: 6px;
    cursor: pointer;
  }
  
}
.select-commodity {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #252828;
  color: #fff;
  width: 500px;
}

.select-commodity > * {
  padding: 15px;
}

.title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.close {
  position: absolute;
  right: -8px;
  top: -15px;
  font-size: 25px;
  color: rgba(255,255,255,0.5);
  transform: rotate(45deg);
  cursor: pointer;
}

.filter {
  padding: 15px;
  padding-bottom: 0;
  .finput{
    margin-top: 10px;
    position: relative;
    >i{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      cursor: pointer;
      color:@color;
    }
  }
}

.position{
  padding: 15px;
  padding-bottom: 0;
  .plist{
    display: flex;
    align-items: center;
    margin-top: 10px;
    >li{
      margin-right: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      >span{
        display: inline-block;
        &:last-of-type{
          margin-left: 10px;
        }
      }
    }
  }
}

.table-layer {
  min-height: 400px;
  max-height: 60vh;
}


.list {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.list thead{
  border-bottom: 1px solid rgba(255,255,255,0.1);
  >tr{
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
    >th{
      flex: 1;
      text-align: left;
      color:rgba(255,255,255,0.60);
      font-weight: normal;
      padding-left: 10px;
      &:last-of-type{
        padding-left: 0;
        text-align: center;
      }
    }
  }
}

.list tbody{
  width: 100%;
  display: block;
  max-height: 40vh;
  overflow: auto;
  >tr{
    display:flex;
    justify-content: space-around;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
    >td{
      flex: 1;
      text-align: left;
      color:#fff;
      font-weight: normal;
      padding: 10px 0 10px 10px;
      &:last-of-type{
        padding-left: 0;
        text-align: center;
      }
    }
  }

}


.list-img {
  height: 40px;
  line-height: 40px;
  position: relative;

}

.list-img > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


.paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  p {
    font-size: 12px;
  }
}

.btns {
  text-align: center;

  > a {
    width:120px;
    height:40px;
    text-align: center;
    line-height: 40px;
    opacity:1;
    border-radius:20px;
    font-size:12px;
    cursor: pointer;
    color: #fff;
    display: inline-block;
    &:nth-child(1) {
      background-color: #00C8AF;
    }
    &:nth-child(2) {
      margin-left: 20px;
      border:1px solid rgba(112,112,112,1);
    }
  }
}
</style>