<template>
  <div class="detail-container">
    <el-form
      ref="formRef"
      label-position="right"
      label-width="150px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
    >
      <el-form-item label="人员:">
        <el-select
          v-model="ryxx"
          filterable
          remote
          reserve-keyword
          placeholder="输入人员名称 / 联系方式 查询"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="handleSelect"
          value-key="userId"
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.userId"
            :label="item.realName"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位:">
        <el-input v-model="form.gw" />
      </el-form-item>

      <el-form-item label="养护站:">
        <el-input disabled v-model="yhzdata.mc" />
      </el-form-item>

      <el-form-item label="人员角色:">
        <el-select v-model="form.ryjs" placeholder="请选择人员角色">
          <el-option label="负责人" value="1"></el-option>
          <el-option label="普通工作人员" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
    
    <script setup>
import { ref, onMounted, watch } from "vue";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  getUserList: {
    type: Function,
    default: () => () => {},
  },
  yhzdata: {
    type: Object,
    default: () => ({}),
  }
});

const ryxx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
// 选择人员筛选
const remoteMethod = async (query) => {
  loading.value = true;
  const res = await props.getUserList(query);
  if (res) {
    selectOptions.value = res;
  }
  loading.value = false;
};

// 选择人员
const handleSelect = (value) => {
  props.form.xm = value.realName;
  props.form.sjhm = value.phone;
  props.form.userId = value.userId;
};

onMounted(async () => {
  const res = await props.getUserList();
  if (res) {
    selectOptions.value = res;
  }
  props.form.yhzid = props.yhzdata.id
});
</script>
    
    <style>
</style>