<script setup lang="ts">
import { useAttrs, ref, computed, watch, reactive } from 'vue'
import { usePropBind } from './common'
import GdFormItem from './GdFormItem.vue';
import DropDownTableCustom from './DropDownTable.vue';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { getAllUser } from '@/api/workflowManagement/index'

const { propValue, handleChange } = usePropBind()
const attrs = <any>useAttrs()

type Option = {
  label: string,
  value: any
}

const props = withDefaults(defineProps<{
  label: string,
  rules?: [],
  options?: Option[],
  type?: string,
  multiple?: boolean,
  multipleLimit?: number
}>(), { label: '' })

const emit = defineEmits<{
  (e: 'selectionChange', val: any[]): void
}>();

const state = reactive(<{ list: any[], selectedList: any[], query: string, pageSize: number, pageIndex: number, total: number, selectedLabel: string, visible: boolean }>{
  selectedLabel: ''
})
defineExpose({ state })

const propValueTransfer = computed(() => {
  return propValue.value || ''
})
watch(propValueTransfer, async val => {
  if (val !== '') {
    const { dataList }: any = await getAllUser({ i_key: val });
    state.selectedLabel = dataList.map((item: any) => item.i_employee_pinyin).join(',')
  }

}, { immediate: true })

const handleLabelChange = (val: string) => state.selectedLabel = val
</script>

<template>
  <GdFormItem :label="props.label" :rules="props.rules">
    <div class="viewer-content" v-if="attrs.viewerMode">
      <!-- <p v-if="type === 'user'" v-for="name in state.selectedLabel.split(',')"> -->
      <p class="smarg" v-if="type === 'user'" v-for="name in state.selectedLabel.split(',')">
        <el-icon v-if="name" color="rgb(200,200,200)">
          <UserFilled />
        </el-icon>
        {{ name }}
      </p>
      <p v-else>
        {{ state.selectedLabel }}
      </p>
    </div>
    <template v-else>
      <DropDownTableCustom :i_user_no='propValueTransfer' @update:i_user_no="handleChange" :multiple="multiple"
        @update:label="handleLabelChange" v-bind="attrs"></DropDownTableCustom>
    </template>
  </GdFormItem>
</template>

<style lang="scss">
.gd-form .gd-select.el-select {
  width: 100%;
}

.smarg {
  margin: 0;
}
</style>
