<template>
  <div v-if="inputHeight" style="display: flex;">
    <el-input class="mosty-select" :style="{ width: inputWidth }" v-model="inputName" type="textarea" :rows="4" readonly
      clearable>
    </el-input>
    <el-button style="margin-left: 10px;" :title="btnTitle" class='cursor' :disabled="props.disabled"
      @click="xgfClick">选 择
    </el-button>
  </div>
  <el-input v-else 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>
  <div style="color: rgb(0, 116, 87);">
    <el-popover placement="bottom-start" :width="400" trigger="hover" :title="popovers?.title">
      <template #reference>
        <el-icon :size="28">
          <Warning />
        </el-icon>
      </template>
      <pre v-text="popovers?.content"></pre>
    </el-popover>
  </div>
  <!-- 相关方 -->
  <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, reactive, 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
  },
  /** 输入框高度是否扩充 */
  inputHeight: {
    type: Boolean,
    default: false
  }
})
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 popovers = reactive({
  title: "",
  content: `
  结合自己单位实际工作要求，巡检是否允许相关方人员
  进行代为巡检，允许则可以设置、不允许则不要进行设置
`
});
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(() => {
  if (props.relatedid === 'xgfid111') btnTitle.value = ''
  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>
