<template>
  <!-- 选人弹框组件 -->
  <ChooseUser  id="most-user" v-model="isShowDialog" :Single="props.Single" :tcTitle="props.tcTitle" :deptId="props.deptId" :data="userData"
    @choosedUsers="userChange"></ChooseUser>
</template>

<script setup>
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, computed } from 'vue'
const props = defineProps({
  dataList: {
    type: Array,
    default: () => ([])
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // relatedid: {
  //     type: String,
  //     default: ''
  // },
  /** 是否单选 默认多选 */
  Single: {
    type: Boolean,
    default: true
  },
  ids: {
    type: String,
    default: ''
  },
  cName: {
    type: String,
    default: ''
  },
  stlyrylx: {
    type: String,
    default: '01'
  },
  /** 父级部门 (即只选该部门下的单位),
   * 如果没有"deptId"会只能选当前登录人的部门，（但是：登录人是安全科可以选所有部门） */
  deptId: {
    type: String,
  },
  /** 表单类型, input textarea */
  type: {
    type: String,
    default: 'input'
  },
  // xgflx: {
  // 	type: String,
  // 	default: '09,10,15'
  // },
  /** 输入框宽度 */
  width: [String, Number],
  tcTitle: String
})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const isShowDialog = ref(false)

const userChange = (val) => {
  val = Array.isArray(val) ? val : []
  val = val.filter(item => {
    return !!item
  })
  const cName = val.map(item => {
    if (item.mobile) {
      return item.userName + '（' + item.mobile + '）'
    } else {
      return item.userName
    }
  }).toString();
  const ids = val.map(item => {
    return item.id
  }).toString();
  emit('update:ids', ids || '')
  emit('update:cName', cName || '')
  emit('change', val || {})
}



const show = (val) => {
  isShowDialog.value = val
}
// 数组回显
const userData = computed(() => {
  if (!props.ids || !props.ids.length) return []
  if (props.Single) return props.ids
  if (typeof props.ids === 'string') return props.ids.split(',')
  return []
})

onMounted(() => {
  // console.log('2332===', props.xgflx);
});
defineExpose({
  show
});
</script>

<style scoped lang="scss"></style>
