<template>
  <!-- 候选用户弹窗 -->
  <el-dialog
    :model-value="userOpen"
    append-to-body
    title="选择负责人"
    width="70%"
    @close="handleClose"
  >
    <el-row :gutter="20" type="flex">
      <!--部门数据-->
      <el-col :span="7">
        <el-card shadow="never" style="height: 100%">
          <div slot="header">
            <span>部门列表</span>
          </div>
          <div class="head-container">
            <!-- TODO: -->
            <el-input
              v-model="selectDeptOpts.deptName"
              clearable
              placeholder="请输入部门名称"
              prefix-icon="search"
              size="small"
              style="margin-bottom: 20px"
            />
            <el-tree
              ref="tree"
              :data="selectDeptOpts.deptOptions"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              :props="selectDeptOpts.deptProps"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <!-- TODO: -->
      <el-col :span="17">
        <el-table
          ref="multipleTable"
          :data="selectDeptOpts.userTableList"
          border
          height="600"
          highlight-current-row
          @row-click="handleCurrentChange"
        >
          <!-- @selection-change="handleSelectionChange" -->
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column align="center" label="用户名" prop="nickName" />
          <el-table-column align="center" label="部门" prop="dept.deptName" />
        </el-table>
        <pagination
          v-model:limit="selectDeptOpts.queryParams.pageSize"
          v-model:page="selectDeptOpts.queryParams.pageNum"
          :total="selectDeptOpts.userTotal"
          @pagination="getUserList"
        />
      </el-col>
    </el-row>
    <!-- TODO: -->
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleTaskUserComplete"
        >确 定</el-button
      >
      <el-button @click="userOpen = false">取 消</el-button>
    </div> -->
  </el-dialog>
</template>
<script setup>
import { reactive, toRefs, watch } from "vue";
import { listUser } from "@/api/system/user";
import { addDateRange } from "@/utils/ruoyi";
import { deptTreeSelect } from "@/api/system/dept";

const props = defineProps({
  userOpen: {
    type: Boolean,
    required: true,
  },
  // field: {
  //   type: String,
  //   required: true
  // }
});
const { userOpen } = toRefs(props);

const emits = defineEmits(["user-selected", "close"]);

const data = reactive({
  selectDeptOpts: {
    queryParams: {
      deptId: undefined,
    },
    deptName: "",
    deptTreeData: [],
    deptOptions: [],
    deptTempOptions: [],
    userTableList: [],
    userTotal: 0,
    deptProps: {
      children: "children",
      label: "label",
    },
  },
});
const { selectDeptOpts } = toRefs(data);

function getDeptOptions() {
  return new Promise((resolve, reject) => {
    if (
      !selectDeptOpts.value.deptOptions ||
      selectDeptOpts.value.deptOptions.length <= 0
    ) {
      deptTreeSelect().then((response) => {
        selectDeptOpts.value.deptTempOptions = response.data;
        selectDeptOpts.value.deptOptions = response.data;
        resolve();
      });
    } else {
      reject();
    }
  });
}

function filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

function handleNodeClick(data) {
  selectDeptOpts.value.queryParams.deptId = data.id;
  getUserList();
}

function getDeptTreeData() {
  function refactorTree(data) {
    return data.map((node) => {
      let treeData = {
        id: `DEPT${node.id}`,
        label: node.label,
        parentId: node.parentId,
        weight: node.weight,
      };
      if (node.children && node.children.length > 0) {
        treeData.children = refactorTree(node.children);
      }
      return treeData;
    });
  }

  return new Promise((resolve, reject) => {
    if (
      !selectDeptOpts.value.deptTreeData ||
      selectDeptOpts.value.deptTreeData.length <= 0
    ) {
      getDeptOptions()
        .then(() => {
          selectDeptOpts.value.deptTreeData = refactorTree(
            selectDeptOpts.value.deptOptions
          );
          resolve();
        })
        .catch(() => {
          reject();
        });
    } else {
      resolve();
    }
  });
}

// let dateRange;
/** 查询用户列表 */
function getUserList() {
  listUser(addDateRange(selectDeptOpts.value.queryParams, null)).then(
    (response) => {
      selectDeptOpts.value.userTableList = response.rows;
      selectDeptOpts.value.userTotal = response.total;
    }
  );
}

function handleCurrentChange(currentRow) {
  // form.value.leaderId = currentRow.userId;
  // form.value.leaderName = currentRow.nickName;
  // userOpen.value = false;
  emits("user-selected", currentRow);
}

function handleClose() {
  emits("close");
}

watch(userOpen, (val) => {
  if (val) {
    getDeptTreeData();
    getUserList();
  }
});
</script>

<style scoped></style>
