<template>
  <el-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>
  <!-- 相关方 -->
    <MOSTY.Choosejsy v-if="isShowDialog" v-model="isShowDialog" :Single="Single" :leaderid="leaderid"
    @confirm="userChange" :empnature="props.empnature" :orgid="props.orgid" :defaultData="userData" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, computed } from 'vue'
import { getItem } from "@/utils/storage";
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: ''
  },
  orgid: {
    type: String,
    default: ()=>getItem("deptId").ssdwid + "XN"
  },
  stlyrylx: {
    type: String,
    default: '01'
  },
  /** 父级部门 (即只选该部门下的单位),
   * 如果没有"deptId"会只能选当前登录人的部门，（但是：登录人是安全科可以选所有部门） */
  deptId: {
    type: String,
  },
  // xgflx: {
  // 	type: String,
  // 	default: '09,10,15'
  // },
  /** 输入框宽度 */
  width: [String, Number],
  empnature: {
    type: String,
    default: '1'
  },
  leaderid: {
    type: String,
    default: '',
  }
})
const emit = defineEmits(['change', 'update:ids', 'update:cName', 'clear'])

const isShowDialog = ref(false)
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) => {
  console.log('val: ', 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(() => {
  // 
});
defineExpose({
  clear
});
</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>
