<template>
  <el-input v-if="props.type === 'input'" :style="{ width: inputWidth }" class="mosty-select" v-model="inputName"
    readonly clearable @clear="clear">
    <template #append>
      <el-button title="" class='cursor' :disabled="props.disabled" @click="xgfClick">选择</el-button></template>
  </el-input>

  <!-- 输入框为 文本区 textarea -->
  <template v-else-if="props.type === 'textarea'">
    <el-input type="textarea" :style="{ width: inputWidth }" :rows="4" class="mosty-select" v-model="inputName"
      readonly>
    </el-input>
    <el-button class="cursor ml10" @click="xgfClick">选择</el-button>
  </template>

  <!-- 选人弹框组件 -->
  <ChooseUser id="most-user" v-model="isShowDialog" :isNewChooseDeptWx="props.isNewChooseDeptWx" :Single="props.Single"
    :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
  },
  isNewChooseDeptWx: {
    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]
})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const isShowDialog = ref(false)
const xgfMan = ref('')
const xgfRyId = ref('')
const inputName = ref('')
const inputWidth = computed(() => {
  if (props.width) {
    if (typeof props.width === 'string') {
      const includesArr = ['px', 'vw', '%', 'em', 'rem']
      if (includesArr.includes(props.width)) return props.width
      if (props.width > 0) return props.width + 'px'
      return props.width
    } else if (typeof props.width === 'number') {
      return `${props.width}px`
    }
  }
})
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 xgfClick = () => {
  isShowDialog.value = true
}
const clear = () => {
  // xgfMan.value = ''
  // xgfRyId.value = ''
  emit('update:ids', '')
  emit('update:cName', '')
  emit('change', {})
}
const closeDialog = (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 []
})
// input回显
watch(() => props.cName, (val) => {

  inputName.value = val
}, { immediate: true })
onMounted(() => {
  // console.log('2332===', props.xgflx);
});
defineExpose({
  clear,
  xgfClick
});
</script>

<style scoped lang="scss">
.mosty-select {
  width: 374px;
}

::v-deep .el-form {
  margin-top: 0;
  margin-bottom: 10px;
}

// ::v-deep #xgfandzzjgry .el-button + .el-button{
// 	margin-left: 10px;
// }</style>
::v-depp .treeBox {
margin-top: 10px;
}

<style></style>
