<template>
  <span>
    <span v-if="props.type == 'select' && props.isRadio">
      <!-- 只支持单选 -->
      <a-input v-model:value="selectName" :placeholder="'请选择' + title" @click="showModal"></a-input>
    </span>
    <div v-else class="add-user-wrapper">
      <div class="add-user-icon">
        <a-button shape="round" @click="showModal">
          <template #icon>
            <plus-outlined />
          </template>
        </a-button>
      </div>
      <div class="add-user-item" v-for="item in selectedList" :key="item[props.valueId]">
        <a-avatar size="small">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <div>{{ item[props.valueName] }}</div>
        <close-outlined @click="removeSelectedItem(item)" />
      </div>
    </div>

    <!-- 选择角色 -->
    <Selection
      v-model:visible="visibleFlowPick"
      v-if="visibleFlowPick"
      :data="selectedData"
      :showTab="showTab"
      :title="'选择' + props.title"
      :max="props.max"
      :isRadio="props.isRadio"
      @done="closeFlowPick"
    ></Selection>
  </span>
</template>

<script setup name="FlowSelectCommon">
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
  },
  // 类型
  type: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '角色'
  },
  // 类型
  showTab: {
    type: Array,
    default: ['role']
  },
  // 值的名称
  valueName: {
    type: String,
    default: 'roleName',
  },
  // 值的id
  valueId: {
    type: String,
    default: 'roleId',
  },
  // 选择的列表名称
  selectListName: {
    type: String,
    default: 'selectRoleList'
  }
});

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

// 选中列表
const selectedList = ref([]);
// 名称
const selectName = ref('');

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

// 总数据
const selectedData = ref({
  selectRoleList: [],
  selectPositionList: [],
  selectOrgList: [],
});

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) {
      selectName.value = props.label;
      selectedList.value = [{ [props.valueId]: props.modelValue, [props.valueName]: props.label }];
    } else {
      selectName.value = '';
      selectedList.value = [];
    }
  } else {
    selectedList.value = props.list;
  }
};

// 显示弹框
const showModal = () => {
  selectedData.value[props.selectListName] = selectedList.value?.map(item => {
    return { bizId: item[props.valueId], name: item[props.valueName] };
  });
  visibleFlowPick.value = true;
};

// 关闭选择人员弹框
const closeFlowPick = data => {
  selectedList.value = data[props.selectListName]?.map(item => {
    return { [props.valueId]: item.bizId, [props.valueName]: item.name };
  });
  changeData();
};

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

// 删除
const removeSelectedItem = record => {
  remove(selectedList.value, item => item[props.valueId] === record[props.valueId]);
  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>
