<template>
  <div>
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            :prefix-icon="Search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              style="width: 150px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
              style="width: 150px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button :icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-show="checkType === 'multiple'" ref="dataTable" v-loading="loading" :row-key="getRowKey" :data="userList" @selection-change="handleMultipleUserSelect">
          <el-table-column type="selection" :reserve-selection="true" width="50" align="center" />
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
        </el-table>
        <el-table v-show="checkType === 'single'" v-loading="loading" :data="userList" @current-change="handleSingleUserSelect">
          <el-table-column  width="55" align="center" >
            <template #default="scope">
              <el-radio v-model="radioSelected" :label="scope.row.userId">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
          <el-table-column label="用户姓名" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page-sizes="[5,10]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" name="FlowUser" setup>
import { listUser, deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Search, Refresh, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, ElForm } from "element-plus";
import {
	ref,
	reactive,
	watchEffect,
  defineComponent,
	getCurrentInstance,
} from "vue";
import { StrUtil } from "@/utils/StrUtil";
import { ComponentView } from "echarts";

// 引入全局方法
const { proxy } = getCurrentInstance() as any;
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { sys_user_sex } = proxy.useDict("sys_user_sex");

  // 接受父组件的值
const props = defineProps<{
  // 回显数据传值
  selectValues: {
    type: Number | String | Array,
    default: null,
    required: false
  },
  // 表格类型
  checkType: {
    type: String,
    default: 'multiple',
    required: true
  },
}>()

const queryForm = ref<InstanceType<typeof ElForm>>();

// 遮罩层
const loading = ref<boolean>(true);
// 选中数组
const ids = reactive<any>({
	value: [],
});
// 非单个禁用
const single = ref<boolean>(true);
// 非多个禁用
const multiple = ref<boolean>(true);
// 显示搜索条件
const showSearch = ref<boolean>(true);
// 总条数
const total = ref<number>(0);
// 用户表格数据
const userList = reactive<any>({
	value: [],
});
// 弹出层标题
const title = ref<string>("");
// 部门树选项
const deptOptions = ref<undefined>(undefined)
// 是否显示弹出层
const open = ref<boolean>(false);
// 部门名称
const deptName = ref<undefined>(undefined)
// 表单参数
const form = reactive<any>({})

const defaultProps = reactive<any>({
  children: "children",
  label: "label"
})
// 查询参数
const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 5,
  userName: undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined
})
// 列信息
const columns = reactive<any>([
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
])
// 单选框传值
const radioSelected = ref<null>(null)
// 回显数据传值
const selectUserList = reactive<any>({
  value: []
})

const dateRange = reactive<any>({
  value: []
})

/** 查询用户列表 */
const getList = () => {
  loading.value = true;
  listUser(queryParams).then((response: any) => {
      userList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  );
}
getList()

/** 查询部门下拉树结构 */
const getDeptTree = () => {
  deptTreeSelect().then((response: any) => {
    deptOptions.value = response.data;
  });
}
getDeptTree()

// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
const getRowKey = (row: any) => {
  return row.id
}

// 筛选节点
const filterNode = (value: any, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

// 节点单击事件
const handleNodeClick = (data: any) => {
  queryParams.deptId = data.id;
  handleQuery();
}

const emit = defineEmits(["handleUserSelect", "handleUserSelect"]);

// 多选框选中数据
const handleMultipleUserSelect = (selection: any) => {
  emit('handleUserSelect', selection);
}
// 单选框选中数据
const handleSingleUserSelect = (selection: any) => {
  radioSelected.value = selection.userId;//点击当前行时,radio同样有选中效果
  emit('handleUserSelect', selection);
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  // dateRange.value = [];
  proxy.resetForm(queryForm);
  queryParams.deptId = undefined;
  proxy.$refs.tree.setCurrentKey(null);
  handleQuery();
}
  // watch: {
  //   // 根据名称筛选部门树
  //   deptName(val) {
  //     this.$refs.tree.filter(val);
  //   },
  //   selectValues: {
  //     handler(newVal) {
  //       if (StrUtil.isNotBlank(newVal)) {
  //         if (newVal instanceof Number) {
  //           this.radioSelected = newVal
  //         } else {
  //           this.selectUserList = newVal;
  //         }
  //       }
  //     },
  //     immediate: true
  //   },
  //   userList: {
  //     handler(newVal) {
  //       if (StrUtil.isNotBlank(newVal)  && this.selectUserList.length > 0) {
  //         this.$nextTick(() => {
  //           this.$refs.dataTable.clearSelection();
  //           this.selectUserList?.split(',').forEach(key => {
  //             this.$refs.dataTable.toggleRowSelection(newVal.find(
  //               item => key == item.userId
  //             ), true)
  //           });
  //         });
  //       }
  //     },
  //     immediate: true, // 立即生效
  //     deep: true  //监听对象或数组的时候，要用到深度监听
  //   }
  // }
</script>
<style>
/*隐藏radio展示的label及本身自带的样式*/
/*.el-radio__label{*/
/*  display:none;*/
/*}*/
</style>
