<template>
  <span>
    <div class="add-user-wrapper">
      <div class="add-user-icon">
        <a-button shape="round" @click="showUserModal">
          <template #icon>
            <plus-outlined />
          </template>
        </a-button>
      </div>
      <div class="add-user-item" v-for="item in selectedList" :key="item.userId">
        <a-avatar size="small">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <div>{{ item.userName }}</div>
        <close-outlined @click="removeSelectedItem(item)" />
      </div>
    </div>

    <!-- 选择人员 -->
    <Selection
      v-model:visible="visibleFlowPick"
      v-if="visibleFlowPick"
      :data="selectedData"
      :showTab="['user']"
      title="选择人员"
      :max="props.max"
      :isRadio="props.isRadio"
      @done="closeFlowPick"
    ></Selection>
  </span>
</template>

<script setup name="FlowSelectUser">
import { ref, watch, onMounted } from 'vue';
import { remove } from 'lodash-es';

const props = defineProps({
  // 是否是单选
  isRadio: {
    type: Boolean,
    default: true
  },
  // 多选时的列表
  list: {
    type: Array,
    default: []
  },
  // id
  modelValue: {
    type: String,
    default: ''
  },
  // 名称
  label: {
    type: String,
    default: ''
  },
  // 最多选择
  max: {
    type: Number,
    default: 100000
  }
});

const emits = defineEmits(['update:modelValue', 'update:list', 'update:label']);

// 选中列表
const selectedList = ref([]);

// 是否显示选择人员弹框
const visibleFlowPick = ref(false);

// 总数据
const selectedData = ref({
  selectUserList: []
});

watch(
  () => props.modelValue,
  newValue => {
    reload();
  }
);

watch(
  () => props.list,
  newValue => {
    if (!props.isRadio) {
      reload();
    }
  }
);

onMounted(() => {
  reload();
});

// 加载值
const reload = () => {
  if (props.isRadio) {
    if (props.modelValue && props.label) {
      selectedList.value = [{ userId: props.modelValue, userName: props.label }];
    } else {
      selectedList.value = [];
    }
  } else {
    selectedList.value = props.list;
  }
};

// 显示选人弹框
const showUserModal = () => {
  selectedData.value.selectUserList = selectedList.value?.map(item => {
    return { bizId: item.userId, name: item.userName };
  });
  visibleFlowPick.value = true;
};

// 关闭选择人员弹框
const closeFlowPick = data => {
  selectedList.value = data.selectUserList?.map(item => {
    return { userId: item.bizId, userName: item.name };
  });
  changeData();
};

// 改变数据
const changeData = () => {
  if (props.isRadio) {
    if (selectedList.value?.length > 0) {
      emits('update:modelValue', selectedList.value[0].userId);
      emits('update:label', selectedList.value[0].userName);
    } else {
      emits('update:modelValue', '');
      emits('update:label', '');
    }
  } else {
    emits('update:list', selectedList.value);
  }
};

// 删除
const removeSelectedItem = record => {
  remove(selectedList.value, item => item.userId === record.userId);
  changeData();
};
</script>

<style scoped lang="less">
.add-user-wrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 40px;
  padding-left: 5px;
  .add-user-icon {
    display: flex;
    align-items: center;
    width: 40px;
    height: 32px;
    border-radius: 100px;
    border: 1px solid #3370ff;
    justify-content: center;
    margin-right: 8px;
    margin-top: 8px;
    cursor: pointer;
  }
  .add-user-item {
    display: flex;
    align-items: center;
    min-width: 70px;
    max-width: 50%;
    height: 32px;
    background: #eff0f1;
    border-radius: 16px;
    padding: 0 4px;
    margin-right: 8px;
    margin-top: 8px;

    img {
      width: 24px;
      height: 24px;
      border-radius: 12px;
    }
    div {
      padding: 0;
      margin: 0 4px;
      min-width: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    i {
      margin-right: 10px;
      color: #646a73;
      cursor: pointer;
    }
  }
}
</style>
