<template>
  <el-dialog draggable v-model="visible" :width="width" :modal="true" :append-to-body="true" :show-close="false" :close-on-click-modal = "false">
    <template #header>
      <div>
        <span>员工选择</span>
        <el-button style="float: right" type="danger" size="small" icon="CloseBold" circle @click="close" />
      </div>
    </template>
    <div class="page-container list-container">
      <div class="list-btns-container">
        <el-button type="success" icon="Search" size="small" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="Delete" size="small" plain @click="handleSearch('clear')">清空</el-button>
        <el-button v-if="multiple" type="primary" :disabled="selections.length === 0" size="small" icon="Back"
          @click="handleMultipleSelected">带回选中</el-button>
      </div>
      <el-form class="list-search-container" size="small" :inline="true">
        <el-form-item label="员工名称：">
          <el-input v-model.trim="queryParams.name" size="small" type="text" placeholder="员工名称" :clearable="true" />
        </el-form-item>
        <el-form-item label="员工工号：">
          <el-input v-model.trim="queryParams.code" size="small" type="text" placeholder="员工工号" :clearable="true" />
        </el-form-item>
        <el-form-item label="部门：">
          <el-input v-model.trim="queryParams.deptName" size="small" type="text" placeholder="部门名称" :clearable="true" />
        </el-form-item>
        <el-form-item label="岗位：">
          <el-input v-model.trim="queryParams.position" size="small" type="text" placeholder="岗位名称" :clearable="true" />
        </el-form-item>
      </el-form>
      <el-table :data="list" row-key="code" size="small" border height="400px" header-row-class-name="list-header-row"
        row-class-name="list-row" @selection-change="handleSelectionChange">
        <el-table-column v-if="multiple" type="selection" :selectable="selectable" :reserve-selection="true" width="40"
          align="center" />
        <el-table-column type="index" label="行号" width="46" align="center" />
        <el-table-column label="员工号" prop="code" width="200" align="center" />
        <el-table-column label="员工姓名" prop="name" width="100" align="center" />
        <el-table-column label="性别" prop="gender" width="50" align="center" />
        <el-table-column label="岗位" prop="position" width="150" align="center" />
        <el-table-column label="部门" prop="deptName" width="150" align="center" />
        <el-table-column label="备注" prop="remark" header-align="center" />
        <el-table-column v-if="!multiple" label="操作" width="50" align="center">
          <template #default="scope">
            <el-button type="success" size="small" icon="finished" link
              @click="handleSingleSelected(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </el-dialog>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import { listPerson } from "@/api/business/person";
const total = ref(0);
const props = defineProps({
  width: {
    type: String,
    default: "1200px",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  selected: {
    type: Array,
    defalut: [],
  },
  singleSelected: {
    type: Function,
    default: null,
  },
  multipleSelected: {
    type: Function,
    default: null,
  },
});
const { singleSelected, multipleSelected, selected } = toRefs(props);
const list = ref([]);
const visible = ref(false);
const data = reactive({
  queryParams: {
    name: "",
    pageSize: 20,
    pageNum: 1,
  },
});
const selections = ref([]);
const { queryParams } = toRefs(data);

/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true;
  getList();
}

/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false;
}

/**
 * 加载数据
 */
function getList() {
  console.log(selected.value);
  listPerson(queryParams.value).then((res) => {
    list.value = res.rows;
    total.value = res.total;
  });
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}

function selectable(row, index) {
  if (selected.value.length > 0) {
    return !selected.value.some((l) => l.personId === row.id);
  } else {
    return true;
  }
}

/**  搜索 事件 */
function handleSearch(type) {
  if (type && type === "clear") {
    queryParams.value = {
      subject: "",
      name: "",
      total: 0,
      pageSize: 20,
      pageNum: 1,
    };
  }
  getList();
}

/** 单选事件 */
function handleSingleSelected(row) {
  console.log(singleSelected.value);
  if (singleSelected.value) {
    singleSelected.value(row);
  }
  close();
}

/** 多选事件 */
function handleMultipleSelected() {
  if (multipleSelected.value) {
    multipleSelected.value(selections.value);
  }
  close();
}

defineExpose({
  open,
});
</script>