<template>
  <el-dialog
    title="添加工段"
    v-model="visible"
    width="800px"
    append-to-body
    draggable
    @close="close"
  >
    <el-form ref="deptChoiceRef" class="master-container" :model="queryParams">
      <div style="display: flex">
        <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="工段编码："
          prop="deptCode"
          label-width="100px"
          style="margin-top: 20px"
        >
          <el-input
            v-model.trim="queryParams.deptCode"
            type="text"
            style="width: 180px"
            placeholder="请输入工段编码"
            :clearable="true"
            @keydown.enter.prevent
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label-width="20px" style="margin-top: 20px">
          <el-button
            type="info"
            icon="Search"
            size="default"
            @click="handleSearch"
            >搜索</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="deptList"
      :row-key="getRowKey"
      size="small"
      v-loading="loading"
      border
      height="370px"
      header-row-class-name="list-header-row"
      row-class-name="list-row"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
        align="center"
        :reserve-selection="true" :selectable="(row) => !deptIds.includes(row.id)"
      />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="工段名称" align="center" prop="deptName" />
      <el-table-column label="工段编码" align="center" prop="deptCode" />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Check"
          :disabled="selections.length === 0"
          @click="handleMultipleSelected"
          >确定</el-button
        >
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { getDeptInfo } from "@/api/system/dept.js"
const { proxy } = getCurrentInstance();
/**工段弹窗变量 */
const total = ref(0);
const props = defineProps({
  multipleSelected: {
    type: Function,
    default: null,
  },
});

const { multipleSelected } = toRefs(props);
const deptList = ref([]);
const selections = ref([]);
const visible = ref(false);
const deptIds = ref([])
const loading = ref(false);
/**查询对象 */
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1,
  },
});

const { queryParams } = toRefs(data);
/***********************  方法区  ****************************/
/** 获取行 id */
function getRowKey(row) {
  return row.deptId;
}

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


/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.deptChoiceRef.resetFields();
  proxy.$refs.dialogTable.clearSelection();
  visible.value = false;
}

/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  getDeptInfo(queryParams.value).then((res) => {
    deptList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

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

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

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

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