<!--
 * @since: 2025-01-10
 * SearchFrom.vue
-->
<template>
   <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="form-inline">
     <el-form-item  label-position="left" prop="queryType">
      <el-select v-model="searchForm.queryType" placeholder="选择类型" class="type-select">
          <el-option
            v-for="item in queryTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          :style="{ width: '180px' }"
          v-model="searchForm.queryTypeContent"
          clearable
          placeholder="请输入查找内容"
          :disabled="!searchForm.queryType"
        />
    </el-form-item>
    <el-form-item label="请选择角色："  label-position="left" prop="roleId">
      <el-select v-model="searchForm.roleId" placeholder="请选择角色" class="protocal-select">
          <el-option
            v-for="item in roleData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
    </el-form-item>
    <el-form-item label="请选择组织：" label-position="left" prop="deptId">
       <el-tree-select
          v-model="searchForm.deptId"
          :data="departmentList"
          :render-after-expand="false"
          :default-expand-all="true"
          check-strictly
          placeholder="请选择组织"
          class="protocal-select"
        />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :icon="Filter" @click="serachHandle">查询</el-button>
      <el-button :icon="Refresh" @click="resetFormHandle(searchFormRef)">重置</el-button>
    </el-form-item>
   </el-form>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Filter, Refresh } from '@element-plus/icons-vue';
  import { FormInstance } from 'element-plus';
  import { queryTypeSelect } from '../constant';
  import { OptionsProps } from '../types';
    
  interface Props {
    roleData: OptionsProps[],
    departmentList: OptionsProps[]
  }
  const props = defineProps<Props>();
  console.log('props: ', props.roleData);
  
  interface SearchFromProps {
    queryType: string;
    queryTypeContent: string;
    roleId: string;
    deptId: string;
  }

  const searchForm = ref<SearchFromProps>({
    queryType: '',
    queryTypeContent: '',
    roleId: '',
    deptId: ''
  })

 // 重置表单
  const searchFormRef = ref<FormInstance>();
  const resetFormHandle = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl?.resetFields();
    searchForm.value.queryTypeContent = ''
    emit('resetForm');
  };

  const emit = defineEmits(['getTableData', 'resetForm']);
  // 获取列表数据
  const serachHandle = () => {
    emit('getTableData', searchForm.value);
  };

  const getSearchFromData = () => {
    return searchForm.value;
  };

  defineExpose({ getSearchFromData, resetFormHandle });
</script>

<style scoped lang="scss">

.type-select {
    width: 100px;
  }

  .protocal-select {
    width: 160px;
  }

  .query-head {
    padding: 24px 57px 18px 21px;
  }

  .protocal-select {
    width: 160px;
  }
  .form-inline .el-input {
    --el-input-width: 160px;
  }

  .form-inline .el-select {
    --el-select-width: 160px;
  }
  .el-radio.el-radio--large {
    height: 22px;
  }
  .el-form--inline .el-form-item {
    margin-right: 40px;
  }
  .el-form {
    padding: 20px 0 20px 20px;
  }
</style>
