<template>
  <section class="AiUserPicker">
    <div v-if="$slots.default " @click="handleSelect">
      <slot/>
    </div>
    <div class="AiWechatSelecter-userlist" v-else>
      <div class="user-item" v-for="(item, index) in value" :key="index">
        <img :src="getAvatar(item)">
        <div class="itemLabel" v-text="item.name"/>
        <i class="iconfont iconwarning" @click="removeUser(index)"/>
      </div>
      <div class="user-add" @click="handleSelect">
        <div class="userlist-add__icon">
          <i class="el-icon-plus"/>
        </div>
        <span>选择</span>
      </div>
    </div>
    <ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
      <ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
    </ai-dialog>
  </section>
</template>

<script>

export default {
  name: "AiUserPicker",
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {default: () => []},
    instance: Function,
    multiple: {default: true},
    props: {
      default: () => ({
        label: 'name',
        id: 'id'
      })
    },
  },
  data() {
    return {
      dialog: false,
      selected: [],
    }
  },
  methods: {
    removeUser(i) {
      let list = this.$copy(this.value)
      list.splice(i, 1)
      this.$emit("change", list)
    },
    submit() {
      this.$emit("change", this.selected)
      this.dialog = false
    },
    handleSelect() {
      this.selected = this.$copy(this.value)
      this.dialog = true
    },
    getAvatar(row){
      return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.AiUserPicker {
  .AiWechatSelecter-userlist {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .user-add {
      margin-bottom: 6px;

      .userlist-add__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
        border-radius: 2px;
        border: 1px solid #CCCCCC;
        cursor: pointer;

        &:hover {
          opacity: 0.6;
        }

        i {
          color: #CCCCCC;
          font-size: 20px;
        }
      }

      span {
        display: block;
        width: 100%;
        line-height: 22px;
        text-align: center;
        color: #888888;
        font-size: 14px;
      }
    }

    .user-item {
      position: relative;
      margin-bottom: 6px;
      margin-right: 16px;
      width: 40px;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;

      img {
        display: block;
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
        border-radius: 2px;
        border: 1px solid #CCCCCC;
      }

      i {
        position: absolute;
        top: 0;
        right: 0;
        padding: 2px;
        font-size: 16px;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
        transform: translate(40%, -100%);
        height: 16px;

        &:hover {
          opacity: 0.6;
        }
      }

      .itemLabel {
        display: block;
        width: 60px;
        line-height: 22px;
        text-align: center;
        color: #888888;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}
</style>
