<template>
  <el-input class="mosty-select" :style="{ width: inputWidth }" v-model="inputName" readonly clearable>
    <template #append>
      <el-button :title="btnTitle" class='cursor' :disabled="props.disabled" @click="xgfClick">选 择
      </el-button>
    </template>
  </el-input>
  <!-- 相关方 -->
  <MOSTY.xgfandzzjgry class="xgf-container-tc" v-model="isShowXgf" :xgfId="xgfId" :Single="props.isXgfSingle"
    :isHideRylx="true" :data="xgfData" :stlyrylx="props.stlyrylx" :relatedid="props.relatedid"
    @choosedUsers="xgfManChange" :personnelType="personnelType" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ref, defineProps, defineEmits, onMounted, watch, defineExpose, computed, onUnmounted } from "vue"
import emitter from "@/utils/eventBus.js"

const props = defineProps({
  dataList: {
    type: Array,
    default: () => ([])
  },
  disabled: {
    type: Boolean,
    default: false
  },
  relatedid: {
    type: String,
    default: ""
  },
  /** 是否单选 默认多选 */
  isXgfSingle: {
    type: Boolean,
    default: false
  },
  ids: {
    type: String,
    default: ""
  },
  cName: {
    type: String,
    default: ""
  },
  /** 01:单位职工 02:相关方 */
  stlyrylx: {
    type: String,
    default: "02"
  },
  /** 是否显示人员类型 */
  personnelType: {
    type: Boolean,
    default: false
  },
  /** 输入框宽度 */
  inputWidth: {
    type: String,
    default: undefined
  }
})
const emit = defineEmits(["change", "update:ids", "update:cName", "clear"])

const btnTitle = ref('请先选择巡查相关方')
const isShowXgf = ref(false)
const xgfMan = ref("")
const xgfRyId = ref("")
const inputName = ref("")
let xgfId = ref()
const xgfManChange = (val) => {
  val = Array.isArray(val) ? val : []
  const ids = val.map(item => item.id).join(",")
  const cName = val.map(item => item.userName).join(",")

  emit("update:ids", ids)
  emit("update:cName", cName)
  emit("change", val)
}

const xgfClick = () => {
  isShowXgf.value = true
}
const clear = () => {
  xgfMan.value = ""
  xgfRyId.value = ""
}
// 数组回显
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(() => {
  emitter.on("update:id", (data) => xgfId.value = data)
})
onUnmounted(() => emitter.off())
defineExpose({
  clear
})
</script>

<style scoped lang="scss">
.mosty-select {
  // width: 337px;
}
.xgf-container-tc ::v-deep .content .el-button + .el-button {
  margin-left: 10px;
}
</style>
