<template>
  <div style="max-width: 350px">
    <template v-if="mode === 'DESIGN'">
      <el-button disabled icon="User" type="primary" size="mini" round>选择人员</el-button>
      <span class="placeholder"> {{ placeholder }}</span>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-button icon="User" type="primary" size="mini" round @click="chooseUser">
          选择人员
        </el-button>
        <user-picker :multiple="multiple" ref="userPicker" title="请选择人员" v-model:value="userList" @ok="selected"/>
        <span class="placeholder"> {{ placeholder }}</span>
        <div style="display: flex;">
          <role-items v-model="userList"/>
<!--          <div class="userStyle" v-for="(user, i) in userList" :key="i">-->
<!--            <span @click="delDept(i)">×</span>-->
<!--&lt;!&ndash;            <el-avatar :src="user.avatar"/>&ndash;&gt;-->
<!--            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">-->
<!--              <span>{{ user.name }}</span>-->
<!--            </el-tooltip>-->
<!--          </div>-->
        </div>
      </template>
      <template v-else-if="perm === 'R'">
        <div style="display: flex;">
<!--          class="view_user"-->
          <div v-for="(user, i) in userList" :key="i" >
<!--            <el-avatar :src="user.avatar"/>-->
            <el-tag>{{ user.name }}</el-tag>
<!--            <el-tooltip effect="dark" :content="user.name" placement="bottom-start">-->
<!--              <span>{{ user.name }}</span>-->
<!--            </el-tooltip>-->
          </div>
        </div>
      </template>
    </template>
  </div>

</template>

<script setup>
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
import RoleItems from "@/views/workflow/process/common/RoleItems.vue";
import {computed, defineProps} from "vue";
const emit = defineEmits(["input"])
const showPickerSelect = ref(false)
const userPicker = ref()
const userList = ref([])
const props = defineProps({
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  perm: {
    type: String,
    default: 'E'
  },
  placeholder: {
    type: String,
    default: '请选择人员'
  },
  multiple: {
    type: Boolean,
    default: false
  }
})
const chooseUser=()=>{
  userPicker.value.showUserPicker()
}
watch(() => props.perm, (newVal, oldVal) => {
  // console.log('newVal',newVal,userPicker.value)
});

const selected = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      id: val.id,
      name: val.name,
      avatar: val.avatar,
    }
    userInfoList.push(userInfo)
  }
  userList.value = userInfoList
  // console.log('select',userList.value)
}
const delDept = (i) => {
  userList.value.splice(i, 1)
}

</script>

<style scoped lang="scss">
.placeholder {
  margin-left: 10px;
  color: #adabab;
  font-size: smaller;
}

.userStyle {
  width: 45px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-right: 10px;

  span:first-child {
    position: absolute;
    right: -3px;
    top: -11px;
    cursor: pointer;
  }

  span:last-child {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }
}

.view_user {
  width: 45px;
  display: flex;
  flex-direction: column;
  margin-right: 10px;

  span {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }
}
</style>
