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

  <Choosebm id="most-dept" :showDdld="isShowDialog" :searchType="searchType" :deptId="props.deptId"
    :formInfo="{ zzid: props.ids }" @closezzjg="closeDialog" @listdata="xgfManChange" />
</template>

<script setup>
import Choosebm from "@/components/MyComponents/ChooseDept/index.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: ''
  // },
  // /** 是否单选 默认多选 */
  // isSingle: {
  //     type: Boolean,
  //     default: false
  // },
  ids: {
    type: String,
    default: ''
  },
  cName: {
    type: String,
    default: ''
  },
  stlyrylx: {
    type: String,
    default: '01'
  },
  /** 父级部门 (即只选该部门下的单位) */
  deptId: {
    type: String,
  },
  /** @type { String } 01 部门（默认），02单位(省、市) 03 单位(省、市、县) */
  searchType: {
    type: String,
    default: "01"
  },
  // 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) {
    // console.log('props.width: ', props.width);
    if (typeof props.width === 'string') {
      if (props.width.includes('px')) return props.width
      if (!isNaN(Number(props.width))) return props.width + 'px'
      return props.width
    } else if (typeof props.width === 'number') {
      return `${props.width}px`
    }
  }
})
const xgfManChange = (val) => {
  const ids = val?.id || ''
  const cName = val?.orgName || ''

  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 xgfData = computed(() => {
  if (!props.ids || !props.ids.length) return []
  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
});
</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>
<style></style>
