<template>
  <div>
    <FormItemRest>
      <SelectRole
        :multiple="multiple"
        :selectedIds="selectedIds"
        :key="key"
        :disabled="disabled"
        @change="
          (ids, options) => {
            emit('update:value', ids.join(','));
            emit('selectedId', ids.join(','));
            emit('change', ids.join(','), options);
          }
        "
        @change-names="
          (names) => {
            userNames = names;
          }
        "
      >
        <a-input
          :class="[style && Object.keys(style).length > 0 ? 'customStyle' : '']"
          :style="{ width: width }"
          readonly
          :disabled="disabled"
          :placeholder="placeholder"
          v-model:value="userNames"
          :size="size"
          :bordered="bordered"
        >
          <template #prefix v-if="prefix">
            <Icon :icon="prefix" />
          </template>
          <template #suffix v-if="suffix">
            <Icon :icon="suffix" />
          </template>
        </a-input>
      </SelectRole>
    </FormItemRest>
  </div>
</template>
<script lang="ts" setup>
  import { Form } from 'ant-design-vue';
  import { SelectRole } from '/@/components/SelectOrganizational/index';
  import { watch, ref, computed } from 'vue';
  import { Icon } from '/@/components/Icon';

  // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
  const FormItemRest = Form.ItemRest;

  const props = defineProps({
    value: String,
    prefix: String,
    suffix: String,
    placeholder: String,
    readonly: Boolean,
    disabled: Boolean,
    size: String,
    bordered: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    style: Object,
    width: String,
  });

  const userNames = ref<string>();
  const selectedIds = ref<string[]>([]);
  const emit = defineEmits(['update:value', 'selectedId', 'change']);
  const key = ref<number>(0);

  watch(
    props,
    async () => {
      selectedIds.value = props.value ? props.value?.split(',') : [];
      if (!props.value) {
        //预览页面 重置
        userNames.value = '';
      }
      key.value++;
    },
    {
      immediate: true,
    },
  );
  const color = computed(() => {
    return props.style?.color;
  });
  const backgroundcolor = computed(() => {
    return props.style
      ? props.style['background-color'] || (props.disabled ? '#f5f5f5' : '#fff')
      : '#fff';
  });
  const border = computed(() => {
    return props.style?.border || '1px solid #d9d9d9';
  });
  const fontsize = computed(() => {
    return props.style ? props.style['font-size'] : '14px';
  });
  const fontstyle = computed(() => {
    return props.style ? props.style['font-style'] : 'normal';
  });
  const customwidth = computed(() => {
    return props.style?.width;
  });
  const height = computed(() => {
    return props.style?.height || '32px';
  });
  const textalign = computed(() => {
    return props.style ? props.style['text-align'] : 'left';
  });
</script>
<style scoped lang="less">
  .customStyle {
    width: v-bind(customwidth);
    border: v-bind(border) !important;
    height: v-bind(height);
    background-color: v-bind(backgroundcolor);

    :deep(.ant-input) {
      font-size: v-bind(fontsize);
      font-style: v-bind(fontstyle);
      color: v-bind(color);
      text-align: v-bind(textalign);
      background-color: inherit;
    }
  }
</style>
