<script setup lang="ts" name="EmployeesSelect">
import { ref, toRefs, reactive, getCurrentInstance, computed, watch } from 'vue'
import { listEmployees } from '@/api/personnel/employees'
// import QueryForm from './QueryForm.vue'
// import { useDict } from '@/common/utils/dict'
// import { getDeptName, getPostName } from '@/common/utils/transcoding'
// eslint-disable-next-line camelcase
// const { sys_user_sex, office_status } = useDict('sys_user_sex', 'office_status')

const emit = defineEmits<{
  confirm: [currentRow: any]
}>()
const props = withDefaults(defineProps<{
  label?: string
  serviceCompanyId?: string
  serviceDeptId?: string
  defaultValue?: string[]
  confirmButtonText?: string
}>(), {
  label: '',
  defaultValue: () => [],
  confirmButtonText: '确认转交'
})

const customFieldName = {
  text: 'name',
  value: 'id'
}
const visible = defineModel<boolean>('modelValue', { default: false })
const staffName = defineModel<string>('name', { default: '' })
const employeesList = ref([])
const loading = ref(true)
const pickerValue = ref<any[]>([])

const placeholder = computed(() => `请选择${props.label}`)

watch(() => props.defaultValue, (newVal) => {
  pickerValue.value = newVal
}, { immediate: true })

function onSearch() {
  console.log('onQuery')
  handleQuery()
}
// 查询组件事件重置
function onReset(formQuery) {
  formQuery.resetFields()
  handleQuery()
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 10000,
  name: computed(() => staffName.value),
  serviceCompanyId: computed(() => props.serviceCompanyId),
  serviceDeptId: computed(() => props.serviceDeptId)
})

function getList() {
  loading.value = true
  // 默认是拟入职
  listEmployees(queryParams.value).then(response => {
    employeesList.value = response.rows
  }).finally(() => {
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
getList()

function onConfirm({ selectedIndexes, selectedOptions, selectedValues }) {
  // console.log('onConfirm', selectedOptions[0])
  emit('confirm', selectedOptions[0])
}
</script>

<template>
  <van-popup v-model:show="visible" round position="bottom">
    <van-picker
      v-model="pickerValue"
      :placeholder="placeholder"
      :title="`选择${label}`"
      :columns="employeesList"
      :columns-field-names="customFieldName"
      :swipe-duration="500"
      :loading="loading"
      :confirm-button-text="props.confirmButtonText"
      @confirm="onConfirm"
      @cancel="visible = false"
    >
      <template #title>
        <van-search
          v-model="staffName"
          class="search"
          shape="round"
          placeholder="请输入搜索关键词"
          clearable
          @clear="onSearch"
          @search="onSearch"/>
      </template>
      <template #option="option">
        {{ option.name }}({{ option.employeesCode }})
      </template>
    </van-picker>
  </van-popup>
</template>

<style lang="less" scoped>
.van-search {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 1rem;
  // min-height: 4.4rem;
  border-radius: 1.2rem;
  // box-shadow: 0 0.2rem 2rem  rgba(64, 103, 251, 0.14);
  overflow: hidden;
}
</style>