<template>
  <vxe-modal
    resize
    v-model="showModal"
    @hide="onHide"
    title="用户选择"
    width="900px"
    show-maximize
    show-footer
    esc-closable
  >
    <ProTable
      ref="proTable"
      :config="config"
      @search="handleSearch"
      :data="tableData"
      :showPagination="false"
    />
    <template #footer>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </vxe-modal>
</template>

<script setup name="UserModal" lang="jsx">
  import { ref, onMounted, reactive, nextTick } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getUserPage } from '@/api/user';
  import { Search, Delete } from '@element-plus/icons-vue';
  import { useProTable } from '@/hooks/useProTable';
  import { getTenantPage } from '@/api/tenant';
  import { getdepartmentTree } from '@/api/departmentManage';
  import { getRolePage } from '@/api/role';

  const emits = defineEmits(['confirm']);
  const tableData = ref([]);

  const showModal = ref(false);
  const proTable = ref();
  const Rolelist = ref([]);
  const departlist = ref([]);
  const Tenantlist = ref([]);
  const config = reactive({
    columns: [
      { type: 'checkbox', width: 60, fixed: 'left' },
      { field: 'username', width: 160, title: '用户名称', search: { el: 'input', labelWidth: 85 } },
      {
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <>{row?.tenant?.name}</>;
          },
        },
        field: 'tenantNames',
        enum: Tenantlist,
        width: 160,
        search: { el: 'select', props: { filterable: true,clearable: true }, key: 'tenant', labelWidth: 85 },
        fieldNames: { label: 'name', value: 'id' },
        title: '调解中心',
      },
      {
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <>{Array.from(new Set(row.roleNames)).join(',')}</>;
          },
        },
        width: 160,
        field: 'role',
        enum: Rolelist,
        search: { el: 'select', props: { filterable: true,clearable: true }, key: 'roleCode', labelWidth: 85 },
        fieldNames: { label: 'roleName', value: 'roleCode' },
        title: '角色',
      },

      {
        field: 'departmentName',
        title: '部门',
        enum: departlist,
        fieldNames: { label: 'name', value: 'id' },
        search: {
          el: 'tree-select',
          props: { filterable: true, checkStrictly: true,clearable: true },
          labelWidth: 85,
          key: 'departmentId',
        },
      },
      {
        field: 'phone',
        title: '手机号',
        width: 160,
        search: { el: 'input', props: { clearable: true }, labelWidth: 85 },
      },
    ],
  });

  const handleConfirm = async () => {
    console.log('proTable.value.element', proTable.value.element);
    const checkedList = proTable.value.element.getCheckboxRecords();
    if (!checkedList.length) {
      return ElMessage({
        type: 'warning',
        message: '请选择有效数据！',
        plain: true,
      });
    }
    emits('confirm', checkedList);
    showModal.value = false;
  };
  const onHide = () => {};
  const openModal = (row) => {
    showModal.value = true;
    nextTick(() => {
      if (proTable.value.element) {
        proTable.value.element.setAllCheckboxRow(false);
      }
      if (row && proTable.value.element) {
        setTimeout(() => {
          proTable.value.element.setCheckboxRow(row, true);
        });
      }
    });
  };
  const handleSearch = async (params) => {
    const { result } = await getUserPage({ current: 1, size: 9999999, ...params });
    tableData.value = result.content;
  };
  onMounted(() => {
    handleSearch();
    getRolePage({ current: 1, size: 9999999 }).then((res) => {
      if (res.success) {
        Rolelist.value = res.result.content;
      }
    });
    getTenantPage({ current: 1, size: 9999999, status: 'enable' }).then((res) => {
      if (res.success) {
        Tenantlist.value = res.result.content;
      }
    });
    getdepartmentTree().then((res) => {
      if (res.success) {
        departlist.value = res.result;
      }
    });
  });

  defineExpose({
    openModal,
    tableData,
  });
</script>
