<template>
  <el-dialog title="选择部门" v-model="visible" width="800px" append-to-body draggable>
    <el-form ref="dialogForm" class="master-container" :model="queryParams" style="align-items: center;" >
      <div style="display: flex;">
        <el-form-item label="部门编码：" prop="deptCode" label-width="100px" style="margin-top: 20px;">
          <el-input
            v-model.trim="queryParams.deptCode"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入部门编码"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="部门名称：" prop="deptName" label-width="100px" style="margin-top: 20px;">
          <el-input
            v-model.trim="queryParams.deptName"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入部门名称"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label-width="20px" style="margin-top: 20px;">
          <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </div>
    </el-form>
          <el-table v-loading="loading" row-key="deptId" :data="dataList" height="400px">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="部门编码" prop="deptCode" width="150" align="center" />
            <el-table-column label="部门名称" prop="deptName" align="center" />
            <el-table-column label="操作" width="60" align="center">
              <template #default="scope">
                <el-button link type="success" icon="Select" @click="handleSelectDept(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
  </el-dialog>
</template>
<script setup>
import { listDept } from '@/api/system/dept'
const emit = defineEmits(['handleSelectDept','handleSelectBelongingDept'])
const { proxy } = getCurrentInstance()

const loading = ref(false)
const visible = ref(false)
const multiple = ref(false)

const dataList = ref([])

/** 设备档案 查询对象 */
const queryParams = ref({
  type: 0,
  deptName: '',
  deptCode: '',
  isWorkSection: 1
})
/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  visible.value = true
  multiple.value = data
  loadData()
}

const loadData = () => {
  loading.value = true
  listDept(queryParams.value).then((res) => {
    dataList.value = res.rows
    //dataTotal.value = res.total
    loading.value = false
  })
}

const handleRefreshDetail = () => {
  loadData()
}

const handleSelectDept = (data) => {
  if(multiple.value){
    emit('handleSelectDept', data)
  }
  else {
    emit('handleSelectBelongingDept', data)
  }
  
  proxy.$refs.dialogForm.resetFields()
  visible.value = false
}
const handleSearch = () => {
  loadData()
}

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
